2013.11.11 Monday
リーダブルコード より良いコードを書くためのシンプルで実践的なテクニック
買って、読みました。
口蔵さんが貸してくれるんだったんだけど、会社辞めてしまったので。。
読みやすいコード=良いプログラムの書き方。
内容は、リファクタリングに似ていますが、200ページ程度でまとまっていて、読みやすい。
短い時間で意図を伝えることの出来るプログラムが優れているというのがテーマ。
困ったことに、自分で書いたプログラムもしばらくすると忘れるからね。。
変数名、関数名の付け方、コメント、if文、for文の書き方、関数の分割基準などについて書かれている。
基本的なことなんだけれど、出来ていない人も多いと思う。
こういうのは、プログラミング言語の本では触れられない内容。
プログラマのたしなみとして、みんなに特に若い人に読んでもらいたい良書なので、手元に置いておきます。
印象深かったのが、ヨーダ記法。
「スターウォーズ」のヨーダから命名されているというのが面白かった。
ヨーダ記法というのは、
if (obj == null) {
を
if (null == obj) {
と書くこと。
==を=に誤ったとして、
if (obj = null) {
は、trueになり、
if (null = obj) {
はコンパイルエラーになるので安全なのだけれど、不自然で読みにくいし、いまのコンパイラは警告を出してくれるので、もうやめちまおうぜ!という意見。
人間には、左が「調査対象」、右が「比較対象」という形が読みやすい。
ヨーダは「主語⇒述語⇒目的語」を「目的語⇒主語⇒述語」と倒置させて話すことから、ヨーダ記法(yoda conditions)と名付けられてるのだって。
スパムも「モンティパイソン」だし、コンピュータ用語って遊びがあって楽しいね。
実際のヨーダの倒置ですが、
we must destroy the sith.
というところを、
destroy the sith we must.
といいます。
(我々はシスを倒さなければならん)
参考:yahoo 知恵袋
口蔵さんが貸してくれるんだったんだけど、会社辞めてしまったので。。
読みやすいコード=良いプログラムの書き方。
内容は、リファクタリングに似ていますが、200ページ程度でまとまっていて、読みやすい。
短い時間で意図を伝えることの出来るプログラムが優れているというのがテーマ。
困ったことに、自分で書いたプログラムもしばらくすると忘れるからね。。
変数名、関数名の付け方、コメント、if文、for文の書き方、関数の分割基準などについて書かれている。
基本的なことなんだけれど、出来ていない人も多いと思う。
こういうのは、プログラミング言語の本では触れられない内容。
プログラマのたしなみとして、みんなに特に若い人に読んでもらいたい良書なので、手元に置いておきます。
印象深かったのが、ヨーダ記法。
「スターウォーズ」のヨーダから命名されているというのが面白かった。
ヨーダ記法というのは、
if (obj == null) {
を
if (null == obj) {
と書くこと。
==を=に誤ったとして、
if (obj = null) {
は、trueになり、
if (null = obj) {
はコンパイルエラーになるので安全なのだけれど、不自然で読みにくいし、いまのコンパイラは警告を出してくれるので、もうやめちまおうぜ!という意見。
人間には、左が「調査対象」、右が「比較対象」という形が読みやすい。
ヨーダは「主語⇒述語⇒目的語」を「目的語⇒主語⇒述語」と倒置させて話すことから、ヨーダ記法(yoda conditions)と名付けられてるのだって。
スパムも「モンティパイソン」だし、コンピュータ用語って遊びがあって楽しいね。
実際のヨーダの倒置ですが、
we must destroy the sith.
というところを、
destroy the sith we must.
といいます。
(我々はシスを倒さなければならん)
参考:yahoo 知恵袋
2013.11.09 Saturday
現役、Microsoft MVP受賞者の講師が登壇!!マルチデバイス時代のレスポンシブウェブデザイン!!流行に乗り遅れないWebデザイン制作手法をあなたに教えちゃいます!!
先日、表題の勉強会に参加してきました。
仕事が忙しかったので久しぶり。
渋谷ヒカリエ、レバレジーズ、内装が奇麗になってました。
普通の会社でシステム開発をしながら、専門学校や勉強会の講師をされている山崎大助さんの登壇。
レスポンシブウェブデザインについて。
本も出版されてる。
評価は高いです。面白そう。
PC、タブレット、スマートフォンにwebの見た目をあわせるレスポンシブウェブ。
まず、レスポンシブウェブは流行ではない!と。
一時的なものではなく、技術として定着していくであろうものであるとのこと。
近年、PCよりタブレットが売れていたり、サイトアクセスがPCよりもスマートフォンのほうが多いなどという話題を聞きますので納得のいくところです。
中高校生がスマートフォンを持っているような時代だから、スマートフォンからwebの世界に入っている人にとって、PCの必要性を感じない人も多いのではないのでしょうか。
PCよりもモバイルを優先する時代が来つつある。
だから、流行ではなく、必然。
かつてのモバイル対応といえば、URLを分けたり、ユーザエージェントで振り分けをするものでした。
モバイルごとのサイトを別個に用意していたので保守性が低い。
それが、css3のmedia queryという機能を使うことで、スクリーンサイズでスタイルシートを切り替えるということが実現できる。
それなりのデザイン設計が必要になってはくるが、1ソースマルチデバイスが可能。
スクリーンサイズの基準をブレークポイントという。
・スマートフォン 480px
・タブレット 768px
・パソコン 980px
■media queryの例
1.css
/* 480px以下 スマートフォン向け*/
body { ... }
/* 481px - 768px タブレット向け */
@media only screen and (min-width: 481px) {
body { ... }
}
/* 769px - パソコン向け */
@media only screen and (min-width: 769px) {
body { ... }
}
2.link
<link href="sp.css">
<link media="screen and (min-width:481px) href="tablet.css">
<link media="screen and (min-width:769px) href="desktop.css">
3.@import
@import url("sp.css");
@import url("tablet.css") only screen and (min-width: 481px);
@import url("desktop.css") only screen and (min-width: 769px);
山崎さんは1の手法がhttpリクエストを減らせるので、オススメだそう。
また、ie6-8はmedia queryに未対応なので、ライブラリを併用することで利用可能になる。
・css3-mediaqueries.js
・respond.js
ie使えねー。
■viewport
metaタグにviewportという属性がある。
・モバイル端末ブラウザの表示幅
・ピンチによる、拡大縮小可否
・拡大縮小の最大、最小倍率
など指定できる。
例
<meta name="viewport" content="width=1024">
⇒appleはPCもスマートフォンも同じ幅で見せる。
<meta name="viewport" content="device-width">
⇒端末画面の幅にあわせる
■imgの比率
比率を保つcssの記述
img {
max-width: 100%;
height: auto;
}
■参考サイト
・microsoft
・nathan sawaya
・media queryies
・adobe
■山崎さん
@_AIR_NOTE
デジタルハリウッド
執筆本のデモ
山崎さん、ありがとうございました。
勉強になりました。
仕事が忙しかったので久しぶり。
渋谷ヒカリエ、レバレジーズ、内装が奇麗になってました。
普通の会社でシステム開発をしながら、専門学校や勉強会の講師をされている山崎大助さんの登壇。
レスポンシブウェブデザインについて。
本も出版されてる。
評価は高いです。面白そう。
PC、タブレット、スマートフォンにwebの見た目をあわせるレスポンシブウェブ。
まず、レスポンシブウェブは流行ではない!と。
一時的なものではなく、技術として定着していくであろうものであるとのこと。
近年、PCよりタブレットが売れていたり、サイトアクセスがPCよりもスマートフォンのほうが多いなどという話題を聞きますので納得のいくところです。
中高校生がスマートフォンを持っているような時代だから、スマートフォンからwebの世界に入っている人にとって、PCの必要性を感じない人も多いのではないのでしょうか。
PCよりもモバイルを優先する時代が来つつある。
だから、流行ではなく、必然。
かつてのモバイル対応といえば、URLを分けたり、ユーザエージェントで振り分けをするものでした。
モバイルごとのサイトを別個に用意していたので保守性が低い。
それが、css3のmedia queryという機能を使うことで、スクリーンサイズでスタイルシートを切り替えるということが実現できる。
それなりのデザイン設計が必要になってはくるが、1ソースマルチデバイスが可能。
スクリーンサイズの基準をブレークポイントという。
・スマートフォン 480px
・タブレット 768px
・パソコン 980px
■media queryの例
1.css
/* 480px以下 スマートフォン向け*/
body { ... }
/* 481px - 768px タブレット向け */
@media only screen and (min-width: 481px) {
body { ... }
}
/* 769px - パソコン向け */
@media only screen and (min-width: 769px) {
body { ... }
}
2.link
<link href="sp.css">
<link media="screen and (min-width:481px) href="tablet.css">
<link media="screen and (min-width:769px) href="desktop.css">
3.@import
@import url("sp.css");
@import url("tablet.css") only screen and (min-width: 481px);
@import url("desktop.css") only screen and (min-width: 769px);
山崎さんは1の手法がhttpリクエストを減らせるので、オススメだそう。
また、ie6-8はmedia queryに未対応なので、ライブラリを併用することで利用可能になる。
・css3-mediaqueries.js
・respond.js
ie使えねー。
■viewport
metaタグにviewportという属性がある。
・モバイル端末ブラウザの表示幅
・ピンチによる、拡大縮小可否
・拡大縮小の最大、最小倍率
など指定できる。
例
<meta name="viewport" content="width=1024">
⇒appleはPCもスマートフォンも同じ幅で見せる。
<meta name="viewport" content="device-width">
⇒端末画面の幅にあわせる
■imgの比率
比率を保つcssの記述
img {
max-width: 100%;
height: auto;
}
■参考サイト
・microsoft
・nathan sawaya
・media queryies
・adobe
■山崎さん
@_AIR_NOTE
デジタルハリウッド
執筆本のデモ
山崎さん、ありがとうございました。
勉強になりました。
2013.11.04 Monday
nohanaを使ってみました
nohanaを使いました。
テレビで紹介されて話題みたいです。
私はテレビで紹介されたのをみた知り合いの方に教えてもらいました。
nohanaはフォトブックサービスです。
毎月、一冊が無料(送料90円のみ)というところが特徴でしょうか。
2冊目以降は、送料込みで525円になります。
子どもの写真をおじいちゃんやおばあちゃんに送って欲しいようです。
サイズ:14cm × 14cm
厚さ:4mm
ページ数:28P
用紙:マットコート紙
写真は20枚+表紙の1枚が指定できます。
まず、安いのがいいですね。
写真はちょっと荒い。
サイズを小さくして、きめ細かく見せてくれたらいいのにと思うくらい。
アプリからしか作成が出来ないのも操作性が悪い。
スマートフォンから操作することを前提にしているのだから、スマートフォンのカメラレベルの写真を最適化して欲しいな。
90円だから、いいんですけど。
許容範囲。
ちゃんと作るんだったら、tolotのほうが小さくて、写真も多くてよかった。
手軽に作りたかったら、nohana。
使い分けられそう。
テレビで紹介されて話題みたいです。
私はテレビで紹介されたのをみた知り合いの方に教えてもらいました。
nohanaはフォトブックサービスです。
毎月、一冊が無料(送料90円のみ)というところが特徴でしょうか。
2冊目以降は、送料込みで525円になります。
子どもの写真をおじいちゃんやおばあちゃんに送って欲しいようです。
サイズ:14cm × 14cm
厚さ:4mm
ページ数:28P
用紙:マットコート紙
写真は20枚+表紙の1枚が指定できます。
まず、安いのがいいですね。
写真はちょっと荒い。
サイズを小さくして、きめ細かく見せてくれたらいいのにと思うくらい。
アプリからしか作成が出来ないのも操作性が悪い。
スマートフォンから操作することを前提にしているのだから、スマートフォンのカメラレベルの写真を最適化して欲しいな。
90円だから、いいんですけど。
許容範囲。
ちゃんと作るんだったら、tolotのほうが小さくて、写真も多くてよかった。
手軽に作りたかったら、nohana。
使い分けられそう。