ホームページにfacebookページのQRコードを置く方法

ホームページに、facebookページのQRコードをおいて、モバイルやスマフォでアクセスしてもらう方法をメモします。
けっこうたくさん検索して一番いい方法にたどり着くのに時間かかりました。

QRコードを出したい場所に下記のタグを書きます。

 <img src="http://chart.apis.google.com/chart?cht=qr&chs=150x150&choe=UTF-8&chld=|1&chl=https://www.facebook.com/webnomori">

上記のタグを使って表示させたのがこれです。

 


タグがわかる人なら簡単に意味がわかると思いますが

 <img src="http://chart.apis.google.com/chart?cht=qr&chs=サイズxサイズ&choe=UTF-8&chld=|1&chl=接続させたいURL">

自分のfacebookページへ、モバイルやスマフォでアクセスしてもらいたい場合の方法を探していて見つけたのですが、別にfacebookページじゃなくて、自社の携帯サイト、モバイルやスマフォ専用サイトへ誘導したいときもOKですね！

良かったらwebの森のfacebookページにもイイネしてくれると嬉しいです(o´Д`)ﾉﾟ.↓↓↓

https://www.facebook.com/webnomori

下記ページを参考にさせていただきました　＞＞Google Chart APIでQRコードを生成

Google Chart APIのQRコード生成パラメーター一覧

パラメーター	必要種別	解説
cht=qr	必須	Google Chart APIへQRコード生成指定。
chs=幅×高さ	必須	画像サイズをピクセル数で指定。
chl=データ	必須	エンコードするデータを指定。数字(0～9)・英数字・バイナリバイト・漢字を指定することが可能。QRコード内のデータ型を混在させることはできません。データはUTF-8でURLエンコードする必要があります。 URLを指定する場合は最大2,000文字まで。それ以上をエンコードする場合はPOSTでデータを送信する必要があります。
choe=文字コード	オプション	エンコードするデータの文字コードを指定。デフォルトはUTF-8になります。Shift_JIS、ISO-8859-1も指定可能。
chld=誤り訂正 レベル|マージン幅	オプション	誤り訂正レベルはQRコードに汚れなどがあっても正確に読み取れるように、読み取り不能や読み取り間違いを修正する割合です。誤り訂正レベルが高いほどドットの数が増えます。下記の4レベルを指定します。デフォルトはレベルLになります。 L - レベルL：コード語の約7%が復元可能 M - レベルM：コード語の約15%が復元可能 Q - レベルQ：コード語の約25%が復元可能 H - レベルH：コード語の約30%が復元可能 マージン幅は実際のQRコードと画像の末端までの余白の幅になります。ピクセル数ではないので注意しましょう。

iPhone3G

本体価格実質０円とキャンペーンに惹かれてiPhone3Gを買ってしまいました。



外出先で携帯サイトではないPCサイトにネット接続が必要になったときのために、Eモバイルの購入を考えていたんですが
たまたま持っていた携帯をなくしたのをきっかけに、iPhoneG3にしてみました。

１週間くらい使ってみての感想ですが良いところ

○携帯サイトで見る情報量より圧倒的に多い普通のPCサイトの情報量。これを携帯の環境で閲覧できる

○GPS搭載マップが使えるので、カーナビを持ってないわたしでも一応ナビの役目になってもらえる

○iTunesとの同期機能で（どれを同期するかは選べます）快適に音楽が楽しめる。
　今まで安いMP3プレーヤーを使っていましたが、使い勝手がだんぜん良いです。

○産経新聞が無料で読める

○アプリが充実していて、とても便利なものが多く感動です。無料でダウンロードできるアプリは上記の新聞もそうなんですがいろいろあって、有料のものも100円台からで安い。
　いろんなアプリをG3にインストールすることで、電子辞書、ボイスレコーダー、大辞林・・・・携帯が便利な機械に早変わりという印象です。

○YouTubeもニコ動も見れるので子どもも喜んでる

いまいち使えない（・A・）ところ

×タッチパネルのキーボードはやはり入力しにくい。まだ１週間なのでこれから慣れようとしてますが、やりにくいです。

×コピー機能がない・・・。どうしてもPCに慣れてるので、選択して右クリックでコピーしたいときが多くてそれが使えずいらついてます。

まだ使い始めたばかりなので、もっと便利な機能があるのに知らずにいたらゴメンナサイ


ところで、モモンガの森ですからちっとはweb制作に役立つ話題も書かないとですね。
ってことで使ってみた感想ですが
iPhoneはいろんなことができるアップル製の携帯という印象を持ってたんですが
これは携帯じゃなくて、ミニパソコンという印象です。

いま、web制作の現場では携帯サイトの制作が必須になりつつあるんですが
（携帯サイトをもっていないPCサイトはユーザーの何分の一かを逃している可能性が）
今後、こういったモバイル環境で普通のサイトを見ることができる人が普及してくると
ケータイサイトの需要は変わってくるんでしょうか？
Eモバイルのシェアも増えているし、プレステポータブルとDSもネットに進出してくると今後どうなるか、
iPhoneで遊びながらいろいろと考えてしまったGWでありました。


　

WordPressでの携帯サイト変換プラグイン

WordPressでの携帯サイト変換プラグインはいくつか出ていますが、
なかでも有名なKtai Styleの設置方法を動画マニュアルで紹介しました。

Ktai Styleプラグインの導入

プラグインのダウンロードと解説はこちらから
Ktai Style (携帯対応プラグイン)
使い方はとても簡単で、プラグイン設定画面にて有効にして、設定画面から文字色などを整えるだけで、あなたのWordPressブログも携帯対応にできます！

Ktai Style配布元　yuriko.net　様

今回は遠山郷観光協会様のブログを携帯対応にする例を動画にしてみました。
ヘッダ画像の入れ方はこちらで紹介しています。

（3）Ktai Styleのカスタム



（以下付録・・・というか余談というか・・・）

実は、宮崎学のツキノワグマ事件簿も試してみたんですが、
自作テーマを使っている場合は簡単にいかなかったです。
KtaiStyleのテーマを見てみるとわかるのですが、WordPressデフォルトテーマのように、基本的にheaderやfooterを読み込む形のテーマになってるんですが（sidenaviは長くなるので読み込まずにKtaiStyele独自の方法のメニューで表示されるようになっている）
独自テーマはそんな通常のテーマの作り方を思いっきり無視して、通常のホームページを作るように作成したHTMLに、WordPressのタグを埋め込んだテーマなので
自動で変換するには無理があるようで、特に個別PAGE機能を使って作ったページはまったく内容が表示されていませんでした。



そんなこんなで、、自作テーマを作るときは、基本的に通常のテーマと同じ作り方でやっておかないと後々いろんなことに対応できなくて苦労しますよ。。。という付録でした。

携帯画面のシミュレーションに便利なサイト

携帯サイトを作るのにどうやってチェックしようか・・・。
自分の持ってる携帯ではチェックできますが、なかなか携帯各社全機種を揃えるのは難しい・・・・というわけで、
携帯画面のシミレーションをしてくれるツールを探していて良いサービスを発見したので紹介します。

＞goo　モバイル　携帯サイトビューワ

ここの携帯サイトビューワはとても簡単で便利です。
使い方は簡単でURLを入れて表示ボタンを押すだけ。
ためしに
京橋タウンガイド様を表示させてみたところ、ちゃんと絵文字対応も出ていて安心しました。
（・・・と、思ったらauでは絵文字が出てないですね・・・・実際の携帯でチェックするときれいに表示できてるんですが・・・）

下記のサイトはxoopsでつくってあるので、PCサイトを管理画面から更新するだけで、自動的にケータイ対応のページも生成されます。
それなりにケータイ用のテンプレート作成などの手間は必要です。


携帯サイトではないPC用サイトを表示してみると
web標準（テーブルデザインではないサイト）で作ってあればなんとか、見栄えは悪いなりにも表示でき、サイトの中身は読めるようになっています。
下記のサイトはwebの森で、ケータイ対応になってないんですが、xhtml＋cssで作ってあるので一応読むことはできます。



ただし、携帯電話の公式サイトのトップページからの検索では、
１　公式登録サイト
２　広告
３　携帯サイト
４　広告
５　PCサイト
の順番に並ぶので（ezwebの場合ですが、他各社も似たような並び順ですよね・・）
やはり携帯対応のサイトをちゃんと作っておかないといけないな・・・とは、思います。

Googleモバイルから直接検索すると、
１　携帯サイト
２　PCサイトをGoogleモバイルが読みやすいように変換してくれたサイト
の順番に並びます。
この「Googleモバイルが読みやすいように変換してくれたサイト」での表示と、gooモバイルでの携帯サイトビューワの表示が、
まったく同じとは言えないけど、かなり近いので
チェックにも役に立ちますね。

この件、動画マニュアルでも紹介しています

＞＞gooモバイルを使った携帯シミュレーション　動画マニュアル

・・・・・・・・シミュレーション・・・・　シュミレーション・・・いまだによく迷います（＾＿＾；