title-2
Design

Bootstrapを使ってWebサイトを作ろう その4

こんにちは!寒がり新人森田です。
週末の東京は大雪でしたね。珍しく早起きしてちょっとだけ写真撮ってきました。結構降ってたから一眼持ち出す元気が出なかったけど、携帯カメラと編集アプリが便利すぎてこれで十分に思えちゃいます。

140210b

久しぶりの雪で電車が止まったり不便もあった反面、見慣れない白い街並みにテンション上がったりもしました。元気チャージしたところでBootstrapでサイトを作ろうラストスパートいってみましょう!

webサイトを作る 続き

前回は動作確認をしてみたらnavbarの表示がおかしいことに気づいたところまででした。テンプレートのようにjumbotronの上に乗せて表示させたいというのもあるので、その辺をまとめて調整していきます。

細部を作る 5

何点か修正したい部分がある場合も、一度変更点を整理してサイトを作る時と同じように大枠>細部の流れで作業していくと楽な気がします。

まずがっつりと jumbotronの上にnavbarを乗せてしまいます。
今navbarを囲んでいるのは“container”ですが、これは他の箇所でも使っている共用classの為なるべく手を加えたくないです。なので、“container”を新たに”navbar-wrapper”で囲います。

“navbar-wrapper”に“position: absolute;”指定します。こうすることで位置が固定され、floatみたいに要素が浮いたような状態になります。その下にjumbotronが回り込む形になって、navbarが画像の上に重なって表示されます。タイトルにも被ってますがそれは今は気にしない。

140208-1

ちなみに“position: absolute;”の位置固定の仕組みは、“position: static;”ではない親要素を基準とした絶対的な位置に固定されるようになっています。今回の場合は特に指定していないので、body=画面左上に固定されています。上に隙間があるのは”margin-top”を指定してあるからです。スマホ表示では上にぴったりくっつけたいので“margin-top: 0;”も書き込んでおきます。

細部を作る 6

次はnavbarの細かい箇所を修正します。

“active”だけ飛び出ていた表示を中に収まるようにします(この辺りは好みかもしれません)。“navbar”の中をもう一度”container”で囲い込みます。今まで“navbar”の上の“container”が最大幅だったのが、これで“navbar”内に収納されました。

ただ、“container”で2回囲うと元々“container”がもつpaddingが二重で効いてしまいます。上と左右に隙間なく置きたい時は“.navbar-wrapper > .container”という指定方法でpaddingを無しにしておきます。

140208-2

この作業、何をやってるか若干分かりづらいというか森田自身がちょっとこんがらがってます。
もう少し分かりやすく説明すると、

140208-3b

navbarの構造はこんな風になってます。
外側の“container”のpaddingは画面の端からの幅にあたるので無くしたいです。
内側の“container”は“navbar”の内側の要素に必要な隙間を与えてくれています。

じゃあそもそも外側の“container”必要ないんじゃないかと思うかもしれませんが、Media Queriesで画面幅に応じた見え方が整えられている為、決していらない子ではないんです。これがあるおかげで他の“container”に囲まれた要素と揃って見えます。

140210-4

あとは“navbar”のmargin-bottomやjumbotronの値を調整します。

