Google Chart APIを使ってQRコードジェネレータを作成
この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ スマートフォンを使って瞬時に情報を取得することが出来る便利さがうけて、QRコードはどんどん広まっています。QRコードのおかげで小さな電話のブラウザにコツコツと長文のURLを入力する必要もなくなり、QRスキャナーでスキャンすれば自動的に電話発信までしてくれます。 ディベロッパーとして、QRコードジェネレータの構築方法を考えたことがありますか?Google Chart APIを使えば、思ったより簡単にQRコードジェネレータを作ることが出来ますよ。それでは早速始めてみましょうか! まずその前に・・・ このチュートリアルを読めば、以下のようなQRコードジェネレータを作り上げることが出来ます。 準備段階として・・・ まずはindex.phpとgen.phpという2つのPHPファイルを作りましょう。 index.php: こちらはユーザーが作成したQRコードイメージのサイズやエンコード、エラー修正を行うフロントページです。 gen.php: こちらはGoogle Chart APIからデータを要求し、iframeを使って上記のindex.phpから呼び出されます。 index.phpファイル コードの最初の部分は、QRコードイメージを作成する為に必要な情報を集める為のHTMLフォームです。フォームのターゲット属性の値が「qrcode-frame」になっていることに注目してください。これでiframe経由で送信するようフォームに指示しています。 コードの2つ目の部分はフォームを送信する為に用いられるiframeです。ここでは、ユーザーがページをリフレッシュせずとも継続してQRコードを作れるようにする為にiframeを使用しています。 それではブラウザでindex.phpを開いてみてください。以下のような感じになっているかと思います。 このシンプルなCSSスタイルのままでは面白くないので、少しスタイルも加えていきましょう。このチュートリアルではPHPの方に焦点を置きたいので、CSSスタイルの詳しい説明は省略しますね。 ではもう一度index.phpを開いてみましょうか。今度はこんな感じになっているかと思います。 gen.phpファイル 下記のコードをgen.phpファイルにコピペしてください。 ページにポストされたデータがある場合に限り、リクエストを実行してください。 $_REQUESTを使ってデータをキャプチャし、別の変数に格納してください。 Google Chart APIでURLを構築し、上記でキャプチャしたデータをURLに追加してください。 Google Chart APIが作成したデータと同じ内容を含むimgタグを出力してください。 早速オリジナルQRコードを生成してみましょう! これでもう完成です!自作のQRコードジェネレータはうまく動いてくれるはずですよ。ブラウザからindex.phpをナビゲートして、必要情報を入力し、「Generate」ボタンを押してみてください。 即座にQRコードが作成されるのを確認出来るかと思いますよ。