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 を使って設定の管理を容易にし、最低限テーマとプロンプトを設定してみました。
モノづくりと想い
会社の研修のために東京へ出てきて早1週間。
良くも悪くも慣れてきたので、刺激を与えようかと都会のライブハウスに行ってきた。
はっきり言って遊んできたわけだが、そのきっかけは先にも書いた通り、刺激欲しさからだった。
せっかくいただいたオフをどう使うか。
もちろん、やることがないならコードでも書けばいいだろうし、実際全然悪い選択じゃない。むしろ乗り気すらする。
でも東京に来たんだしなあ、と思いながら調べていると、好きなインディーズバンドのライブ日程に思わず目が止まった。
今日じゃん。
これは行きたい。
と思うやいなや、面倒くさく感じてくる。
宿から結構な遠出になるし、大人しくコード書くのが善なところもあるからなあ。
ここまで考えて、なんだか自分腐ってんなと。
動きたがらない指に活を入れて、チケットの予約をする。
少し会社に寄ってから僕はライブハウスのある街へ向かう電車に乗った。
都会から田舎へ。
変わる景色を見ながら、どこか懐かしい感覚に襲われていた。
楽しみで、ちょっとだけ興奮して。
そして、今から僕を襲うであろう刺激に対して恐れをなす自分もいた。
もし凄い演奏を聴くことができて、それで自分は正しく事を感じられるだろうか。
会場に付き、時間と共に始まるライブ。
その日のライブは3マンライブで、僕の目当ては一番最後。
残り2つは全然知らない。
ライブや!
ってなテンションで挑んだわけでもなく、僕はフロアの後ろの方で1バンド目の演奏を聴いていた。
そして僕は今日この場所にいることに感謝した。
なんだろうこれ。
なんだろうこの感覚。
いろんな想いが頭をよぎる。
「やっぱバンドっていいな」
「バンド、やめたくなかったな」
「音楽、やめたくねえな」
「俺、どうして音楽で上京しようとか思わなかったんだろう」
「若気の至りだったとしても、どうして諦めるという選択をとったんだろう」
「今の自分は逃げの結果なのだろうか」
「やっぱバンドっていいな」
誤解のないように書いておくけど、今の自分を選んだことに、「逃げ」を感じることも、「後悔」を感じることもない。
本気で攻めてきた自信すらある。
それでもなお、そんな想いが一瞬であれよぎるのはなぜだろうか。
そんなことを考えながら、僕は一つの答えに辿り着いた。
彼女らは想いを持っている。
人間くさい、想いを持っている。
ああ、これか。
今の僕には想いが足りない。
昔、音楽に対して込めていたような想いが足りない。
なるほど。
彼女らの音楽を聴いて、表現できないくらい嬉しい気持ちになって、同時に音楽とは直接関係のないところでめちゃくちゃ悔しくなって。
そして勝手に思い浮かんできた強い決意。
想いのあるモノを作ろう。
職人みたいな凄くて、それでいて懐かしいモノを作ろう。
もちろん口で言うほど簡単なものじゃない。
もちろん口で言うほど簡単なものじゃないと悟ったように言えるもんでのない。
でもそう思えた自分はきっと幸せもので、その気付きに感謝するように日々努力を重ねるしか、僕に術はないのだろう。
その日のライブは総じて素晴らしかった。
ボコボコにされてしまったが、磨くことでもし光るなら、その光で誰かに「想い」を届けられたら。
ひよっこエンジニアはその日を願う。