javascript に依存しない方がいい理由 [JavaScript]
javascript(js) は、便利なスクリプト言語です。
ブラウザとテキストエディタがあれば始められるし、コンパイルやビルドといった作業も必要ないので、すぐに動作確認できます。
プログラムを組んだことの無い人でも、とっつきやすいので、javascript しか使えないという人も見かけます。
昔は、動作が重くて使い物にならなかったのですが、回線速度が速くなり、パソコンの処理能力が早くなり、ブラウザも javascript を高速処理するように作られるようになったので、今では当たり前のように使われています。
jQuery が出てきてから、かなり複雑なことが簡単にできるようになってきましたが、なんでもかんでも javascript を使ってしまう（javascript しか使えない？）という問題も出てきました。
javascript は、クライアントサイドのスクリプトなので、それを忘れていると、おかしな使い方をしてしまうことがあります。
よくあるのが、入力フォームの入力チェックを javascript でやってしまうこと。
これ自体は問題ないのですが、サーバー側に送った時点で、もう一度同じチェックをする必要があります。
javascript を使って、クライアント側でチェックをしても、サーバーに転送する途中で改変される可能性があるからです。
どうせ同じチェックをすることになるので、サーバー側でチェックすれば1回で済みます。
（この辺は、フォームの内容にもよりますが）
サーバー側に送るデータをあつかう場合には、javascript に頼らない方がいいのですが、クライアントサイドということを意識していないと、javascript だけでやった気になってしまいます。
また、javascript を使えない現場というのもたまにあります。
大企業などは、セキュリティポリシーを本社で管理している場合があります。
多くの場合、javascript の特定の命令を実行できないようにしてあったりします。
なので、大企業の出張所や地方の店舗などでは、javascript がうまく動かないということが起こります。
本社に掛け合っても、セキュリティポリシーを変更してもらえることはないので、javascript を使わない方法を考えるしかありません。
専用端末を使う場合も、javascript が動かないことがあります。
セキュリティ的に禁止している場合もありますが、専用端末の場合、ハードウェアが貧弱で javascript が動かないということもあるので、こちらも、javascript を使わない方法を考えるしかありません。
javascript は便利なのですが、あまり依存してしまうと問題になることもあります。
できれば、javascript だけでなく、サーバーサイドの言語（php や Ruby など）を習得して、javascript が使えない状況でもなんとかできるようにしておくことも必要です。
ブラウザとテキストエディタがあれば始められるし、コンパイルやビルドといった作業も必要ないので、すぐに動作確認できます。
プログラムを組んだことの無い人でも、とっつきやすいので、javascript しか使えないという人も見かけます。
昔は、動作が重くて使い物にならなかったのですが、回線速度が速くなり、パソコンの処理能力が早くなり、ブラウザも javascript を高速処理するように作られるようになったので、今では当たり前のように使われています。
jQuery が出てきてから、かなり複雑なことが簡単にできるようになってきましたが、なんでもかんでも javascript を使ってしまう（javascript しか使えない？）という問題も出てきました。
javascript は、クライアントサイドのスクリプトなので、それを忘れていると、おかしな使い方をしてしまうことがあります。
よくあるのが、入力フォームの入力チェックを javascript でやってしまうこと。
これ自体は問題ないのですが、サーバー側に送った時点で、もう一度同じチェックをする必要があります。
javascript を使って、クライアント側でチェックをしても、サーバーに転送する途中で改変される可能性があるからです。
どうせ同じチェックをすることになるので、サーバー側でチェックすれば1回で済みます。
（この辺は、フォームの内容にもよりますが）
サーバー側に送るデータをあつかう場合には、javascript に頼らない方がいいのですが、クライアントサイドということを意識していないと、javascript だけでやった気になってしまいます。
また、javascript を使えない現場というのもたまにあります。
大企業などは、セキュリティポリシーを本社で管理している場合があります。
多くの場合、javascript の特定の命令を実行できないようにしてあったりします。
なので、大企業の出張所や地方の店舗などでは、javascript がうまく動かないということが起こります。
本社に掛け合っても、セキュリティポリシーを変更してもらえることはないので、javascript を使わない方法を考えるしかありません。
専用端末を使う場合も、javascript が動かないことがあります。
セキュリティ的に禁止している場合もありますが、専用端末の場合、ハードウェアが貧弱で javascript が動かないということもあるので、こちらも、javascript を使わない方法を考えるしかありません。
javascript は便利なのですが、あまり依存してしまうと問題になることもあります。
できれば、javascript だけでなく、サーバーサイドの言語（php や Ruby など）を習得して、javascript が使えない状況でもなんとかできるようにしておくことも必要です。
タグ：JavaScript
ランディングページ（LP）とは何? [雑談]
最近、ランディングページ（LP）という言葉をよく聞くようになってきました。
情報商材をあつかっているような人たちは、昔から使っていたのですが、一般企業が意識してランディングページ（LP）使い出したのは割と最近のような気がします。
ランディングページ（LP）とは、ユーザーに何かアクションしてもらうために作るペラサイト（1ページで完結するホームページ）のことです。
ページの最後にボタンがあり、最終的にそのボタンをクリックしてもらうことを目的としています。
ランディングとは、「着地」という意味で、ボタンをクリックしてもらうことが着地地点となります。
複数ページにすると、途中で見るのをやめてしまう人がいるので、1ページで作ります。
ユーザーに期待しているアクションは、資料請求だったり、新規登録だったり、商品の販売だったりします。
ユーザーに何かアクションしてもらうことに特化しているので、普通のホームページとは、考え方がかなり違います。
まず、流入経路が違います。
ホームページは、検索からの流入をメインに考えているので、SEOなどのテクニック（？）も必要になります。
一方、ランディングページ（LP）は、広告リンクやチラシのＱＲコードなどからの流入をメインにしています。
ランディングページ（LP）は、ある程度興味を持っている人に見てもらえないとアクションしてもらえる確率が下がるので、広告のリンク先などにします。
内容的には、ユーザーに何かアクションしてもらうための内容にしなければいけないため、ホームページ以上に言葉や文章の配置、配色が大事になります。
読み進めていく中で、不安を取り除き、ボタンをクリックしたくなるような作り方をします。
見た目のデザインは、邪魔になるので使いません。
ランディングページ（LP）は、ある程度興味を持っている人に見てもらうためのサイトであって、イメージ戦略に使うサイトでは無いからです。
成果の出ているランディングページ（LP）を見ると、デザインがバラバラな印象を受けることがよくありますが、これは戦略です。
きれいなページを作ってしまうと、途中で飽きてしまう人が多いので、あえてデザインを統一しないこともあります。
また、期間限定や数量限定にするのも、ランディングページ（LP）の特徴です。
ホームページのように、作って放置しておいても、成果は上がりません。
限定品だと、ボタンをクリックしたくなるでしょ？
ランディングページ（LP）の作成は、経験がないとなかなかうまく作れません。
理屈通りの結果が出ることが少ないので、実際にランディングページ（LP）を作り、自分で運用している人の方が、圧倒的に成果を出します。
もし、売りたい商品があるのであれば、ランディングページ（LP）を活用することも必要かもしれません。
情報商材をあつかっているような人たちは、昔から使っていたのですが、一般企業が意識してランディングページ（LP）使い出したのは割と最近のような気がします。
ランディングページ（LP）とは、ユーザーに何かアクションしてもらうために作るペラサイト（1ページで完結するホームページ）のことです。
ページの最後にボタンがあり、最終的にそのボタンをクリックしてもらうことを目的としています。
ランディングとは、「着地」という意味で、ボタンをクリックしてもらうことが着地地点となります。
複数ページにすると、途中で見るのをやめてしまう人がいるので、1ページで作ります。
ユーザーに期待しているアクションは、資料請求だったり、新規登録だったり、商品の販売だったりします。
ユーザーに何かアクションしてもらうことに特化しているので、普通のホームページとは、考え方がかなり違います。
まず、流入経路が違います。
ホームページは、検索からの流入をメインに考えているので、SEOなどのテクニック（？）も必要になります。
一方、ランディングページ（LP）は、広告リンクやチラシのＱＲコードなどからの流入をメインにしています。
ランディングページ（LP）は、ある程度興味を持っている人に見てもらえないとアクションしてもらえる確率が下がるので、広告のリンク先などにします。
内容的には、ユーザーに何かアクションしてもらうための内容にしなければいけないため、ホームページ以上に言葉や文章の配置、配色が大事になります。
読み進めていく中で、不安を取り除き、ボタンをクリックしたくなるような作り方をします。
見た目のデザインは、邪魔になるので使いません。
ランディングページ（LP）は、ある程度興味を持っている人に見てもらうためのサイトであって、イメージ戦略に使うサイトでは無いからです。
成果の出ているランディングページ（LP）を見ると、デザインがバラバラな印象を受けることがよくありますが、これは戦略です。
きれいなページを作ってしまうと、途中で飽きてしまう人が多いので、あえてデザインを統一しないこともあります。
また、期間限定や数量限定にするのも、ランディングページ（LP）の特徴です。
ホームページのように、作って放置しておいても、成果は上がりません。
限定品だと、ボタンをクリックしたくなるでしょ？
ランディングページ（LP）の作成は、経験がないとなかなかうまく作れません。
理屈通りの結果が出ることが少ないので、実際にランディングページ（LP）を作り、自分で運用している人の方が、圧倒的に成果を出します。
もし、売りたい商品があるのであれば、ランディングページ（LP）を活用することも必要かもしれません。
webデザイナーというお仕事 [雑談]
最近、webデザイナーという言葉を勘違いしている人によく出会う。
フォトショやイラレで絵を描く人だと思われていることが多い。
もちろん、フォトショやイラレで絵を描くことはあるが、それだけならwebデザイナーではなく、グラフィックデザイナーだ。
webデザイナーは、webをデザインしなければならない。
ホームページを作るときに使う html や css は、データを画面に表示するものであって、複雑な処理をするプログラムではない。
そのため、html や css を書き、画面をデザインするという意味で、webデザイナーと呼ぶ。
画面デザインの中に、絵を描くという作業も出てくるけど、絵を描けなくても webデザインはできる。
webデザイナーというとかっこよく聞こえるかもしれないが、ようするに、ホームページを作る人のこと。
なので、webデザイナーは、html や css はいじれるし、javascript だってそこそこ使えるのが当然。
ただ、規模の大きいホームページ制作会社になると分業しているので、画面設計を担当する人をwebデザイナーといっていることもある。
ちなみに、webプログラマーというと、php やRuby などが使える人というイメージが強くなる。
web をデザインするということは、html や css を書くだけではない。
SEO対策になるようにソースコードを工夫するとか
ユーザーが利用しやすいようにメニューやボタンの配置を考えるとか、
効果的な配色を考えるとか、
意外と経験が必要で、職人的なところもある。
こういう部分ができていないと、ホームページの成果は出ない。
でも、そういうところを評価してもらえることは少ない。
それよりも目に見えて違いがわかる 見た目のデザインを評価する人は多い。
自称 webデザイナーという人がいたら、html や css を書けるか聞いてみるといい。
「css は苦手」とか、「javascript は使ったことがない」とかいう人はけっこう多い。
それは webデザイナーではなく、ただ絵を描くのが好きなだけだったりする。
web をデザインしたいのであれば、フォトショやイラレの前に、html や css が書けなければおかしい。
まともな webデザイナーもたくさんいるんだけどね。
フォトショやイラレで絵を描く人だと思われていることが多い。
もちろん、フォトショやイラレで絵を描くことはあるが、それだけならwebデザイナーではなく、グラフィックデザイナーだ。
webデザイナーは、webをデザインしなければならない。
ホームページを作るときに使う html や css は、データを画面に表示するものであって、複雑な処理をするプログラムではない。
そのため、html や css を書き、画面をデザインするという意味で、webデザイナーと呼ぶ。
画面デザインの中に、絵を描くという作業も出てくるけど、絵を描けなくても webデザインはできる。
webデザイナーというとかっこよく聞こえるかもしれないが、ようするに、ホームページを作る人のこと。
なので、webデザイナーは、html や css はいじれるし、javascript だってそこそこ使えるのが当然。
ただ、規模の大きいホームページ制作会社になると分業しているので、画面設計を担当する人をwebデザイナーといっていることもある。
ちなみに、webプログラマーというと、php やRuby などが使える人というイメージが強くなる。
web をデザインするということは、html や css を書くだけではない。
SEO対策になるようにソースコードを工夫するとか
ユーザーが利用しやすいようにメニューやボタンの配置を考えるとか、
効果的な配色を考えるとか、
意外と経験が必要で、職人的なところもある。
こういう部分ができていないと、ホームページの成果は出ない。
でも、そういうところを評価してもらえることは少ない。
それよりも目に見えて違いがわかる 見た目のデザインを評価する人は多い。
自称 webデザイナーという人がいたら、html や css を書けるか聞いてみるといい。
「css は苦手」とか、「javascript は使ったことがない」とかいう人はけっこう多い。
それは webデザイナーではなく、ただ絵を描くのが好きなだけだったりする。
web をデザインしたいのであれば、フォトショやイラレの前に、html や css が書けなければおかしい。
まともな webデザイナーもたくさんいるんだけどね。
ホームページの見た目のデザイン [雑談]
ホームページの作成を依頼されたとき、依頼者から、
「かっこいいページにして欲しい」とか、
「おしゃれな画像を使いたい」とか、
「動きのあるホームページで」とか言われることが多い。
デザイン系の作成者であれば、「よし！がんばって作ろう！」となるかもしれないけど、まともな作成者であれば、「は？何いってんの？」となる人も多いと思う。
結論から言うと、ホームページの”見た目のデザイン”は、どうでもいい（極端すぎる？）。
ホームページを作る目的は、「より多くの人に見てもらいたい」ということのはず。
であれば、見た目のデザインよりも、考えなければならないことがあります。
例えば、看板やポスターなどであれば、見た目のデザインにこだわるのは理解できる。
多くの通りすがりの人に振り向いてもらうためには、目にとまるデザインが必要だから。
では、ホームページはというと、見た目のデザインで判断することはほとんど無い。
ホームページを探す場合、自分の興味のあるキーワードで検索し、一覧の中から必要な情報が得られそうなホームページを選ぶ。
もしくは、人から勧められて、リンクをクリックしてみるということもある。
ほとんどの人は、こんな使い方をしているはず。
でも、このような使い方の場合、見た目のデザインではなく、文字で判断しています。
さらに、自分の必要としている情報が載っているのであれば、見た目のデザインは気にせずに見ています。
逆に、デザインが派手だったり、画像が動いたりして、うっとうしいという場合さえある。
それなのに、なぜ作る段階になると、見た目にこだわるのか？
それよりも、見たくなるようなキャッチコピーとか、わかりやすい説明文とかにこだわるべき。
ほとんどの場合、文字で判断して見ているんだから、文字にこだわらなければ、多くの人には見てもらえない。
結局、見た目のデザインにこだわるのは、作成者や依頼者の自己満足でしかない。
そもそも、かっこいいデザインにしたから訪問者が増えたとか、きれいなデザインにしたから売り上げが伸びたなんてことは聞いたこともないし、経験したこともない。
（きれいなデザインにしたら訪問者が激減した、という経験はあるけど・・・）
あるとすれば、アーティストとかミュージシャンとか、イメージを売っている場合だけ。
近所の中小企業やお店が見た目のデザインにこだわっても、時間とお金の無駄でしかない。
見た目のデザインはそこそこにして、使いやすさや運用に力を入れた方がいい。
試しに、よく売れているネットショップとか、訪問者の多いブログとか見てみるといい。
ほとんどは、余計なデザインなどは無く、シンプルになっているはずです。
見た目のデザインにこだわっているうちは、成果の出ないホームページにしかなりませんよ。
「かっこいいページにして欲しい」とか、
「おしゃれな画像を使いたい」とか、
「動きのあるホームページで」とか言われることが多い。
デザイン系の作成者であれば、「よし！がんばって作ろう！」となるかもしれないけど、まともな作成者であれば、「は？何いってんの？」となる人も多いと思う。
結論から言うと、ホームページの”見た目のデザイン”は、どうでもいい（極端すぎる？）。
ホームページを作る目的は、「より多くの人に見てもらいたい」ということのはず。
であれば、見た目のデザインよりも、考えなければならないことがあります。
例えば、看板やポスターなどであれば、見た目のデザインにこだわるのは理解できる。
多くの通りすがりの人に振り向いてもらうためには、目にとまるデザインが必要だから。
では、ホームページはというと、見た目のデザインで判断することはほとんど無い。
ホームページを探す場合、自分の興味のあるキーワードで検索し、一覧の中から必要な情報が得られそうなホームページを選ぶ。
もしくは、人から勧められて、リンクをクリックしてみるということもある。
ほとんどの人は、こんな使い方をしているはず。
でも、このような使い方の場合、見た目のデザインではなく、文字で判断しています。
さらに、自分の必要としている情報が載っているのであれば、見た目のデザインは気にせずに見ています。
逆に、デザインが派手だったり、画像が動いたりして、うっとうしいという場合さえある。
それなのに、なぜ作る段階になると、見た目にこだわるのか？
それよりも、見たくなるようなキャッチコピーとか、わかりやすい説明文とかにこだわるべき。
ほとんどの場合、文字で判断して見ているんだから、文字にこだわらなければ、多くの人には見てもらえない。
結局、見た目のデザインにこだわるのは、作成者や依頼者の自己満足でしかない。
そもそも、かっこいいデザインにしたから訪問者が増えたとか、きれいなデザインにしたから売り上げが伸びたなんてことは聞いたこともないし、経験したこともない。
（きれいなデザインにしたら訪問者が激減した、という経験はあるけど・・・）
あるとすれば、アーティストとかミュージシャンとか、イメージを売っている場合だけ。
近所の中小企業やお店が見た目のデザインにこだわっても、時間とお金の無駄でしかない。
見た目のデザインはそこそこにして、使いやすさや運用に力を入れた方がいい。
試しに、よく売れているネットショップとか、訪問者の多いブログとか見てみるといい。
ほとんどは、余計なデザインなどは無く、シンプルになっているはずです。
見た目のデザインにこだわっているうちは、成果の出ないホームページにしかなりませんよ。
レスポンシブと振り分け どちらを使うか？ [html/css]
たぶん、あまり知識の無い人だと、
レスポンシブの方が新しい技術だからとか、
レスポンシブの方がおしゃれとか、
レスポンシブの方がかっこいいとか、
訳のわからん理由でレスポンシブ一択になっていると思います。w
レスポンシブwebデザインのメリットは、１つの htmlファイルで、パソコンにもスマホにも対応できること。
会社やお店のオフィシャルサイトとか、ブログとか、パソコンでもスマホでも、同じ内容を見せたい場合に使います。
内容を更新する場合にも、htmlファイルを１つ直せばいいので、お手軽です。
ところが、パソコンとスマホで、違う内容を見せたいという場合があります。
ショッピングサイトやポータルサイトなどです。
パソコンとスマホでは、利用者層が違うため、同じものを同じように表示しても成約率が異なります。
一般的にはデータベースなどを使って表示する商品を変えるなどしますが、別々に画面を作った方が利用者が使いやすくなったりします。
また、パソコン画面をフルに利用するような webサービスは、そのままスマホで表示しても使えないので、パソコン用とスマホ用で別の処理をすることもあります。
最近は、最初からスマホ専用で作る場合も多いので、パソコンで使えないという webサービスもありますね。
この場合も、振り分けして、スマホだったらログインを許可するみたいな処理になってきます。
ちょっと特殊ですが、ものすごく複雑なホームページの場合、レスポンシブにすると css がわかりにくくなったり、SEO的によくないということもあります。
レスポンシブの場合、html も css もすべて読み込みます。
パソコンで表示するのに、スマホ用の設定も読み込んでしまうということです。
html と css だけであれば、たいしたロスではないのですが、スマホ用に大量の javascript を使っているような場合、パソコンで表示するのにものすごく時間がかかってしまうということもあります。
当然、その逆もあります。
レスポンシブは、プログラムを知らなくても使えるし、便利ですが、「レスポンシブ」という言葉だけが先行している気がします。
レスポンシブでいいのか？
振り分けの方がいいのか？
誰かが、ちゃんと判断しないといけないと思うわけですよ！
作る側としては、お客さんから笑顔で「レスポンシブにして！」と言われると、「はい、わかりました」と笑顔で返すしかないんですけどね。。。
レスポンシブの方が新しい技術だからとか、
レスポンシブの方がおしゃれとか、
レスポンシブの方がかっこいいとか、
訳のわからん理由でレスポンシブ一択になっていると思います。w
レスポンシブwebデザインのメリットは、１つの htmlファイルで、パソコンにもスマホにも対応できること。
会社やお店のオフィシャルサイトとか、ブログとか、パソコンでもスマホでも、同じ内容を見せたい場合に使います。
内容を更新する場合にも、htmlファイルを１つ直せばいいので、お手軽です。
ところが、パソコンとスマホで、違う内容を見せたいという場合があります。
ショッピングサイトやポータルサイトなどです。
パソコンとスマホでは、利用者層が違うため、同じものを同じように表示しても成約率が異なります。
一般的にはデータベースなどを使って表示する商品を変えるなどしますが、別々に画面を作った方が利用者が使いやすくなったりします。
また、パソコン画面をフルに利用するような webサービスは、そのままスマホで表示しても使えないので、パソコン用とスマホ用で別の処理をすることもあります。
最近は、最初からスマホ専用で作る場合も多いので、パソコンで使えないという webサービスもありますね。
この場合も、振り分けして、スマホだったらログインを許可するみたいな処理になってきます。
ちょっと特殊ですが、ものすごく複雑なホームページの場合、レスポンシブにすると css がわかりにくくなったり、SEO的によくないということもあります。
レスポンシブの場合、html も css もすべて読み込みます。
パソコンで表示するのに、スマホ用の設定も読み込んでしまうということです。
html と css だけであれば、たいしたロスではないのですが、スマホ用に大量の javascript を使っているような場合、パソコンで表示するのにものすごく時間がかかってしまうということもあります。
当然、その逆もあります。
レスポンシブは、プログラムを知らなくても使えるし、便利ですが、「レスポンシブ」という言葉だけが先行している気がします。
レスポンシブでいいのか？
振り分けの方がいいのか？
誰かが、ちゃんと判断しないといけないと思うわけですよ！
作る側としては、お客さんから笑顔で「レスポンシブにして！」と言われると、「はい、わかりました」と笑顔で返すしかないんですけどね。。。
パソコンとスマホの振り分け [html/css]
ホームページのパソコンでもスマホでも見られるようにする場合に、レスポンシブWEBデザインを使うことはよくあります。
１つの html ファイルでパソコンにもスマホにも対応できるので、手軽で便利です。
しかし、パソコンとスマホで、まったく別の画面を表示したいという場合があります。
レスポンシブWEBデザインでもできなくはないですが、SEO的によくないし、複雑な書き方になってしまいメンテナンス性もよくありません。
（ガラケーが対象の場合は、レスポンシブでは対応できません）
なので、パソコン画面とスマホ画面を別々に作り、自動で振り分けることになります。
パソコンとスマホの振り分けは、ユーザーエージェントで判別します。
ホームページにアクセスしてきた時に、パソコンかスマホかを判断し、パソコンだったらパソコン用の html を表示、スマートフォンだったらスマホ用の html を表示します。
ユーザーエージェントをどのように判断するかは、そのホームページの仕組みによって変わってきます。
また、スマホの新しい機種が出ると、ユーザーエージェントが変わっている場合もあるので、確認が必要になってきます。
一番手軽なのは、javascript で振り分ける方法です。
javascript の利用が可能なのであれば、index.html 内に仕込みます。
スマホであれば、index_sp.html を表示します。
javascript が利用できない環境だった場合、.htaccess に記述することもできます。
php が使えるのであれば、いろいろと応用が利くと思います。
例えば、ユーザーエージェントの他に、データベースのデータも使って振り分けるみたいな場合です。
※ iPad は、パソコンとして振り分けしています。
１つの html ファイルでパソコンにもスマホにも対応できるので、手軽で便利です。
しかし、パソコンとスマホで、まったく別の画面を表示したいという場合があります。
レスポンシブWEBデザインでもできなくはないですが、SEO的によくないし、複雑な書き方になってしまいメンテナンス性もよくありません。
（ガラケーが対象の場合は、レスポンシブでは対応できません）
なので、パソコン画面とスマホ画面を別々に作り、自動で振り分けることになります。
パソコンとスマホの振り分けは、ユーザーエージェントで判別します。
ホームページにアクセスしてきた時に、パソコンかスマホかを判断し、パソコンだったらパソコン用の html を表示、スマートフォンだったらスマホ用の html を表示します。
ユーザーエージェントをどのように判断するかは、そのホームページの仕組みによって変わってきます。
また、スマホの新しい機種が出ると、ユーザーエージェントが変わっている場合もあるので、確認が必要になってきます。
一番手軽なのは、javascript で振り分ける方法です。
javascript の利用が可能なのであれば、index.html 内に仕込みます。
スマホであれば、index_sp.html を表示します。
<!--<script type="text/javascript">
if (document.referrer.indexOf('hal.biz-box.jp') == -1 &&
((navigator.userAgent.indexOf('iPhone') > 0 &&
navigator.userAgent.indexOf('iPad') == -1) ||
navigator.userAgent.indexOf('iPod') > 0 ||
navigator.userAgent.indexOf('Android') > 0)) {
location.href = 'index_sp.html';
}
</script>-->javascript が利用できない環境だった場合、.htaccess に記述することもできます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ index_sp.html [R,L]
</IfModule>php が使えるのであれば、いろいろと応用が利くと思います。
例えば、ユーザーエージェントの他に、データベースのデータも使って振り分けるみたいな場合です。
<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if((strpos($ua,'iPhone')!==false && strpos($ua,'iPad')===false) ||
strpos(ua,'iPod')!==false ||
strpos($ua,'Android')!==false ||
strpos($ua,'Windows Phone')!==false) {
$terminal = 'sp';
header("Location: index_sp.html");
exit();
}
?>※ iPad は、パソコンとして振り分けしています。
レスポンシブWEBデザインの概要とサンプル [html/css]
最近、ホームページの話になると、「レスポンシブ対応で」と言われることが多い。
でも、話しを聞いていくと、認識がおかしい人がたくさんいる。
画像が切り替わったり、アニメーションしたりすることが「レスポンシブ」だと思っている人が多いらしい。
他のブログとか見てても似たような記事があるので、間違った認識でいる人は、ある程度いるのかもしれない。
この１ヶ月くらいで、３回もそんなことがあって、うち１回はwebデザイナーさんだったりする・・・。
素人の人ならわかるけど、さすがに業界の人はまずいだろうと思ったので、ちょっと書いてみる。
レスポンシブWEBデザインとは、１つの html ファイルで、様々な端末の画面サイズに対応すること。
様々な端末というのは、パソコンとか、タブレットとか、スマートフォンとか。
機種によって画面サイズが違うので、それぞれに最適化して作っていたらきりがない。
そこで、css でなんとか対応させてしまおうというのがレスポンシブデザイン。
例えば、こんな感じのホームページを作りたいとする。
まず、パソコン画面とスマホ画面を合体させたような html を作る。
次に css にパソコン画面の設定とスマホ画面の設定を書く。
css の内容は、こんな感じ。
【パソコン画面の場合】
【スマホ画面の場合】
レスポンシブデザインのサンプル（sample.html）
レスポンシブデザインのサンプル（style.css）
このサンプルでは、ディスプレイ幅800px で切り替わるようにしてみた。
細かく設定するのであれば、
パソコンの場合（指定なし）
タブレットの場合（ディスプレイ幅800px 以下）
スマートフォンの場合（ディスプレイ幅480px 以下）
などを css に書けばいいんだけど、複雑になってサンプルとしてはわかりにくくなるのでやめました。
パソコンで表示して、ブラウザの横幅を動かすと、表示が切り替わるはず。
タグの意味は、ググってください（笑）。
１つの html ファイルで、いろいろな端末の画面サイズに対応できるレスポンシブWEBデザインですが、デメリットもあるので、なんでもかんでもレスポンシブ！というのは、違うと思っています。
その辺は、ホームページ作成者やwebデザイナーがちゃんと判断してくれるはず！？
でも、話しを聞いていくと、認識がおかしい人がたくさんいる。
画像が切り替わったり、アニメーションしたりすることが「レスポンシブ」だと思っている人が多いらしい。
他のブログとか見てても似たような記事があるので、間違った認識でいる人は、ある程度いるのかもしれない。
この１ヶ月くらいで、３回もそんなことがあって、うち１回はwebデザイナーさんだったりする・・・。
素人の人ならわかるけど、さすがに業界の人はまずいだろうと思ったので、ちょっと書いてみる。
レスポンシブWEBデザインとは、１つの html ファイルで、様々な端末の画面サイズに対応すること。
様々な端末というのは、パソコンとか、タブレットとか、スマートフォンとか。
機種によって画面サイズが違うので、それぞれに最適化して作っていたらきりがない。
そこで、css でなんとか対応させてしまおうというのがレスポンシブデザイン。
例えば、こんな感じのホームページを作りたいとする。
まず、パソコン画面とスマホ画面を合体させたような html を作る。
次に css にパソコン画面の設定とスマホ画面の設定を書く。
css の内容は、こんな感じ。
【パソコン画面の場合】
- フッターメニューを非表示にする
- その他はすべて表示
【スマホ画面の場合】
- ヘッダーメニューを非表示にする
- 本文を横幅100%にする
- サイドのfloatを外し、横幅100%にする
- フッターメニューを表示する
レスポンシブデザインのサンプル（sample.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<title>レスポンシブ サンプル</title>
<meta charset="utf-8">
<meta content="width=device-width, user-scalable=yes, initial-scale=1.0,
maximum-scale=2.0" name="viewport">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div id="header">ヘッダー</div>
<div id="header_menu">ヘッダーメニュー</div>
<div id="main">本文</div>
<div id="side">サイド</div>
<div id="footer_menu">フッターメニュー</div>
<div id="footer">フッター</div>
</div>
</body>
</html>レスポンシブデザインのサンプル（style.css）
@charset "UTF-8";
body{
margin: 0;
padding: 0;
color:#fff;
font-size: 20px;
font-weight:bold;
background-color:#fff;
text-align:center;
}
.wrapper{
width:800px;
margin:auto;
background-color:transparent;
}
#header{
width:100%;
padding:20px 0;
display:block;
background-color:#008000;
}
#header_menu{
width:100%;
padding:20px 0;
color:#fff;
background-color:#ff6600;
}
#main {
width: 70%;
height:200px;
padding:20px 0;
color:#000;
background-color:#ffff00;
float:left;
}
#side{
width:30%;
height:200px;
padding:20px 0;
color:#000;
background-color:#00ffff;
float:right;
}
#footer_menu{
display:none;
}
#footer{
width:100%;
padding:20px 0;
background-color:#008000;
clear:both;
}
/*--- ディスプレイ幅800pxより小さい画面に使われるCSS ---*/
@media screen and (max-width: 800px) {
html{width: 100%;}
body{
width: 100%;
margin:0;
padding:0;
}
.wrapper{
width: 100%;
margin:0;
background-color: transparent;
}
#header_menu{
display:none;
}
#main {
width: 100%;
height:200px;
padding:20px 0;
color:#000;
background-color:#ffff00;
float:none;
}
#side{
width:100%;
height:100px;
padding:20px 0;
color:#000;
background-color:#00ffff;
float:none;
}
#footer_menu{
width:100%;
padding:20px 0;
display:block;
color:#fff;
background-color:#ff6600;
clear:both;
}
}
このサンプルでは、ディスプレイ幅800px で切り替わるようにしてみた。
細かく設定するのであれば、
パソコンの場合（指定なし）
タブレットの場合（ディスプレイ幅800px 以下）
スマートフォンの場合（ディスプレイ幅480px 以下）
などを css に書けばいいんだけど、複雑になってサンプルとしてはわかりにくくなるのでやめました。
パソコンで表示して、ブラウザの横幅を動かすと、表示が切り替わるはず。
タグの意味は、ググってください（笑）。
１つの html ファイルで、いろいろな端末の画面サイズに対応できるレスポンシブWEBデザインですが、デメリットもあるので、なんでもかんでもレスポンシブ！というのは、違うと思っています。
その辺は、ホームページ作成者やwebデザイナーがちゃんと判断してくれるはず！？
田舎の中小業でＩＴ化が進まない原因 [雑談]
先日、役所の人と話をしたときに「企業のＩＴ化がまったく進んでいない」という話題になりました。それは、私自身もすごく感じています。というか、驚くほど進んでいません。
いまさら「ＩＴ化」というのも変ですが・・・。
私の住んでいるところは、田舎の小さな街。
中小企業がたくさんあります。
ほとんどの中小企業は大企業の下請けだと思います。
そのためなのか、情報発信の必要性を感じていないようで、ホームページを持っていないなんて会社がたくさんあります。
連絡をとるのも、電話かＦＡＸ。
メールアドレスはもっているけど使ったことがない。
直接会いに行った方が早かったりします。
役所の申請書類をホームページからダウンロードできるようになっていても、役所まで紙の書類を取りに来たり・・・。
せめて、メールくらいは使えるようになってもらいたいものです。
もうパソコンが一般的になってからだいぶたつし、スマホだってかなり普及していると思っているのですが、実際にはほとんど使っていない、使いこなしていない会社も多いと感じています。
若い社長の会社であっても、「紙と鉛筆方式」でやっている会社もあります。
逆に、小さい会社なのに、パソコンやタブレットを駆使して、先進的なことをやっている会社もあります。
６０代、７０代の社長なのに、ＩＴツールを使いこなしている会社もあります。
その差はなんなのか？
いろいろ見ていると、ＩＴ化の進んでいる会社の社長（役員）は、普段からパソコンやインターネットを利用しています。
ブログや Facebook をやっていたり、趣味の写真を整理するのにパソコンを使っていたり。
プライベートでも使っているから、ＩＴのメリットとデメリットを理解していて、自分の会社に必要な機能がなんなのかをしっかりと認識できているようです。
ＩＴ化の進んでいない会社の社長は、ほぼ確実に自宅でもパソコンなどを使っていません。
都会にいるとスマホを活用しないと不便だと感じることもありますが、田舎だとスマホなど無くても生活に支障が出ません。
周りに使いこなしている人もほとんどいません。
普段から使っていないので、「難しいモノ」という先入観があるのかもしれません。
ＩＴの導入に積極的な社長であっても、普段からパソコンなどを使っていない社長だとうまく活用できていないケースが目立ちます。
よくわかっていないので、会社内にパソコンに詳しい若い社員がいても、指示が出せないとか、説明できないという状況になってしまっているようです。
ＩＴ化は、トップダウンで進めることが多くなるはずなので、トップである社長がＩＴの利点をわかっていなければ、うまく活用できません。
田舎に住んでいると、「使えなくてもなんとかなる」のですが、まずは、社長が ”使えるようになってみる” ことです。
「パソコン覚えるくらいの努力が出来ないなら社長なんかやめちまえ！」
と、某社長が言っておりました（笑）
いまさら「ＩＴ化」というのも変ですが・・・。
私の住んでいるところは、田舎の小さな街。
中小企業がたくさんあります。
ほとんどの中小企業は大企業の下請けだと思います。
そのためなのか、情報発信の必要性を感じていないようで、ホームページを持っていないなんて会社がたくさんあります。
連絡をとるのも、電話かＦＡＸ。
メールアドレスはもっているけど使ったことがない。
直接会いに行った方が早かったりします。
役所の申請書類をホームページからダウンロードできるようになっていても、役所まで紙の書類を取りに来たり・・・。
せめて、メールくらいは使えるようになってもらいたいものです。
もうパソコンが一般的になってからだいぶたつし、スマホだってかなり普及していると思っているのですが、実際にはほとんど使っていない、使いこなしていない会社も多いと感じています。
若い社長の会社であっても、「紙と鉛筆方式」でやっている会社もあります。
逆に、小さい会社なのに、パソコンやタブレットを駆使して、先進的なことをやっている会社もあります。
６０代、７０代の社長なのに、ＩＴツールを使いこなしている会社もあります。
その差はなんなのか？
いろいろ見ていると、ＩＴ化の進んでいる会社の社長（役員）は、普段からパソコンやインターネットを利用しています。
ブログや Facebook をやっていたり、趣味の写真を整理するのにパソコンを使っていたり。
プライベートでも使っているから、ＩＴのメリットとデメリットを理解していて、自分の会社に必要な機能がなんなのかをしっかりと認識できているようです。
ＩＴ化の進んでいない会社の社長は、ほぼ確実に自宅でもパソコンなどを使っていません。
都会にいるとスマホを活用しないと不便だと感じることもありますが、田舎だとスマホなど無くても生活に支障が出ません。
周りに使いこなしている人もほとんどいません。
普段から使っていないので、「難しいモノ」という先入観があるのかもしれません。
ＩＴの導入に積極的な社長であっても、普段からパソコンなどを使っていない社長だとうまく活用できていないケースが目立ちます。
よくわかっていないので、会社内にパソコンに詳しい若い社員がいても、指示が出せないとか、説明できないという状況になってしまっているようです。
ＩＴ化は、トップダウンで進めることが多くなるはずなので、トップである社長がＩＴの利点をわかっていなければ、うまく活用できません。
田舎に住んでいると、「使えなくてもなんとかなる」のですが、まずは、社長が ”使えるようになってみる” ことです。
「パソコン覚えるくらいの努力が出来ないなら社長なんかやめちまえ！」
と、某社長が言っておりました（笑）
内部処理を修正しました [ぶっくま！]
ぶっくま！の内部処理を修正しました。
主にデータベース周りの修正なので、ほとんど見えない部分なのですが・・・。
１カ所だけ、ユーザーから見える部分を修正してあります。
［ブックマークの登録］（＋ボタン）のページで、グループ名の変更ができるようになっていましたが、これを削除しました。
あまり使われていないのと、他のメニューからグループ名を変更できるため、不要と判断しました。
本当は、見える部分も大幅に修正したかったのですが、なかなかまとまった時間が作れず滞っています。
いろいろと要望もいただいているので、少しずつ実現していこうと思っています。
これからもよろしくお願いします。
主にデータベース周りの修正なので、ほとんど見えない部分なのですが・・・。
１カ所だけ、ユーザーから見える部分を修正してあります。
［ブックマークの登録］（＋ボタン）のページで、グループ名の変更ができるようになっていましたが、これを削除しました。
あまり使われていないのと、他のメニューからグループ名を変更できるため、不要と判断しました。
本当は、見える部分も大幅に修正したかったのですが、なかなかまとまった時間が作れず滞っています。
いろいろと要望もいただいているので、少しずつ実現していこうと思っています。
これからもよろしくお願いします。
タグ：ぶっくま！
PHP はダメ？理由を考えてみた [php]
私は現在、PHP をメインにプログラムを作っています。
他の言語を使うこともありますが、web の仕事はほぼ PHP です。
たまに、「PHP はダメだ」とか「PHP は使えない」という話しを聞きます。
個人的には、使えるモノは使えばいいと思っているのですが・・・。
PHP のメリットは、初心者がとっつきやすいということだと思っています。
プログラマーであれば、多少さわったことがあるという人はたくさんいます。
ちょっとしたツールであれば、簡単に作れます。
わからないことがあってもインターネットで検索すればいくらでも情報があります。
ほとんどのレンタルサーバーでは最初から PHP を使えるようになっています。
コンパイルなどの作業がいらず、書いたコードの結果をすぐに確認できます。
ただ、簡単にそれっぽいモノが作れてしまうため、いいかげんなコードもたくさん公開されています。
また、PHP は、言語仕様が厳格ではありません。１つのことに対していろいろな書き方が出来てしまいます。
この辺が、「PHP はダメ」と言われるような気がします。
もともと、PHP は、「動的にHTMLを生成する」ために作られています。
システムを作ったり、ハードウェアを制御するための言語ではありません。
ここが他のプログラミング言語と大きく違う部分です。
最終的にHTMLを生成できればいいので、言語仕様を厳格にする必要がないのです。
現在のPHP は、バージョンアップを重ねて、大規模なシステムも作れるようになっています。
ただし、初心者が簡単に作れるわけではありません。
他の言語のように、言語側がある程度コントロールしてくれるということがないため、すべて自前で書かなければいけないというイメージです。
知識や経験が無いと、穴だらけのシステムになりやすいのも、PHP の特徴です。
とはいえ、PHP は手軽なうえ、少ない工数で開発できるスクリプト言語です。
PHP での開発を指定される仕事もよくあります。
デメリットもたくさんありますが、それをわかった上でうまく使っていけばいいのではないでしょうか。
他の言語を使うこともありますが、web の仕事はほぼ PHP です。
たまに、「PHP はダメだ」とか「PHP は使えない」という話しを聞きます。
個人的には、使えるモノは使えばいいと思っているのですが・・・。
PHP のメリットは、初心者がとっつきやすいということだと思っています。
プログラマーであれば、多少さわったことがあるという人はたくさんいます。
ちょっとしたツールであれば、簡単に作れます。
わからないことがあってもインターネットで検索すればいくらでも情報があります。
ほとんどのレンタルサーバーでは最初から PHP を使えるようになっています。
コンパイルなどの作業がいらず、書いたコードの結果をすぐに確認できます。
ただ、簡単にそれっぽいモノが作れてしまうため、いいかげんなコードもたくさん公開されています。
また、PHP は、言語仕様が厳格ではありません。１つのことに対していろいろな書き方が出来てしまいます。
この辺が、「PHP はダメ」と言われるような気がします。
もともと、PHP は、「動的にHTMLを生成する」ために作られています。
システムを作ったり、ハードウェアを制御するための言語ではありません。
ここが他のプログラミング言語と大きく違う部分です。
最終的にHTMLを生成できればいいので、言語仕様を厳格にする必要がないのです。
現在のPHP は、バージョンアップを重ねて、大規模なシステムも作れるようになっています。
ただし、初心者が簡単に作れるわけではありません。
他の言語のように、言語側がある程度コントロールしてくれるということがないため、すべて自前で書かなければいけないというイメージです。
知識や経験が無いと、穴だらけのシステムになりやすいのも、PHP の特徴です。
とはいえ、PHP は手軽なうえ、少ない工数で開発できるスクリプト言語です。
PHP での開発を指定される仕事もよくあります。
デメリットもたくさんありますが、それをわかった上でうまく使っていけばいいのではないでしょうか。
タグ：PHP
