HTML/CSS/JavascriptでAndroid/iOSアプリをつくる。Programming2018-10-15HTML/CSS/JavascriptでAndroid/iOSアプリをつくる。アプリこんにちは、たねやつです。CoD:BO4の発売に合わせて更新するのそっちのけでゲームしていました。目標<ons-*>タグの使い方を理解する。値を直にHTMLに指定して、一覧を作成することができるようになる。JavaScriptから一覧を作成することができるようになる。(jsでのDOMの操作、For文の理解)ページを作成する前回は、ボタンをタップするとポップアップを表示する簡単な処理を作成しましたが、今回は一覧画面を作成してみようと思います。最終的には、JavaScriptから任意の列数の一覧を生成することができるようになるところまで紹介します。ons-navigator前回も出てきましたが、navigatorです。ページの進む/戻るを管理するための要素で、一番最初のページを呼び出すためにも使用します。Cordovaではデフォルトでは、index.htmlが読み込まれてそこにいる<ons-navigator>で指定しているIDのページが表示されます。以下のように前回作成したindex.htmlの<body>内を修正してlist.htmlが読み込まれるようにしてください。page="list.html"></ons-navigator></body>便宜上、ファイル名と同じIDを指定していますがここは任意の値で構いません。した場合、あとで作成するlist.html内の<ons-page>に指定するIDはここで指定した値と同じである必要があります。ons-list次にページを作成します。index.htmlと同じ階層にlist.htmlという名前のHTMLファイルを作成します。中身は以下のような感じにします。</ons-list></ons-page><ons-list>は一覧を作成するための要素です。子要素に<ons-list-item>を追加することで、一覧の行数を増やしていくことができます。試しに各値を変更してみたり、<ons-list-item>を追加してみたりしてください。tappable>Item</ons-list-item>どうでしょうか?少し見た目が変わりましたね!ついでにアイテムをタップしたときにエフェクトが表示されるようになりましたか?modifier="chevron"を追加することで、アイテムの右側に>マークを追加します。これがあることによってユーザーにこの要素を触ると何か後続処理が実行されるという目印になります。tappable属性を追加することでタップ(onclick)したときのエフェクトが追加されます。onclickイベントは拾うことができるのですが、エフェクトが追加されることでより「触った」ことがわかりやすくなります。※公式ドキュメントではmodifier="chevron"を追加するだけでtappable属性も有効になるような書き方をされていますが、各々個別に実装してやる必要があるようです。ons-toolbarところでここまで作ってみて、ほかのスマホアプリにあるような何かが足りないと感じませんか?そうです!画面上部のタイトルや戻るボタンなどがないですね!最近はWEBページなんかでもスマホ用ページだと画面上部にくっついてくるようなあれです。('ω')次はそれを追加してみましょう。使う要素は<ons-toolbar>です。</div></ons-toolbar>この内容を、<ons-page>...</ons-page>内の<ons-list>より上においてみてください。以下のような画面になると思います。<div>のクラスleft/center/rightをそれぞれ指定することでいい感じに要素を配置してくれます。ここではcenterにタイトル、rightは特に使う予定がないので空にしています<div>内の要素が空の場合は、詰めて表示されます。leftの中には今後戻るボタンを配置する予定です。</ons-button></div>という風にするとアイコンをボタン風にすることができます。ボタンにmodifier="quiet"を指定することによってボタン背景色や影を透明化したボタンを作成することができます。そのボタンに表示する文字としてアイコンを指定しています。<ons-icon>にicon="fa-star"属性を指定すると星のアイコンが表示されます。Iconsとなります。WEBページでよくお世話になるやつらですね('ω')ほかにも指定できたはずですが、この二つを押さえておけば問題ないでしょう!icon=""の値にアイコン名を指定します。Iconsの場合はmd-をつけます。Awesomeから拾ってきたものです。Iconsを使用する場合は、md-menuとなりますね。使えるアイコンとアイコン名などは以下から参照できます。HTMLを書くのも楽しいですが、やはりjavaScriptのほうがプログラミングしている感は出ますよね!ですがまずはHTMLから修正します。list.htmlの一覧の部分にIDをつけます。<ons-list-header>一覧です。</ons-list-header></ons-list>指定しておくとJavaScriptからのアクセスがぐっと楽になります。JavaScriptから処理をするような要素には基本的にIDを振っておきましょう。IDにはほかの要素のIDと被らないようなユニークな値を指定する必要があることに注意してください。<ons-list-item>はJavaScriptで追加するようにするのでいったん全部削除してください。逆に<ons-list-header>は変わらない値なのでHTML側に記述しておいてください。いろんなところから子要素を追加してしまうとあとからメンテナンスが大変になったりしますがとりあえずはこのままで。src="js/list.js"></script>の下の行を追加します。index.jsの下に追記しておくとまとまって見やすいと思います。次にJavaScriptで処理を追加します。button.htmlを追加したときの処理が残っていると思いますので、そのまま追記します。index.jsを以下のようにします。今回はページIDによって処理が分岐していることをテストするためにも残しています。list.html用の処理の中には見たこともないような変数とメソッドが並んでいますが、これから作成します。最後にlist.jsファイルを作成します。作成するフォルダはindex.jsのあるフォルダと同じ場所にしてください。中身はちょっと長いですが以下のような感じです。作成されただけで、画面には表示されていない。id="list">の子要素に追加する必要がある。}}まずはjs_listという変数を宣言します。中身は連想配列で関数を追加していきます。次にinitというキーに関数を指定します。変数のような存在(キー)に関数を指定できるというのが最初は慣れないかもしれないですが、慣れると手っ取り早く関数を作り出せるこの感じが結構楽しいですね。init関数に引数を指定(ons-page要素)していますが、今回は特に使用しません。今後使用する可能性がある(はず)なのでとりあえず渡しておきます。ここで宣言したinitの関数は、別の処理からjs_list.init(arg)の形で呼び出すことができます。先ほどのindex.jsで記述したやつですね!それでは処理の中身の説明を進めていきます。基本的にはコメントに書いてある内容の深堀と補足です。'5行目です',]コメントのままです。JavaScriptでは最終値の後のコンマが残った状態でもエラーとならないので便利です。document.getElementById('list');コメントのままです。document.querySelector('#list')でも同じ値を取得できますが、こっちのほうが若干遅いようです。作成されただけで、画面には表示されていない。id="list">の子要素に追加する必要がある。elem_list.appendChild(elem_list_item);}典型的(?)なfor文の書き方です。CやJavaでもこのような書き方でfor文を実行します。あたりを使いこなすことができるようになればJavaScriptからHTMLをいじれるよ鵜になると思います。JavaScriptの公式Javadocみたいなもんですね。1だったり、登録日時の昇順/降順)で表示したい場合は渡す値を工夫する必要があります。おまけでforEachを使用した場合の書き方も載せています。こちらのほうがコードの記述量が少なく簡潔に書くことができます。コードの記述が終わりましたら、F5とかを押してデバッグ端末に反映させてみましょう。19:47HTML/CSS/JavascriptでAndroid/iOSアプリをつくる。動的な一覧画面の作成)Tweet関連記事2019-12-14はてなブログの埋め込みコードの配色(背景・文字色)を自由に変更するこの記事でははてなブログの埋め込みコードの背景色、およびシ...2019-03-16【Node.js】foreverコマンドの基本的な使い方まとめ(過去に書いた記事を大きく修正してまとめなおしたものです。mini3(黒豆)を制御するExpressでAPIサーバーを作成しpython-broadlinkを実行できるよ...2018-12-12HTML/CSS/JavascriptでAndroid/iOSアプリをつくる。自作キーボードについていろいろ書いています。84を2年ほど使ってみた感想・打鍵音など。2019-12-14はてなブログの埋め込みコードの配色(背景・文字色)を自由に変更する2019-12-11イルミナイト万博(2019)行ってきました。背景を元に戻すAdはてなブログをはじめよう!ibuquicalligさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。