【framework7】アイコンを使ってみた
最終的にデザインを仕上げる段階になってきて、HTMLのそのままじゃボタンが押しにくいのでデザインを入れるか何かしないとということになってきた。
そこで見つけたのがこのアイコンたち、かわいい。
Framework7 Icons
これなら書式をダウンロードしたりしなくてもそのまま使える。
Icons | Framework7 Documentation
<div class="chip" onClick="addText()"> <div class="chip-media bg-color-green"> <i class="f7-icons">add_round_fill</i> </div> <div class="chip-label">参加者追加</div> </div>
こんな感じで書くと緑のボタンが表示される。
前より押しやすくなった。
【framework7】CSSでデザインを追加
基本的なデザインはCSSファイルをいじらなくてもできるようになっているけど、やっぱり微調整をしたい、テンプレート使うよりはCSSで直した方が早い、ということもある。
framework7でCSSを使うのも簡単で、CSS配下にあるapp.cssに追記していくだけ。
-node_modules -res -www -css app.css ←これ icons.css style.css
テンプレートで使えるGridの記法はこちら。
これもマスターすれば有効に使えそう。
Grid / Layout Grid | Framework7 Documentation
【framework7】dialogのタイトルの変更方法
特に何も設定をしないと、app.dialog.alretで呼び出した時に画面に中央に「framework7」と表示される。
実機で確認してみると、なんとも主張が強い。これを任意のタイトルに変える方法です。
app.js
var app = new Framework7({ root: '#app', // App root element id: 'io.framework7.testapp', // App bundle ID name: 'Framework7', // App name theme: 'auto', // Automatic theme detection dialog: { // set default title for all dialog shortcuts title: ' ', }, // App routes routes: routes, });
dialogのところでtitleに出したい中身を設定する。
Dialog | Framework7 Documentation
この設定だとタイトル部分は空欄で表示される。エラーとインフォを混ぜて使っていたため固定値にするとややこしかったので空欄にしてみた。
【framework7】スタイルの色の変え方
デフォルトでは青い画面として設定されていますが、簡単に色を変えることができます。
Color Themes | Framework7 Documentation
ただここで指定されている9種類以外を指定する場合にはおそらく自分でCSSを触らなければいけないはず。それはまだ試していないです。
今回はbodyの色とボタンの色を青から緑に変更。
bodyはindex.htmlにあるのでそこの記述を変更。
<body class="color-theme-green">
ボタンを利用するとことろではピンポイントでボタンの色を変更。
<div class="chip-media bg-color-green">
こんな感じでやると一気にテーマの色が変えられます。
他の色にする方法はまた次のアプリで試してみます。
framework7で初心者がアプリを作ることに決めたわけ
サンプルアプリケーション
最小限のテンプレート
初心者がmonacaを使ったアプリ開発に挑戦
monacaを利用するメリット
- 環境構築が不要
- 簡易な言語
- androidとiosに1つのソースで対応
- クラウドで作業できる
monacaを利用するデメリット
- ネイティブ言語ではない
- プラグイン利用に制約がある
freeプランのまとめはこちら
monacaのfreeプランの制約で開発は難しいのか
①クラウドIDE(プロジェクト数は3個まで、ストレージは250MBまで)
②リモートビルド(3回/日まで)
③実機デバッグ(同時接続台数は1台まで)
④Cordovaプラグイン(コアプラグインのみ)
⑤プッシュ通知(1,000回/月まで)
⑥GitHub連携(publicレポジトリのみ)
九十九島を楽しむ:遊覧ツアーと牡蠣小屋
牡蠣を楽しむ
九十九島セット 1,600円九十九島かき(殻付き)1kg、牡蠣チャウダー、かき炙り笹めし2個九十九島かき(殻付き)1kg 900円
九十九島の展望台
遊覧船に乗る
【長崎移動】一日乗車券と市電とベビーカー
一日乗車券料金
のりつぎ駅とは
市電のバリアフリー状況
朝の軍艦島ツアーにおすすめのハードパン屋さん
- 長崎港ターミナルに併設してある定食屋で朝食を食べる
- コンビニでご飯
- 近くで朝からやっている店を探す
軍艦島に2歳の子連れで行こうと思ったらツアー会社は一択
運航会社毎の乗船年齢制限
- 軍艦島クルーズ株式会社
4歳未満のお子様のご乗船はできません。
- 株式会社ユニバーサルワーカーズ
未就学児(3歳以上に限る)の乗船の受け入れが可能
- 株式会社シーマン商会
未就学児のお子様は安全面の上でご遠慮頂いております。
- やまさ海運株式会社
車椅子やベビーカーの乗船は可能です。小学生未満の方は、上陸ができません。保護者の方と船内待機になります。2名以上の保護者の方がいらっしゃる場合は、途中交代にて軍艦島上陸見学ができます。その為、ベビーカーについては、上陸できません。