前回までと違って今回はスマホベースで作業してきました。これにはちょっとした意味があります。Media queriesを使う時は普通に書いたcssがスマホビューと対応しているんです。“@media (min-width:  768px) {”と書き込むと、768px以上の幅で見た時の表示が変わります。

ここで書くと簡単な設定という感じがしますが、コーディングしてると訳が分からなくなってきたりします。だから今の森田はPCベースで作ってきたものを最後はスマホベースで仕上げて、レスポンシブで表示を変える部分のcssを“@media {”にコピペして混乱回避してます。

細部を作る 7

PCサイズで動作確認。

一通り作り終えたら、PCサイズでもちゃんと表示できてるか確認してみます。といっても実際は作りながら幅を伸ばしたり縮めたりしてるから多分出来てる。はず。

140210-5

特に問題なさそうですね。いい感じです。

細部を作る 8

おまけでコンテンツの詳細を作る。

そういえばコンテンツの見出しは作ったけど詳細部分を作っていませんでした。ここまできたら作っちゃいましょう。グリッドシステムを使った簡単なレイアウトなので1だけにしておいて2、3は以下略とします。

テンプレートと同じ500×500pxの画像を用意してグリッドを7と5で分けます。画像が大きめで、画面幅を狭めると文章の改行がすごいことになりかねないので、グリッド解除のタイミングを見出し部分より早く設定しておきます(“col-md-7”)。

画像に関しては“img-responsive”というclassを使うと、画面幅に応じたサイズに自動的に縮小してくれます。

140210-6

完成

indexページが完成しました!完全に飲食店ですね。

PCサイズ

メリハリがついていて見やすいです。

140210-7

 スマホサイズ

長いです。びよーん。

140210-8b

これに各コンテンツの肉付けをしていけばちゃんとwebサイトになってくれそうです。

まとめ

Bootstrapを使ってwebサイトの1ページが出来上がりました。最近流行りの1ページサイトとするならwebサイトって言えるんじゃないでしょうか(強引)。

作ってみての感想は、やっぱり土台があると作業が楽!です。
最初はどんなclassがあってどういう設定かが分からず、自分でやっていった方が早いんじゃないかって思ってましたが間違いでした。Bootstrapの公式で調べながら作っていくうちに便利なclassの存在を知ると、要素を置いてclass指定するだけで希望する表示が出来ちゃう。すごい。

オリジナルの設定をしたい時も、自分で書いたcssでclass設定を上書き出来る点も素敵です。

ここまで連載にお付き合いいただきありがとうございました!
けどBootstrapの便利機能はまだまだありそうだし、Javascript総スルーだったし、まだまだやりたいことだらけなので連載はもうちょっと続きそうです。
短期集中連載はひとまずここで区切りということで今回はこのへんで!押忍!

標準
loading
Development

TitaniumでiOSのNavBarにローディング中を示す表示をしてみる 後編

前回はWindowのタイトルエリアに複数のLabelを追加して中央位置に方法をご紹介しました。今回はこれを応用してグルグルと回りいかにもローディング中ですよ!という感じの見た目にしてみたいと思います。

ImageViewでGIFアニメは動かない

Webの技術を応用してネイティブアプリ開発が出来るTitaniumですがImageViewにGIFアニメを表示させてみても動かないのです。

ではどうするか。ImageViewには画像のパスやバイナリを入れる image というプロパティの他に images というものも用意されてます。

Array of images to animate, defined using local filesystem paths, File objects, remote URLs (Android only), or Blob objects containing image data.Blob and File objects are not supported on Mobile Web.

ドキュメントでは上記のように説明されていて、画像パスの文字列か、画像のバイナリデータか、Fileオブジェクトのインスタンス、いずれかのデータを配列に格納したパラメータを設定できます。
この配列にアニメのコマごとの画像を渡すことでアニメーションを実現できる仕組みです。若干めんどくさいですね。

ローディング画像を用意する

ではローディング画像を用意しましょう。Ajaxload – Ajax loading gif generator というサイトで手軽にいわゆる”ぐるぐる”が生成できるのでこれを利用します。

スクリーンショット 2014-02-10 11.24.51

 

ダウンロードしたGIFをphotoshopで開くとコマごとにレイヤーに分割されて読み込まれました。全部で12個のレイヤーがあります。

スクリーンショット 2014-02-10 11.26.28

 

ちょっとめんどくさいんですが、レイヤーごとにWeb用に保存でpngに書き出しました。もしかしたら全レイヤーを別々に書きだす方法もあるかもしれませんが見つけられませんでした。

スクリーンショット 2014-02-10 11.28.42

 

ちなみにフォルダに入れてファイル名にコマの番号を振っておくと扱いやすいかと思います。

素材ができたのでImageViewに設定してみます。ControllerでImageViewを生成してimagesに複数画像を設定します。材画像は66×66サイズだったのでRetinaを考慮して33×33にしておきます。

var spinner = Ti.UI.createImageView({
 images: [
 '/images/spinner/1.png',
 '/images/spinner/2.png',
 '/images/spinner/3.png',
 '/images/spinner/4.png',
 '/images/spinner/5.png',
 '/images/spinner/6.png',
 '/images/spinner/7.png',
 '/images/spinner/8.png',
 '/images/spinner/9.png',
 '/images/spinner/10.png',
 '/images/spinner/11.png',
 '/images/spinner/12.png'
 ],
 width: 33,
 height: 33
 });

前回で紹介した通りコンテナとなるViewを生成して格納しておきます。

var titleContainer = Ti.UI.createView({
 width: Ti.UI.SIZE,
 height: Ti.UI.SIZE,
 layout: 'horizontal'
 });
titleContainer.add(spinner);
 $.mainWindow.titleControl = titleContainer;

ここでビルドしてみるとわかるのですが、画像は表示されません。

スクリーンショット 2014-02-10 11.40.46

 

これは画像は複数セットされているがアニメーションがスタートしていないためです。なので以下のようにstartメソッドを実行するようにしてビルドすれば画像が表示されます。

spinner.start();

スクリーンショット 2014-02-10 11.43.27

 

画像とNavBarの背景色があっていないのでちょっと変ですが、大目に見てください。style設定でNavigationWindowのbackgroundColorを#fffにすれば馴染むと思います。

Labelも一緒に入れてみる

これだけだとちょっと物足りないのでNow Loading…というLabelも並べてみます。

var title = Ti.UI.createLabel({
 text: 'Now Loading...'
 });
titleContainer.add(title);

するとこうなります。

スクリーンショット 2014-02-10 11.47.38

 

画像と文字がくっついてしまっていて見栄えが悪いので、Labelのleftプロパティに10を設定して再ビルドしてみると以下のようになりました。

スクリーンショット 2014-02-10 11.49.00

 

いい感じです。

まとめ

Titanium Mobileでの開発にはiOS SDKを直接あつかう本来の開発に比べると不自由な部分があるのは否めません。しかし今回ぐらいのカスタマイズが出来るのであれば割りと一般的なUIの構築には困らないのではないかと思います。まだまだ応用の効くAPIもあるかもしてないのでこれからも発見次第お伝えしていきたいと思います。

標準
loading
Development

TitaniumでiOSのNavBarにローディング中を示す表示をしてみる 前編

今回はTitaniumでiOS開発をしていて見つけたテクニックを紹介します。慣れている人なら当たり前のことかもしれませんが僕は自分でこのテクニックを見つけてTitaniumのコツを掴んだような気がしました。

NavBarとは

Windowの上部に表示されるエリアでiOSではウィンドウのタイトルや、画面遷移するボタンを左右に表示させるためのものです。

これは Ti.UI.NavigationWindow や TabGroup を親に持つWindowで表示されます。なので親の存在しないWindowオブジェクトに対していくらtitle要素やbarColorを設定しても全く表示されないので注意が必要です。

<Alloy>
  <NavigationWindow platform=”ios”>
<Window title=”test”>
</Window>
</NavigationWindow>
</Alloy>

=>この場合はNavBarが表示されてタイトルにtestが入る

スクリーンショット 2014-02-08 15.52.26

<Alloy>
<Window title=”test”>
</Window>
</Alloy>

=> NavBarエリアは表示されない

スクリーンショット 2014-02-08 15.53.23

 

NavBarのタイトルエリアのAPI

タイトルエリアには通常、Windowのtitleプロパティにセットされた文字列が表示されます。これを独自のUIを変えるためにはWindowのtitleControlというプロパティを利用します。

Titanium 3.Xドキュメントには以下のように書いてあります。(2014年2月8日現在)

titleControl : Titanium.UI.View
View to show in the title area of the nav bar.

つまりWindow.titleControlには Ti.UI.View そのものか Ti.UI.View を継承しているオブジェクトがセットできるということです。

ただしこれは1つまでという制限があります。例えばLabelはTi.UI.Viewを継承しているオブジェクトなのでtitleControlにセットできますが、2つ連続でセットしても後勝ちになってしまい、この方法では複数のLabelは表示できません。

views/index.xml

<Alloy>
<NavigationWindow id=”navigationWindow”>
<Window id=”mainWIndow”>
</WIndow>
</NavigationWindow>
</Alloy>

controllers/index.js

$.navigationWindow.open();
$.mainWindow.titleControl = Ti.UI.createLabel({ text: ‘hoge’ });
$.mainWindow.titleControl = Ti.UI.createLabel({ text: ‘fuga’ });

=> これではタイトルエリアに fuga が表示される(厳密にはhogeが一瞬表示された後にfugaに置き換わる挙動をする)

スクリーンショット 2014-02-08 16.09.06

 

Ti.UI.Viewでラップすれば複数表示できる

そうなんです。Viewオブジェクトは子供を持てる仕様なのです。ですから複数の要素を表示させたい場合はプレーンなViewをコンテナーとして扱い子供に複数のオブジェクトを配置すればいいんですね。

var titleContainer = Ti.UI.createView();
titleContainer.add(Ti.UI.createLabel({ text: ‘hoge’ }));
titleContainer.add(Ti.UI.createLabel({ text: ‘fuga’ }));
$.mainWindow.titleControl = titleContainer;

=> titleControlには1つのViewしかセットしていないので複数のLabelが表示される

スクリーンショット 2014-02-08 16.14.42

 

あ、でも重なってしまった…という場合は

layoutオプションで子供たちを重ならないように配置させる

こんな時のためにlayoutオプションという便利なものがTianiumには用意されているんですね。

使いかたは並ばせたい複数の要素を内包している親要素に対して指定します。今回は横に重ならないように並ばせたいので layout: ‘horizontal’ を使いました。

var titleContainer = Ti.UI.createView({ layout: ‘horizontal’ });

=> 子どもたちは重ならずに整列

スクリーンショット 2014-02-08 16.21.21

 

あれ…でも今度は変な位置になってしまいましたね。

Ti.UI.SIZEで中身の要素のサイズに合わせる

なぜ左上にLabelが移動してしまったのか、それはコンテナビューのエリアが割りと広めに確保されているかなんですね。
背景色をつけてみるとわかりやすいです。

スクリーンショット 2014-02-08 16.24.19

 

この状態で「横に並んで!」と言ったら左上に来てしまうのも無理は無いかと。

またこんな時のためにTitaniumには便利なAPIが用意してあって、コンテナ要素のwidthとheightにTi.UI.SIZEというものをセットしておくと、子供の要素の大きさに合わせて自身のサイズを設定してくれるんですね。

var titleContainer = Ti.UI.createView({
layout: ‘horizontal’,
width: Ti.UI.SIZE,
height: Ti.UI.SIZE
});

=> 子供のサイズが親に反映される

スクリーンショット 2014-02-08 16.28.22

 

いい感じです。

次回につづく

なんか一つ一つ順を追って紹介していたら長くなってしまったのでこの続きは後編にしたいと思います。

次は今回の配置テクニックを活かしてローディング感のある見た目にしてみたいと思います。

標準
title-2
Design

Bootstrapを使ってWebサイトを作ろう その3

こんにちは!やっぱりまだまだ新人森田です。
新オフィスに来る途中にいつものルートを外れてコンビニに寄ったら朝から道に迷いました。裏原宿あたりの迷路みたいな小道どうにかするか、私の方向音痴どうにかしてください。切実に。

普段はよく道に迷うけどコーディングの筋道はしっかり立てていきましょう。
ではBootstrapを使ってサイトを作ろうの続きです。

あ、それと、時々画像に載せているcssはオリジナルで書き出したものです。Bootstrapのcssだけでは実現できない部分もあるのでそれで補完してあります。

webサイトを作る 続き

前回は大枠を作って、全体が見えてきました。
この調子で次は細かい部分を作り込んでいきましょう。

細部を作る 1

まずコンテンツを仕上げます。

テンプレートに従って140px四方の正方形の画像を用意しておいたので、いよいよ出番です。
CSS3を知るべしでも紹介した角丸処理ですが、Bootstrapなら“img-circle”をclass指定すれば正円の出来上がり。

詳細説明に飛ばすためのボタンも、buttonタグにBootstrapの基本ボタンスタイル“btn”・ボタンの色を表す“btn-default”をclass指定するだけです。

20140207-1b

簡単に作れちゃいました。サクサク次にいきましょい。

細部を作る 2

ナビゲーションバーに手をつけます。

そういえばほったらかしだったナビゲーションバー。通称は”navbar”っていうらしく、カタカナ表記だとナヴバー?むしろカタカナにしなくていいか。

恒例のdiv囲い開始です。
containerの下に基本スタイルが設定された“navbar”・バー全体の色設定の“navbar-inverse”でclass指定したdivを作ります。その下にサイトの総合タイトルを“navbar-header”として作成。“float: left;”の含まれるclassが一番先に記述されるので、これでタイトルがバーの左側に固定されます。さらにタイトル名に“navbar-brand”をclass指定すると、タイトルっぽく文字が大きめに表示されます。

メニューの中身はリストを使います。ulに“liststyle: none;”が入った“nav”、位置調整用の“navbar-nav”をclass指定したらなんかもう出来ました。それっぽく見せるためにHomeに“active”で色づけしてあります。

20140207-2

細部を作る 3

いったん全体を見渡します。

パーツが揃ってきたところで、ページ全体のバランスを見てみましょう。文字列とにらめっこし続けるのも疲れるのでちょっとした気分転換にもなります。

20140207-3b

ナビゲーションバー、メインビジュアル、コンテンツ、フッターと当初の計画通りに進行中です。
こうして見てみるとグレーが微妙な感じがしてきました。そもそも画像で画面をずばっとぶち抜いた方がスッキリして見えるんじゃなかろうか。というわけでjumbotronをちょっと修正します。

前回jumbotron > container > sample-calouselっていう形にしましたが、jumbotron > jumbotron-innerでよさそうです。cssももう思い切ってsample-calouselのclass名をjumbotronにしてサッパリさせちゃいます。

20140207-4b

…最初からこれで良かったような。まあこんな風にして1つずつ気付きながら調整して作っていく様子をリアルにお伝えしていくということで。じゃあこれってドキュメンタリーだったのか。

細部を作る 4

レスポンシブの動作確認もしておく。

「全体を見渡す」のもう1つの意味として、レスポンシブにした時にデザインが崩れていないかも重要な確認項目です。森田はまだ思い通りに動いてくれないことの方が多くてここでいつも苦しめられています。さあこのサンプルページの幅を狭めていくとどうなるんでしょうか。ちなみにBootstrapでは横幅768px未満がスマートフォンサイズとされています。

20140207-6

うん、さっそくnavbarのactiveにした所(“Home”)がおかしいですね。幅が広い時はそんなに気にならなかったけど、navbarとjumbotronの隙間もちょっと違和感があります。jumbotron以下は特に難しいこともしてない分、今のところいい感じです。

次回予告

今回の作業でサイトに必要なパーツが一通り揃いました(地味にフッターの部分もいじりました)。

あとは動作確認で見えてきた課題:navbarあたりかなと思います。
が、ここでテンプレートをもう一度振り返ってみましょう。

20140207-5

calousel(サンプルではjumbotron)の上にnavbarが重なってますね。ここは再現しておきたいところです。

大枠はサクサクと進んできましたが、やっぱり完成まではもう少しかかりそうな予感。コーディングが仕上がっていくにつれてコードが複雑化するせいか、調整で上手くいかなくて詰まってしまう場面が個人的に多い気がします。連載もまだまだ続きそうです?!というわけで次回もお楽しみに!押忍!

標準
title-2
Design

Bootstrapを使ってWebサイトを作ろう その2

こんにちは!新人じゃなくなりかけたような森田です。
周辺の昼めしスポットの捜索を始めたところ、さっそく良い感じの中華料理屋さんを発見しました。サラダバーがおかわりし放題ということで、ひたすら葉っぱ食べて食後のバナナもいただいたら、師匠たちによく食べるねえと褒められ(?)ました。

さらなる新天地を求めつつ、今回はBootstrapを使ってサイト作る続きです。

webサイトを作る

前回は制作環境を整えました。
今回から実際にwebサイトを作っていきます。テンプレートを参考に制作ということでしたが、グレーのダミーイメージでは個人的に寂しいので森田テイストでいきたいと思います。

素材を揃える

組み立てるのはパーツが揃ってから。

制作環境の他にもうひとつ重要な下準備がありました。ページに必要な素材パーツを揃えておくことです。調理器具があっても素材がないと料理出来なくて悲しいのと同じです。

_sampleフォルダの中に“images”フォルダを作って、使いたい画像を用意しておきます。師匠から教えていただいたPAKUTASOさんから活きのいいのを仕入れてまいりました。ファイル名は良い感じの名前が思い浮かばなかったのでサイズにしときました。

140206-1

今度こそコーディング開始です。

 大枠を作る 1

webデザインとはデッサンのように全体を見ながら作っていくもの。by山形師匠

そんなありがたいお言葉に従って、body内に要素を書き込んでいきます。テンプレートにはどんな要素があるのかをまず確認しておきます。

140206-6

このページはナビゲーションバー・メインビジュアル・コンテンツ・フッターに分類できます。ということでまずページを4つの領域に分割してみましょう。

140206-2

各パーツをcontainerで囲いました。これはBootstrapが持つグリッドシステムの大枠でもあります。ちなみに色は分かりやすいように付けただけで、実際の表示は文字が4列あるだけです。

あんまり進んだ感はしませんが、最初にこの区分をしっかりしておくことで自分がどの部分に手を加えているのかが分かりやすくなると思います。結構大きな一歩です。

大枠を作る 2

さっきが地味だったので、分かりやすいメインビジュアルとコンテンツの部分を整えていきます。

まずメインビジュアルのところについて早速おことわりすべきことが。
テンプレートでは”Carousel”(カルーセル)というJavascriptを使っています。が、森田にはJavascriptの知識がほとんどないため今回は画像一枚で代用させていただきます。

では気を取り直して。
メインにぶち抜きのスペースを取るにはjumbotronを使います。さらにこのjumbotronをcontainerの上に置くことで、左右めいっぱいに表示出来ます。

140206-3c

そしてコンテンツ部分にはグリッドシステムを使います。
グリッドシステム、rowで1つの行を表し、行の中が12個のcolumnの列で区切られています。ここでは3つのコンテンツを横に等幅で並べたいので、4列ずつ3つのカラムに分けます。

rowのdivの中にcol-**-4というclassを書くとそれが実現できます。お手軽。
ハイフンの真ん中の部分はMedia queriesを受けていて、xs・sm・md・lgと4種類あります。デバイスごとに定義された横幅に応じてグリッド解除するタイミングが分けてあるんです。いちいちレスポンシブ用の設定を書き込まずに使えちゃうあたり涙が出そうです。

大枠を作る 3

メインビジュアルをいじって、いい感じにしてみる。

webページ、ひいてはwebサイトの顔になる部分がメインビジュアルです。ここが決まるだけで何となくそのサイトの雰囲気が伝わってくるくらい影響が大きい部分です。サクッとバシッと決めちゃいましょう。

calousel予定地にsample-calouselというオリジナルのclassを作って気分だけでもcalouselに近づけてみました。メインとなる画像をbackground-imageとして、文字色やpaddingをいじっていい感じに調整。

140206-4 

おお…?

ついでにコンテンツ部分にtext-centerという真ん中揃えのclassを入れて、テキストにもh2(第2見出し)とp(段落)でそれぞれの要素を意味合い通りに表示されるようにします。
フッター部分もhr(段落の区切り)で線を引いてコンテンツと分けておきます。

140206-6a

おお、なんかすごくそれっぽい!

次回予告

もはやデザイナーというよりは料理人か飲食店経営の修行サイトみたいな空気が漂いまくっておりますが、もうこの流れで推して参りたいと思います。

大枠から作っていってだいぶ形になってきました。
次回は細部を調整していく予定です。
あれ、連載といいつつ結構すぐ終わっちゃう?!次回もお楽しみに!押忍!

標準
title-2
Design

Bootstrapを使ってWebサイトを作ろう その1

こんにちは!新人脱出かもしれない森田です。
数日前はすごくあったかかったのに、昨日今日とものすごい冷え込みです。はふはふ言いながら鍋焼きうどんとか食べたくなります。

前回Bootstrapの紹介をしましたが、その派生としてBootstrapを使って実際に1からwebサイトを作ってみるという連載企画的なものに挑戦しちゃいます。連載ってなんか良い響きですね。
では始まりますよー

制作環境を整える

webサイトを作るといってもいきなりコーディングをするわけではありません。元弓道部的な説明だと、弓を引く為には道場を掃除したり的や弓具の準備が必要です。何事も土台が大切なのです。

フォルダ作成

web制作の土台って何かというと、フォルダとファイルの整備です。

BootstrapをサイトからDLしてきたら、zipファイルを解凍します。解凍したてのフォルダ名は”dist”となっていますが、制作用に“_sample”に名称変更しました(名前はなんでもいいです)。フォルダの中にはcss、fonts、jsという3つのファイルが入っています。これらをそのまま使用します。

140205-01

この_sampleフォルダが今後webサイトを作っていく為の基本フォルダです。長い付き合いになると思うのできれいに使いましょう。

index.htmlを作成

記念すべき1ページ目を作ります。

webサイトのメインページのファイル名は“index.html”がお決まりパターン。_sampleフォルダの下に右クリックやテキストエディターでファイルを新規作成して“index.html”と名付けましょう。

140205-02

index.htmlを作ったついでにベースだけ記述してみました。bootstrap.cssのリンクも貼って、Bootstrap使う気満々アピールです。

動作確認

これは本当にちゃんと動くのか?

さっくりhtml書いてはみたけれど、作ったindex.htmlがちゃんとbootstrap.cssを反映して動いてるかは動作確認しないことには分かりません。index.htmlファイルをブラウザで開いてみましょう。森田はよく記述ミスしまくるため、こまめなブラウザチェックを心がけてます。

…といっても、何か書かないとこのままでは真っ白なのでbodyの中に“test”と書き入れてみます。
ページ上に文字が表示されていたらオッケー。さらに、<h1>を使ってcssを読み込んでいるかをチェック。

140205-03

なんということでしょう
小さかったtestが大きくなったではありませんか

cssファイルも確認してみると、しっかり設定通りになっていることが分かると思います。これで表示確認が出来ました。さらにプログラム側でもエラーが出ていないか見てみます。

Macの“command+option+i”というショートカットキーでインスペクタを出せます。実行中のプログラムの中身を確認出来るとてもありがたいツールです。いつもいつもお世話になってます。

140205-04

もしエラーが出ると赤文字でその詳細が表示されます。試しにmoritaと打ってエラー表示させてみたんですが、moritaなんてないよって言われてますね。そりゃそうだ。

プログラムエラーもないことが確認出来たら、これで制作環境がばっちり整いました!
もういつでもwebサイト作れちゃいます。さあ何作りましょうか!(鼻息荒め)

次回予告

制作環境が整ったので、次回からはBootstrapのサイトのTemplateを参考にwebサイトを作っていきたいと思います。

140205-06

おお、いかにもwebサイトな感じのデザインですね。これにきれいな画像はめこんだら本物っぽくなりそうです。せっかくだから森田好みのおいしそうなサイト作りたいなあという野望を抱きつつ、それがどんな風に実現されるのか?!乞うご期待です。押忍!

標準
PAK86_meganewo1039500
Design

PhotoshopスライスツールとWeb用に保存の設定を色々いじってみる

こんにちは山形です。いつもは開発系の記事だけですがたまにはプログラマー目線でデザインツールの使い方でも書いてみたいと思います。

さてWeb制作には欠かせないPhotoshopですがデザイナーが作成したデータを貰ってプログラマーがWeb用画像を書きだすなんてこともたまにあるかと思います。

なんとなく保存はできたものの「あれ、そんなファイル名なの…」とか「いやいやどこに保存してんだよ」「そのファイルいらねえし!」みたいな事が起きた場合の対処方法をまとめました。

Photoshopスライスツールとは

そもそもまずはソレ何?旨いの?という話はこちらからどうぞ。
シンプルな使い方としては「スライスツールで範囲を選択」>「Web用に保存メニューから形式を選んで保存」です。

Web用に保存のショートカット

shift + option + command + S です。(windowsはコマンドの代わりにcontrol)

通常の保存が command + S なのでそこに shift + options が加わった形ですね。

今回の素材

PAKUTASOさんから選びました。

PAK86_meganewo1039500

クオリティの高い画像が無料で使えるのでブログには最適ですね。

画像名を変える(ファイル名に _3 とかいらない)

まずはここ。いざ保存したファイル名に “_”(アンダースコア)と番号がふられてて削除するのめんどくさい!と思いますよね。

そんな時はスライスした範囲を右クリックして出てくるコンテキストメニューから”スライスオプションを編集…”を選択し、”スライスの種類”を”イメージ”に選択した状態で名前の欄を変えましょう。

スクリーンショット 2014-02-06 11.42.08

 

スクリーンショット 2014-02-06 11.43.57

 

こうしておくとWeb用に保存の時のファイル名と違くても先に設定した名前が優先されます。_3とかもつきません。

そもそも1つしか保存してないのに _3 ってなんだ?と僕は思ったのですが、スライスで囲った範囲の上に1と書いてある範囲があり左に2がありますので、画像の左上から自動で分割して番号をふるんですね。

スクリーンショット 2014-02-06 11.39.43

フォルダ名を変える(いつでも images とは限らない。もしくはいらない)

デフォルトだとスライス画像が一枚でもimagesフォルダに入れて保存されますよね。
これはこれで便利な時もあるんだけど(imagesフォルダをまだ作成していない時とか?)名前変えたいとかフォルダにいれないでほしい時もあります。

そんな時はWeb用に保存のパネルから一番右上にあるメニューを開いて出力設定の編集を開きましょう。

スクリーンショット 2014-02-06 11.47.26

 

現れたウィンドウから”ファイルの保存”を選択します。

スクリーンショット 2014-02-06 11.50.18

 

一番下の範囲に”画像をフォルダーに保存”という項目があるので、フィールドに任意の名前を入力するかチェックを外すとフォルダーが作成されないようになります。

スクリーンショット 2014-02-06 11.51.21

 

スライスを分割

スライス領域を右クリックして”スライスを分割”を選択するとできます。

スクリーンショット 2014-02-06 12.39.46

 

縦横を等間隔に分割設定できます。

スクリーンショット 2014-02-06 12.41.34

あまり使いどころ無い感じしますが、例えばグリッドレイアウトされている場合とか一つずつ範囲選択するよりは早いかもしれないですね。その場合、各要素の隙間があると適応できないですが…

テーブルレイアウト時代の名残なのかも。

保存と同時に縮小(Retina用素材から、非Retina用にしたい場合とか)

最近はどんどんスマートフォンのアクセスが増えてきてますよね。半分以上スマフォユーザーのサイトも珍しくないんじゃないでしょうか。
高精細なディスプレイ用に大きめにデザインしてもらうのはいいんですが、一旦保存したファイルを開いて小さくしてまた保存…とかめんどくさいですよね。

そんな時に役立つのがWeb用に保存パネルの右下にある”画像サイズ”オプションです。

スクリーンショット 2014-02-06 11.55.32

 

ここでサイズを指定すれば縮小版とかを作ってくれます。
ただ気をつけてください!このサイズは全体の画像サイズです。なのでスライスに設定したつもりでいると出来上がる画像のサイズが違うので戸惑います(ました)。あと同時に2つのサイズを保存してくれるわけではありません!

また画質の選択肢が以下のように別れておりそれぞれに特性があります。

ニアレストネイバー法

一番単純な拡大・縮小が行われます。ドットをそのまま扱う感じなので縮小するとカーブが大分ギザギザします。逆に小さいカンバスでドット絵を書いて大きくする場合にはこれを使うのが最適です。写真の縮小には向いてないと思います。

スクリーンショット 2014-02-06 12.19.39

バイリニア法

ピクセルの色濃度を元に平均値を求めて空いたピクセルを補うという方法みたいです。機械的に平均値を計算するだけなので元画像に含まれていない色が含まれる可能性があり若干画質が劣るようです。

スクリーンショット 2014-02-06 12.20.16

バイキュービック法(デフォルト)

これがデフォルトの設定です。バイリニア法が平均値の計算だけだったのに対して、元画像に含まれる周辺の色も考慮に入れて計算するようです。なのでバイリニア法に比べるとより自然な仕上がりになるかもしれません。

スクリーンショット 2014-02-06 12.20.47

バイキュービック法(滑らか)

バイキュービック法の計算を調整したものですね。素人には何が変わったのかわかりませんが、暗い色の境界のエッジが目立ってしまう場合に使うと良いようです。

スクリーンショット 2014-02-06 12.21.32

バイキュービック法(シャープ)

これもバイキュービック法の計算を調整したもので、暗い色の領域のエッジをもっと目立たせたい場合に使うと良いようです。

スクリーンショット 2014-02-06 12.21.59

こちらを参考にしました:PhotoShopで最適な画像保存をする為に。ニアレストネイバー法やバイキュービック法でのリサイズやJPEG圧縮などを検証したよ。

htmlも生成する(tableとかダサいのでcssでクラス指定で)

あんまり使うことは無いと思いますが、Web業界が長い人には胸アツのtableレイアウトか、Web標準なcssのhtmlコードを出力してくれます。

これはまずフォルダ名を変更した時と同じWeb用に保存のパネルから一番右上にあるメニューを開いて出力設定の編集を選択します。

スクリーンショット 2014-02-06 11.47.26

 

スクリーンショット 2014-02-06 12.25.32

 

現れた出力設定からまずはHTML設定を選択します。
ここではhtmlの書き方の設定ができます。そのまま使うことはあまりないと思うので適当でいいと思いますが僕はインデントが半角スペース2文字にしてほしいので以下のようにしました。

スクリーンショット 2014-02-06 12.27.22

 

次にスライス設定に切り替えます。

スクリーンショット 2014-02-06 12.23.00

 

tableレイアウトとかもう滅んでいいと思うけど、htmlメールにはまだ必要なんですかね。htmlメール作ったこと無いのでよくわかりませんが。とりあえずcssを選択しました。

スクリーンショット 2014-02-06 12.30.36

 

好みですがid属性を降ることも出来るようです。何度も言いますがここで出力したhtmlをそのまま使うことなんてほぼ無いと思うので適当でいいと思います。

で、保存すると (psdファイル名).html と images フォルダが作成されます。

htmlを開いてみるとこんな表示なっていたのでPhotoshop上でスライスした見た目がそのまま表現されるってことですね。

スクリーンショット 2014-02-06 12.35.10

まとめ

どうでしたでしょうか。以外にも細かいオプションがあって普段スルーしていた自分には結構驚きでした。
特にファイル名なんかはいちいち保存してから修正していると意外と時間かかるんですよね。例え1ファイルに5秒しか短縮できないとしても、日々の積み重ねで100個直せば8分半かかると考えればなかなか侮れません。

標準
blog-7
Design

Bootstrapを知るべし

こんにちは!もうそろそろ新人脱出?森田です。
旧オフィスも好きだったけど新オフィスはとても快適です。が、近所の昼めしスポットを開拓しなければならないという重大ミッションも抱えております。安ウマなお店たくさん発掘できますように。

さてさて、ただ今ハレノヒでは自社アプリを開発中です!
アプリのデザインはなんと私が担当させていただくことに。webデザインよりもっと全然知識がなくて完全手探り状態でしたが、完成までもう一息というところまでこぎつけました。最初はiPhone用としてリリース予定ですのでどうぞお楽しみに!Android派の方はもうしばしお待ちください(森田もおあずけです…)

blog-5

アプリデザインが一段落ついてからはweb用の告知ページを制作していました。
そこでまた新しい試みをしたので、今回はそのことについて書こうと思います。

Bootstrapとは

「どうやらブートストラップなるものを使うとweb制作がはかどるらしい」というすごい曖昧な予備知識はもっていた森田。でもブートストラップという言葉を初めて聞いた時、真っ先に思い浮かんだのはマッチョな隊長率いるムキムキエクササイズでしたすいません。ちなみに直訳すると長靴のパーツのことらしいです。

正確には、BootstrapとはCSSフレームワークの名前です。
フレームワークというのは色んなところで繰り返し使われる汎用機能を備えたもので、記述の仕方がある程度決まっています。これを利用すれば基盤部分だったり必要な箇所を流用出来てとても効率がいいです。
汎用的なプログラムをまとめたものの仲間としてライブラリというのもありますが、こちらはもうちょっと機能が小さいです。それ自体が働くというよりは、他のプログラムの助けになってくれるイメージです。

本来Bootstrapはテキストベースでナビなどが沢山ある管理画面などの制作に向いています。アプリ用の告知ページは性質が違うのでBootstrapの良さをフル活用とまではならずも、良い勉強になりました!

BootstrapをDLする

まずはBootstrapをダウンロードするところから始めましょう。

blog-1

blog-2

http://getbootstrap.com/

と思ったらボタンが3つありますね。
これはどういうことかというと、作業スタイルによって使い分ける感じでしょうか。ページの大枠をお借りするということで、基本は左の”Download Bootstrap”でオッケーです。

ちょっと話は逸れますが、右の二つはどう使うかというと。

最近ではネット上でバージョン管理されたソースコードのリポジトリを使って他人のコードのバグを修正したり出来ちゃうんです。ソーシャルコーディングというらしいです。技術の進歩すごい。また、そんな風にソースコードを自由に見て書き込むことが出来るような活動形態をオープンソースプロジェクトといいます。

そのオープンソースプロジェクトは主にGithubという共有webサービスが使用されているケースが多く、真ん中と右の”Download source”と”Download sass”はGithubで管理されているコードとsassをダウンロード出来ます。必要な機能だけ選んだりもできるようです。

でも今回はソースコード扱うの師匠と私だけだし全然ソーシャルじゃない!というわけでプライベートモードで作業しました。Githubだとプライベート仕様が有料なのでBitbucketという無料サービスを使っています。

Bootstrapでできること

今回はざっくりと紹介することにして、次の機会に詳しく説明していきますね。

blog-3

Bootstrapではグリッドシステムを使ってレイアウトすることが出来ます。1行に12列のグリッドがあり、その数を目安に配置していけば大まかにデザインを作れちゃいます。

レスポンシブデザインにももちろん対応してます。グリッドにも何種類かに設定が分かれているので、PCではグリッド・スマホではグリッド解除みたいなことも楽々出来ます。

ボタンやフォームなどの各種インターフェースが揃っているのも心強いです。これらを駆使するとかっこいい管理画面が出来ると師匠が言ってました。

まとめ

今回はBootstrapの紹介をしてみました。ここでまとめただけでもだいぶ便利感あふれてると思いますが、実際使ってみると果たしてどれだけ効率が良いんでしょうか?!Bootstrap、恐るべしです。これを使いこなせたら私もムキムキデザイナーになれる気がします。押忍!

標準
IMG_1977
Other

新オフィスに引っ越しました

設立後最初のオフィスとして9ヶ月ほどお世話になった神宮前5丁目から

なんと

神宮前3丁目に引っ越しました!

冒頭の写真は一列に4つ並べたデスクで、作業中のデザイナー森田です。
前よりも気持ちよく働ける環境になりましたし、独立した打ち合わせスペースもできました。

住所

〒150-0001
東京都渋谷区神宮前3-32-2 K’s Apartment 101

※電話番号とFAX番号も変更になりました
TEL:03-6459-2024
FAX:03-6459-2025

1F

入り口を入ってすぐが打ち合わせスペース

IMG_1978

 

階段

を降りて

IMG_1979

 

地下1F

が作業スペースです

IMG_1977

標準