footmark

ひよっこエンジニアの足跡

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を使う

Onsen UIのサイトには

があり、非常に分かりやすいドキュメント/ツールになっています。

コンポーネント一覧

いわゆるドキュメントです。

マニュアル

●●がしたい!●●が作りたい!というときに役に立ちます。

例えば

  • 新しいページの表示
  • 一つ前のページに戻る

といった項目があり、非常に分かりやすいです。

テーマローラー

これ、ハンパないです。

CSSコンポーネントタブ、パターンタブの2種類があります。

CSSコンポーネントタブ

コンポーネントが視覚的に表示されます。
コンポーネントを選択すると、実際に動作する(触れる)コンポーネントとコードが表示されます。

パターンタブ

コンポーネントを用いたページ(パターン)一覧が表示されます。
各ページは実際に動作します(触れます)。
各ページ右上の Show Source を選択するとコードが表示されます。

カラースキーマが選べる、編集できる

さらに、CSSコンポーネント、パターンのカラースキーマを編集できます。
編集したカラースキーマはダウンロードして適応できます。

雛形を作ってみた

  1. カラースキーマを選択する
  2. パターンを選択する
  3. カラースキーマ、パターンをダウンロード

で以下のような雛形が作成できます。
あっという間ですね!

f:id:yuk4420:20141020172802p:plain

ここまでのまとめ

スマホサイト作りたい

下調べをした

Onsen UIを使うと簡単に雛形が作れる

次回はページ遷移等、機能を追加していこうと思います。

参考

内定者開発を振り返って

だっちの 裏開発備忘録 に便乗して。

ここ数週間、同期2人と僕の3人でWebアプリの開発をしていました。
先日、社員さんの前で発表を終えたので、この機会に振り返ってみます。

※主に反省点です。
※制作物の内容についてはほとんど触れません。

続きを読む

スパゲティクエリは悪!?

会社の研修中、同期と以下の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 を書きましたが、実は記事内の設定、重大な欠陥があります。
そうです。ディレクトリの色が超絶見辛いんです。

f:id:yuk4420:20140923063906p:plain

.zshrc で色設定をする

漢のzsh (9) 世界はモノクロからカラーへ | マイナビニュース を参考にしつつ、.zshrc に以下を追記します。
とりあえず、デフォルト→ディレクトリを緑 に変更。

export LSCOLORS=cxfxcxdxbxegedabagacad
alias ls="ls -G"

無事変わりました。
取って付けた感\(^o^)/
補完の色変えるの忘れてた\(^o^)/

f:id:yuk4420:20140923064747p:plain

先ほどの設定を以下のように書き換えます。
export LSCOLORS の行の色設定と補完の色設定で形式が違うことに戸惑いつつ、とりあえずは気にしないことにします。

autoload -U compinit
compinit

export LSCOLORS=cxfxcxdxbxegedabagacad
alias ls="ls -G"

zstyle ':completion:*' list-colors 'di=32'

確認。
あれ?変わらない。

ちょっと話は逸れるけど、本当は256色から選びたいんだよね。

そこら辺も含めて設定を書き換えたり、色設定ツールを使ってみたけど変わらず。なぜ!
(結構な時間を使ってしまった)

そういえばVimのカラースキーマも適応されないものが多かった。

iTerm2のPreferencesで色設定する

で、辿り着いた解決方法がiTerm2の色設定を変えるというもの(応急処置?)。

.itermcolors という形式のテーマファイルみたいなものがあって、ちょうどVimの設定をしているときにhybidのそれを見つけたので設定してみる。


Hybrid iTerm Colors: https://github.com/w0ng/vim-hybrid

これを保存して、
iTerm -> Preferences... -> Profiles ->Colors -> Load Presets... -> Import...
で読み込む。

おお、変わった!
黄や青などが先ほど設定した色に置き換わっています。

f:id:yuk4420:20140923071516p:plain

個人的に、背景は真っ黒の方がスッキリした印象を受けるので手直し。

iTerm -> Preferences... -> Profiles ->Colors

