Onsen UIでスマホサイトを作る その2
今回は Onsen UI テーマローラーページ をベースに各ページを作成し、スライドメニューコンポーネントを使ったリンクを貼ってみます。
作成するページ
作成するのは音楽活動のサイトなので、必要なページは
- トップ
- お知らせ
- ライブ日程
- バイオグラフィ
- ディスコグラフィ
- ダウンロード
- お問い合わせ
といった感じでしょうか。
実際にバイオグラフィページを作成してリンクを貼ってみましょう。
スライドメニューからリンクを貼る
まずはスライドメニューに項目を追加し、リンクを貼ります。
Sliding Menuパターンのソースを表示する
先週の復習になりますが、Onsen UI テーマローラーページ を開き、Patternsタブを選択します。
次にSliding MenuパターンのShow Sourceを選択し、ソースを表示します。
ページを分ける
表示したソースはスライドメニューを表示するページ（メインページ）とスライドメニューページが同一ファイルに書かれています。
もちろん、このままの形式で進めていっても良いのですが、このままでは最終的にファイルがものすごく長くなってしまうので、ページごとに分けます。
複数ページを同一ファイルに書く記述である、<ons-template> タグ以下で分けます。
（ <ons-template> タグは含まない）
ページ遷移の処理に書き換える
表示したソースではメニュー項目をクリックした時の処理が、ng-click="menu.close()" になっています。
これではメニューを閉じるだけでページ遷移が行われないので、ng-click="menu.setAbovePage('[遷移先ファイル名]', {closeMenu: true})" もしくは、onclick="menu.setAbovePage('biography.html', {closeMenu: true})" に書き換えます。
アイコンを選ぶ
Onsen UIの公式ページにもある通り、Font Awesome と Ionicons のアイコンを使うことができます。
Onsen UIは、Font Awesomeの400以上のアイコン、そしてIoniconsの500以上のアイコンを使うことができます。
アイコンを使うには <ons-icon icon="[任意のアイコン名]"> に書き換えます。
コード例
上記、
- ページを分ける
- ページ遷移の処理に書き換える
- アイコンを選ぶ
の処理を行ったコードが次です。
index.html（メインページ）
<!doctype html> <html> <head> <link rel="stylesheet" href="bower_components/onsenui/build/css/onsenui.css"> <link rel="stylesheet" href="styles/onsen-css-components.min.css"> <link rel="stylesheet" href="styles/sliding_menu.css"> <script src="bower_components/onsenui/build/js/angular/angular.js"></script> <script src="bower_components/onsenui/build/js/onsenui.js"></script> <script> ons.bootstrap(); </script> </head> <body> <ons-sliding-menu main-page="top.html" menu-page="menu.html" max-slide-distance="260px" type="push" var="menu"> </ons-sliding-menu> </body> </html>
menu.html（メニューページ）
<!doctype html> <ons-page modifier="menu-page"> <ons-toolbar modifier="transparent"> <div class="right"> <ons-toolbar-button class="menu-close" ng-click="menu.close()"> </ons-icon>Close </ons-toolbar-button> </div> </ons-toolbar> <ons-list class="menu-list"> <ons-list-item class="menu-item" onclick="menu.setAbovePage('top.html', {closeMenu: true})"> <ons-icon icon="ion-home"></ons-icon> Top </ons-list-item> <br /> <ons-list-item class="menu-item" onclick="menu.setAbovePage('information.html', {closeMenu: true})"> <ons-icon icon="ion-information"></ons-icon> Infomation </ons-list-item> <ons-list-item class="menu-item" onclick="menu.setAbovePage('live.html', {closeMenu: true})"> <ons-icon icon="ion-mic-c"></ons-icon> Live </ons-list-item> <ons-list-item class="menu-item" onclick="menu.setAbovePage('biography.html', {closeMenu: true})"> <ons-icon icon="ion-person"></ons-icon> Biography </ons-list-item> <ons-list-item class="menu-item" onclick="menu.setAbovePage('discography.html', {closeMenu: true})"> <ons-icon icon="ion-music-note"></ons-icon> Discography </ons-list-item> <ons-list-item class="menu-item" onclick="menu.setAbovePage('download.html', {closeMenu: true})"> <ons-icon icon="ion-cloud"></ons-icon> Download </ons-list-item> <ons-list-item class="menu-item" onclick="menu.setAbovePage('contact.html', {closeMenu: true})"> <ons-icon icon="ion-paper-airplane"></ons-icon> Contact </ons-list-item> </ons-list> </ons-page>
スクリーンショット
バイオグラフィページを作る
スライドメニューを作ったので、リンク先となるバイオグラフィページを作ります。
バイオグラフィページに使うパターンを選ぶ
再度、Onsen UI テーマローラーページ を開き、Patternsタブを選択します。
この中からバイオグラフィページに使えそうなパターンがあれば、それがそのままテンプレートとして使えるわけです。
名前からしてまんまですが、Profileパターンが使えそうですね。
早速Show Sourceを選択してソースを表示します。
コードをコピーし編集する
メニューページと同じように biography.html というファイルを作って <ons-template> タグ以下を貼り付けます。
ただし、この方法だと index.html からではなく biography.html に直接アクセスした際、Onsen UI等々が読み込まれないので、index.html は検索エンジンのクロールを許可しないよう設定したり、 <head> タグ周りもきちんと記述したりといった工夫が必要かと思います。
コード例
biography.html（プロフィールページ）
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles/profile.css"> </head> <body> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button ng-click="ons.slidingMenu.toggle()"> <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center">Biography</div> </ons-toolbar> <div class="profile-card"> <img src="img/yuk.jpg" class="profile-image"> <div class="profile-name">ユキミネ</div> <div class="profile-desc">Vocal, Guitar, Bass, Cajon, Programming</div> </div> <ons-list modifier="inset" style="margin-top: 10px"> <ons-list-item> Twitter </ons-list-item> <ons-list-item> Instagram </ons-list-item> </ons-list> <br> </ons-page> </body> </html>
スクリーンショット
まとめ
といった感じでOnsen UIを使うとスマホスマホしたサイトが簡単に作成できます。
「Onsen UIでこんなことした！」というのがあればまた紹介したいと思います。
P.S.
いわゆるテンプレートサイトって今どんなのになってるんですかね。
サイトを簡単に作れるサービスなんかがあってテンプレート配布サイトとかはもうないとか？
Onsen UIでスマホサイトを作る その1
先週末、左足をガラスで切ったり、右足を深爪にしたり、さらに偏頭痛がきたりと今月の不幸を使い切った感のあるユキミネです。
唐突ですが、スマホサイトを作ってみようと思います。
経緯
冬にソロで音楽活動をやりたいのでそのサイトを作ろう！
↓
PCサイトならバンドで作ったやつ使い回せばいいけど、今時みんなスマホで見るよなあ
↓
スマホサイトの勉強すっか！
下調べ
今時の（ミュージシャンの）スマホサイトってどんなの？ってことで下調べ。
（2014年10月20日現在）
| アーティスト名 | カラム数 | スライドメニュー | タブバー | 遅延読み込み | 備考 |
|---|---|---|---|---|---|
| チャットモンチー | 1 | なし | なし | あり | |
| ASIAN KUNG-FU GENERATION | 1 | なし | あり | なし | |
| ポルノグラフィティ | 1 | なし | なし | なし | バナー多め |
| RADWIMPS | 1 | なし | なし | なし | 最小構成（？） |
| ONE OK ROCK | 1 | あり | なし | なし |
各アーティストリンク
所感
もっと流行りみたいなのがあるのかと思いましたが、結構バラバラですね。（サンプル数が少ないのもあるかもしれませんが。）
カラム数は5サイトとも1つでした。
画面サイズもあるし、1が適当なのでしょう。
スマホらしいコンポーネントを使ったメニューはスライドメニューとタブバーがありました。
使い分けるとすれば、素早くアクセスしたい・頻繁にアクセスするページはタブバーから、それ以外はスライドメニューからといった感じでしょうか。
是非、これらのコンポーネントは取り入れたいですね。
チャットモンチーの遅延読み込みはおもしろいなあと思いました。
Onsen UI
じゃあどうやって作ろうかという話ですが、先月の内定者開発でも使ったOnsen UIが良さそうです！
Onsen UIはシンプルなHTML5モバイルアプリ開発用のライブラリで、フロント力皆無の僕でも分かりやすいです。
今回はWebサイトで使いますが、ハイブリッドアプリの開発なんかもできます。
そのうちやってみたいですね。
インストール方法はいくつかありますが、Webサイトで使うなら、Bowerで入れるか、Onsen UIのサイトからダウンロードしてくるのが簡単だと思います。
僕はBowerで入れました。
ここら辺の手順はOnsen UIのサイトにも書いてあります。
Onsen UIを使う
Onsen UIのサイトには
- コンポーネント一覧
- マニュアル
- テーマローラー
があり、非常に分かりやすいドキュメント／ツールになっています。
コンポーネント一覧
いわゆるドキュメントです。
マニュアル
●●がしたい！●●が作りたい！というときに役に立ちます。
例えば
- 新しいページの表示
- 一つ前のページに戻る
といった項目があり、非常に分かりやすいです。
テーマローラー
これ、ハンパないです。
CSSコンポーネントタブ
各コンポーネントが視覚的に表示されます。
各コンポーネントを選択すると、実際に動作する（触れる）コンポーネントとコードが表示されます。
パターンタブ
コンポーネントを用いたページ（パターン）一覧が表示されます。
各ページは実際に動作します（触れます）。
各ページ右上の Show Source を選択するとコードが表示されます。
カラースキーマが選べる、編集できる
さらに、CSSコンポーネント、パターンのカラースキーマを編集できます。
編集したカラースキーマはダウンロードして適応できます。
雛形を作ってみた
で以下のような雛形が作成できます。
あっという間ですね！
ここまでのまとめ
スマホサイト作りたい
下調べをした
Onsen UIを使うと簡単に雛形が作れる
次回はページ遷移等、機能を追加していこうと思います。
参考
スパゲティクエリは悪！？
会社の研修中、同期と以下のSQLクエリについて議論になりました。
【Code 1】一番数量の多い注文をした受注先を求めるクエリ
SELECT customer.name, s.item_sum FROM (SELECT order_no, SUM(quontity) AS item_sum FROM order_detail GROUP BY order_no) s JOIN orders ON orders.no = s.order_no JOIN customer ON customer.no = orders.customer_no WHERE item_sum IN (SELECT MAX(item_sum) FROM (SELECT order_no, SUM(quontity) AS item_sum FROM order_detail GROUP BY order_no) s);続きを読む
【iTerm2 + zsh】色設定をする
先日、ミニマムな.zshrc - footmark を書きましたが、実は記事内の設定、重大な欠陥があります。
そうです。ディレクトリの色が超絶見辛いんです。
.zshrc で色設定をする
漢のzsh (9) 世界はモノクロからカラーへ | マイナビニュース を参考にしつつ、.zshrc に以下を追記します。
とりあえず、デフォルト→ディレクトリを緑 に変更。
export LSCOLORS=cxfxcxdxbxegedabagacad alias ls="ls -G"
無事変わりました。
取って付けた感＼(^o^)／
補完の色変えるの忘れてた＼(^o^)／
先ほどの設定を以下のように書き換えます。
export LSCOLORS の行の色設定と補完の色設定で形式が違うことに戸惑いつつ、とりあえずは気にしないことにします。
autoload -U compinit compinit export LSCOLORS=cxfxcxdxbxegedabagacad alias ls="ls -G" zstyle ':completion:*' list-colors 'di=32'
確認。
あれ？変わらない。
ちょっと話は逸れるけど、本当は256色から選びたいんだよね。
そこら辺も含めて設定を書き換えたり、色設定ツールを使ってみたけど変わらず。なぜ！
（結構な時間を使ってしまった）
iTerm2のPreferencesで色設定する
で、辿り着いた解決方法がiTerm2の色設定を変えるというもの（応急処置？）。
.itermcolors という形式のテーマファイルみたいなものがあって、ちょうどVimの設定をしているときにhybidのそれを見つけたので設定してみる。
Hybrid iTerm Colors: https://github.com/w0ng/vim-hybrid
これを保存して、
iTerm -> Preferences... -> Profiles ->Colors -> Load Presets... -> Import...
で読み込む。
おお、変わった！
黄や青などが先ほど設定した色に置き換わっています。
個人的に、背景は真っ黒の方がスッキリした印象を受けるので手直し。
iTerm -> Preferences... -> Profiles ->Colors
の
Basic Colors -> Background
ANSI Colors -> Normal -> Black
を黒に設定します。
ついでに
iTerm -> Preferences... -> Profiles ->Colors -> Load Presets... -> Export...
で保存しておきましょう。
じゃん！
ディレクトリの可視性が上がり、大好きなhybridの色使いになりで大満足です。
ミニマムな.zshrc
友達に影響を受け、zshを使い始めてから早数ヶ月。
デフォルトの設定で使い続けていました。
ぼちぼち最小限の設定くらいはしようと弄った備忘録。
zshのインストール
手元のCentOSにzshが入っていなかったのでインストールからやってみます。
# yum -y install zsh
確認。
$ zsh --version zsh 4.3.10 (x86_64-redhat-linux-gnu)
入ってますね！
現在のシェルを確認してみましょう。
$ echo $SHELL /bin/bash
bashですね。
確認も兼ねてシェルのパス一覧を表示してみます。
$ cat /etc/shells /bin/sh /bin/bash /sbin/nologin /bin/dash /bin/tcsh /bin/csh /bin/zsh
chsh コマンドでデフォルトのシェルを変更します。
$ chsh user のシェルを変更します。 パスワード: 新しいシェル [/bin/bash]: /bin/zsh シェルを変更しました。
ターミナルを再起動して反映させます。
これでzshが使えるようになりました！
preztoのインストール
oh-my-zshを使っていて重いと感じている方、preztoはいかが？ - Qiita に則って進めていきます。
まずは公式に載っているコマンドを実行。
$ git clone --recursive https://github.com/sorin-ionescu/prezto.git "${ZDOTDIR:-$HOME}/.zprezto"次に初期設定のファイルを設置します。
setopt EXTENDED_GLOB
for rcfile in "${ZDOTDIR:-$HOME}"/.zprezto/runcoms/^README.md(.N); do
ln -s "$rcfile" "${ZDOTDIR:-$HOME}/.${rcfile:t}"
done反映。
source ~/.zshrc
変わらなくてワロタ。
zshのアップデート
よく見たらログイン時に以下のメッセージが。
prezto: old shell detected, minimum required: 4.3.11
どうやらyumで入れたzshのバージョンが腐ってたようです。。。
ソースからコンパイルして最新版にしましょう。。。
まずソースを取ってきます。
# wget http://sourceforge.net/projects/zsh/files/zsh/5.0.6/zsh-5.0.6.tar.gz/download
解凍して。。。
# tar zxvf zsh-5.0.6.tar.gz
# cd zsh-5.0.6 # ./configure --enable-multibyte
ライブラリが足りたいとか言われたので入れます。。。
# yum install ncurses-devel
気を取り直してコンパイルからのインストール。
# make # sudo make install
無事アップデートできました！
$ zsh --version $ zsh 5.0.6 (x86_64-unknown-linux-gnu)
泣く泣くコメントアウト
が、なぜか先のエラーメッセージが消えないので ~/.zprezto/init.zsh の該当部をコメントアウトすることに。
$ vi .zprezto/init.zsh # Check for the minimum supported version. # min_zsh_version='4.3.11' # if ! autoload -Uz is-at-least || ! is-at-least "$min_zsh_version"; then # print "prezto: old shell detected, minimum required: $min_zsh_version" >&2 # return 1 # fi # unset min_zsh_version
保存して反映ッ！！
source ~/.zshrc
めっちゃ変わってワロタ。
テーマの設定
皆さんはVimの設定を変更するとき、何から弄りますか？
はい！テーマですよね！
zshもテーマから弄りましょう！
以下のコマンドでテーマのプレビューができます。
$ prompt -p
僕は redhat が好みです！
設定しましょう！
vi .zpreztorc （88行目付近） zstyle ':prezto:module:prompt' theme 'redhat'
できました！
プロンプトの変更
続いてプロンプトの表示を変えてみます。
vi .vimrc
（以下を追記）
PROMPT="%F{cyan}[%n@%m %d]%f
(๑˃̵ᴗ˂̵)و> "
まとめ
ざっとこんな感じでしょうか。
軽量なフレームワーク zprezto を使って設定の管理を容易にし、最低限テーマとプロンプトを設定してみました。
