（続）ツイッター検索（汎用）
コンテンツIT・テクノロジー
前回作成したWebアプリを改良し、スマホ版にしました。
前回のブログは、こちらです。
Webアプリの動作
最初の画面です。
タイトルの「ツイッター検索002」の左にある点（ドット）をクリックします。
なんと！スマホ対応の画面になります。
※以下の表示は、PCのブラウザで幅を狭くした場合の画面です。
ログインすると以下の画面です。
上右のハンバーガーメニューをクリックします。
メニューの「ツイッター」をクリックします。
「一覧」をクリックします。
下の登録ボタンをクリックします。
データを入力します。
登録後の画面です。
※「#PHP」が登録されたのが確認できます。
※50件まで登録できます。
「#PHP」の訂正ボタンをクリックします。
「#PHP」を「#PHPzzz」にします。
訂正後の画面です。
※「#PHPzzz」に訂正されているのを確認できました。
「#PHPzzz」の削除ボタンをクリックします。
削除後の画面です。
※「#PHPzzz」が削除されているのを確認できました。
データを３件追加します。
「ハンバーガーメニュー ＞ ツイッター ＞ ツイッター検索」をクリックします。
.png)
※ログイン後の初期画面と同じです。
※日付は本日の日付です。
※一覧のすぐ上に表示されている日付で検索します。
日付入力の左にあるチェックボックスをチェックし、送信ボタンをクリックします。
※データの詳細が確認できます。
※スクロールした画面ですが、メニュー部分は上に固定化されます。
※文字列の変換が確認できます。変換可能な文字列は画面にある4種類です。
※{oha}おは戦用、{y}西暦の年、{m}2桁の月、{d}2桁の日
「5件まとめ検索」ボタンをクリックします。
すると、最大5件分のブラウザが開いて検索されます。
もし、複数件開くはずなのに、1件しか開かない場合は、ポップアップがブロックされているので、解除してください。
以下を参考にしてください
※スマホ（iPhoneで確認）の場合、1件目で処理がツイッターアプリに移ってしまうので、1件しか開きませんでした。
「ハンバーガーメニュー ＞ ツイッター ＞ 一覧」をクリックします。
※検索対象ボタンを押すことで検索対象となります。
「うたらぼ #2020」の「検索対象」ボタンをクリックすると以下の画面となります。
「全件検索対象」ボタンをクリックします。
「全件、検索対象にしてよろしいですか？」とメッセージが表示されるので「OK」をクリックします。すると、以下の画面となります。
※全件、検索対象となりました。
まとめ
今回の作り方で、PC版からスマホ版を作るのが簡単でした。ほとんど表示部分を編集するだけでした！
画面部分とロジック部分を分離していなかったら、かなり面倒になっていたかもしれません。
bootstrapというライブラリを使わなければ、これも大変だと思います。
でも、いろいろ決まりがあるので、勉強していこうと思います。
では、また！
