前回作成したWebアプリを改良し、スマホ版にしました。
ポイント
- 前回と機能は同じ
- 表示がスマホ対応
Webアプリのデモ
こちらから動作確認できます。
最初の画面です。
タイトルの「ツイッター検索002」の左にある点（ドット）をクリックします。
なんと！スマホ対応の画面になります。
※以下の表示は、PCのブラウザで幅を狭くした場合の画面です。
ログインすると以下の画面です。
上右のハンバーガーメニューをクリックします。
メニューの「ツイッター」をクリックします。
「一覧」をクリックします。
下の登録ボタンをクリックします。
データを入力します。
登録後の画面です。
※「#PHP」が登録されたのが確認できます。
※50件まで登録できます。
「#PHP」の訂正ボタンをクリックします。
「#PHP」を「#PHPzzz」にします。
訂正後の画面です。
※「#PHPzzz」に訂正されているのを確認できました。
「#PHPzzz」の削除ボタンをクリックします。
削除後の画面です。
※「#PHPzzz」が削除されているのを確認できました。
データを３件追加します。
「ハンバーガーメニュー ＞ ツイッター ＞ ツイッター検索」をクリックします。
※ログイン後の初期画面と同じです。
※日付は本日の日付です。
※一覧のすぐ上に表示されている日付で検索します。
日付入力の左にあるチェックボックスをチェックし、送信ボタンをクリックします。
※データの詳細が確認できます。
※スクロールした画面ですが、メニュー部分は上に固定化されます。
※文字列の変換が確認できます。変換可能な文字列は画面にある4種類です。
※{oha}おは戦用、{y}西暦の年、{m}2桁の月、{d}2桁の日
「5件まとめ検索」ボタンをクリックします。
すると、最大5件分のブラウザが開いて検索されます。
もし、複数件開くはずなのに、1件しか開かない場合は、ポップアップがブロックされているので、解除してください。
以下を参考にしてください
※スマホ（iPhoneで確認）の場合、1件目で処理がツイッターアプリに移ってしまうので、1件しか開きませんでした。
「ハンバーガーメニュー ＞ ツイッター ＞ 一覧」をクリックします。
※検索対象ボタンを押すことで検索対象となります。
「うたらぼ #2020」の「検索対象」ボタンをクリックすると以下の画面となります。
「全件検索対象」ボタンをクリックします。
「全件、検索対象にしてよろしいですか？」とメッセージが表示されるので「OK」をクリックします。すると、以下の画面となります。
※全件、検索対象となりました。
ポイント解説など
前回と機能は同じ
プログラムの作りとしては、表示部分を別ファイルにしていました。今回は、スマホ対応分を追加し、ファイル名で、スマホ対応か、そうでないかを区別しました。
例）dsp_list.php と dsp_b_list.php
「b_」をつけることでスマホ対応としました。
プログラム上では、以下のようにしています。
include("dsp_{$g_b}list.php");
$g_b変数は、タイトルの「ツイッター検索002」の左にある点（ドット）をクリックしたタイミングで、"b_"をクッキーに保存して表示しています。期間は3日としています。
表示がスマホ対応
「b_」の意味は、「bootstrap」というものを組み込んでいるという意味です。
「bootstrap」の表示は、特殊な書き方なので、Webアプリの作り方としては、PC版 → スマホ版（bootstrap使用）という流れにしたいと思います。
まとめ
今回の作り方で、PC版からスマホ版を作るのが簡単でした。ほとんど表示部分を編集するだけでした！
今回は、こちらの本のサンプルを参考にしました。
もうちょっとデザインを変更したほうがいいかもしれませんが、ゼロからスマホ版を作るとなると、大変だったでしょうね。
またツイッターネタ考えたので、作ってみよう！