Basic Colors -> Background
ANSI Colors -> Normal -> Black
を黒に設定します。

ついでに
iTerm -> Preferences... -> Profiles ->Colors -> Load Presets... -> Export...
で保存しておきましょう。

じゃん!
ディレクトリの可視性が上がり、大好きなhybridの色使いになりで大満足です。

f:id:yuk4420:20140923071929p:plain

まとめ

  • zshの色設定よくワカラナイ
  • iTerm2の設定を直接弄ると楽

もはや、iTerm2 + zsh というより iTerm2 の設定でしたね。
この設定方法が王道なのか、僕の環境がおかしいだけなのかはよく分かりませんが、iTerm2を直接弄った方が楽だったので、これもアリかな〜と思います。

こうすればいいよ!っていうのがあれば教えてくださいm(_ _)m

ミニマムな.vimrc

前回の ミニマムな.zshrc - footmark に続き、.vimrc について考えた備忘録。
会社の研修で、

  • これからVimを使い始める人
  • サーバにSSHログインして、Apacheの設定ファイルを弄るくらいでしかVimを使わない人

にとりあえずこれだけ書いておけばいいよ!っていう設定があればいいなあと思い、(既出記事も多いと思いますが)書いてみました。
以下の点を意識しています。

  • 覚えるコマンドを増やさない(キーマッピングプラグインを増やさない)
  • 愛着が持てる
    • これから使い始める人は末永く使えるように
    • メインのエディタが他にある人はVimに浮気するように
続きを読む

ミニマムな.zshrc

友達に影響を受け、zshを使い始めてから早数ヶ月。
デフォルトの設定で使い続けていました。
ぼちぼち最小限の設定くらいはしようと弄った備忘録。

oh-my-zsh

調べてみるとoh-my-zshなるzshの設定を管理するフレームワークがあるらしい。
が、(プラグインをたくさん入れると)重いらしい。

prezto

するとpreztoというoh-my-zshの軽量版に当たるフレームワークを発見。
設定を追加するpluginと見た目をオシャレにするthemeに分かれているとのこと。

zshのインストール

手元のCentOSzshが入っていなかったのでインストールからやってみます。

# 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

zshのパスは /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バンド目の演奏を聴いていた。

そして僕は今日この場所にいることに感謝した。
なんだろうこれ。
なんだろうこの感覚。
いろんな想いが頭をよぎる。

「やっぱバンドっていいな」
「バンド、やめたくなかったな」
「音楽、やめたくねえな」
「俺、どうして音楽で上京しようとか思わなかったんだろう」
「若気の至りだったとしても、どうして諦めるという選択をとったんだろう」
「今の自分は逃げの結果なのだろうか」
「やっぱバンドっていいな」

誤解のないように書いておくけど、今の自分を選んだことに、「逃げ」を感じることも、「後悔」を感じることもない。
本気で攻めてきた自信すらある。
それでもなお、そんな想いが一瞬であれよぎるのはなぜだろうか。
そんなことを考えながら、僕は一つの答えに辿り着いた。

彼女らは想いを持っている。
人間くさい、想いを持っている。

ああ、これか。
今の僕には想いが足りない。
昔、音楽に対して込めていたような想いが足りない。

なるほど。
彼女らの音楽を聴いて、表現できないくらい嬉しい気持ちになって、同時に音楽とは直接関係のないところでめちゃくちゃ悔しくなって。
そして勝手に思い浮かんできた強い決意。

想いのあるモノを作ろう。
職人みたいな凄くて、それでいて懐かしいモノを作ろう。

もちろん口で言うほど簡単なものじゃない。
もちろん口で言うほど簡単なものじゃないと悟ったように言えるもんでのない。

でもそう思えた自分はきっと幸せもので、その気付きに感謝するように日々努力を重ねるしか、僕に術はないのだろう。

その日のライブは総じて素晴らしかった。
ボコボコにされてしまったが、磨くことでもし光るなら、その光で誰かに「想い」を届けられたら。
ひよっこエンジニアはその日を願う。