IMG_1929
Development

Rubyで生まれた日から何日目なのかを計算してみよう

さて予告通り今回はRubyを使って今日は生まれてから何日目なのかを計算するプログラムを書いてみたいと思います。

ファイルを準備する

まず適当なフォルダを作りテキストエディタでcalc_days.rbという名称の空のテキストファイルを作成します。

スクリーンショット 2014-01-08 15.07.31

今回はデスクトップにdevというフォルダを作りファイルを作成しました。
Rubyでコードを書くファイルの拡張子は .rb にしましょう。

コードを書く

それではコードを書いていきましょう。
要件は

  1. 誕生日(西暦、月、日)を設定
  2. rubyコマンドで動作させると答えのテキストを表示する

これだけです。

誕生日を設定

まずRubyで時間を扱う際にはTimeというオブジェクトを使います。馴染みのない人にはオブジェクトってなんだ?という感じだと思いますがここでは深く考えずに流してしまいましょう。

たとえば僕の生年月日 1985年10月18日 をRubyのTimeオブジェクトを使って表すと以下のようになります。

Time.gm 1985, 10, 18

ただしくRubyとして動作するかを確認するために行頭に p を加えて以下のようにしてみましょう。

p Time.gm 1985, 10, 18

保存したらターミナルから ruby Desktop/dev/calc_days.rb と打ち込んでみます。すると以下のように文字が表示されました。

ruby Desktop/dev/calc_days.rb
1985-10-18 00:00:00 UTC

これで僕の誕生日を認識していることがわかったので、以下のようにして誕生日を何度でも使えるように “変数” という入れ物に収めておきます。

birth_day = Time.gm 1985, 10, 18

こうすることで誕生日を扱う度に Time.gm… と書かずに、birth_dayと書くだけでRubyが認識できる誕生日を作ったことになります。

試しに以下のようにしてみると何度も同じ誕生日を表示できると思います。

birth_day = Time.gm 1985, 10, 18
p birth_day
p birth_day
p birth_day
ruby Desktop/dev/calc_days.rb
1985-10-18 00:00:00 UTC
1985-10-18 00:00:00 UTC
1985-10-18 00:00:00 UTC

現在時刻との差を求める

現在時刻は Time.now と表します。
差を求める場合は算数の引き算をするだけです。

Time.now - birth_day

簡単ですね。ただし答えは引き算の様に右側に書くのではなく式の左側に返ってきます。

diff = Time.now - birth_day

diffはdifferentの略です。こうすることで今度は現在時刻との差をdiffという変数に収めることが出来ました。

diffの中身をおなじみの p を使って確認してみます。

diff = Time.now - birth_day
p diff
ruby Desktop/dev/calc_days.rb
890721908.4752661

なにやら桁数の多い数値が表示されましたね。
これは誕生日から現在までの秒数を表しています。なのでこれを1日分の秒数で割れば何日経っているのかがわかるというわけです。

一日の秒数は 60秒×60分×24時間 で求められるので以下のように表します。

one_day_seconds = 60 * 60 * 24

掛け算は * で行います。
ついでにone_day_secondsという変数に収めておいたのでdiffをこれで割ってみましょう。

days = diff / one_day_seconds

割り算は / で行います。
かなりゴールに近づいてきた感じです。p でdaysの中身を確認してみます。

days = diff / one_day_seconds
p days
ruby Desktop/dev/calc_days.rb
10309.286028564247

小数点以下が長い数値ですね。細かい部分は四捨五入して表示させてみましょう。
days.round と書くと小数点以下を四捨五入してくれます。

days = diff / one_day_seconds
p days.round
ruby Desktop/dev/calc_days.rb
10309

これだけだとちょっと寂しいので最後にメッセージを交えて表示させてみましょう。

days = diff / one_day_seconds
p "あなたが生まれてから#{ days.round }日が経ちました"

Rubyで文字を扱うには ” コーテーションで囲う必要があるのですが、文字列の中で #{ と } を使うと変数を埋め込めるという機能が有ります。
これを実行すると以下のようになります。

ruby Desktop/dev/calc_days.rb
"あなたが生まれてから10309日が経ちました"

いい感じですね。
以上でRubyで生まれた日から何日目なのかを計算するプログラムは完成です。
コード全体は以下のようになります。

birth_day = Time.gm 1985, 10, 18
diff = Time.now - birth_day
one_day_seconds = 60 * 60 * 24
days = diff / one_day_seconds
p "あなたが生まれてから#{ days.round }日が経ちました"

まとめ

プログラミングの未経験者にはこれだけでも少し重い作業かもしれませんが、わりと簡単に数行書くだけで面倒な計算を素早くやってくれることがお分かりいただけたかと思います。
次回以降もRubyを使って徐々に高度なものを作って見たいと思います。

標準
Design

ワイヤーフレームを書くべし

こんにちは!新人森田です。
本日ハレノヒ周辺は雨模様な予感。
傘を忘れた私は非常にドキドキしております。

今回からこのハレノヒブログを素材として、実際にデザインを進めていく様子もお送りしていきます。森田がこのブログを劇的変身させます!(予定)

[森田]
いよいよデザイン!!どうやってハレノヒっぽくしようかなー

[山形師匠のお言葉]
Webデザインを始める前に、作るものの情報を整理して視覚化したものをワイヤーフレームと言います。サイトの設計図のようなものです。要件を満たし、ユーザーが使いやすいサイトをデザインするために沢山ワイヤーフレームを書きましょう。

[森田]
ふむふむ、デザインの前にワンステップあるんですね。確かに設計図がないととんでもないものを作り出してしまいそうです。ハレノヒブログのワイヤーフレーム、書いてみます!

要素を書き出す

デザインは、ただかっこよさげにレイアウトすればいいというものではありません。伝えたいものを出来るだけ伝えたい通りに伝える為にデザインするんだと思っています。

では、そもそも「伝えたいもの」とは一体何なのか?
まずはレイアウトに必要な要素を書き出してみることにします。

140108-01

  • サイトのタイトル
  • カテゴリーのリスト
  • タグのリスト
  • 記事のリスト
  • ハレノヒサイトへのリンク
  • バナー類
  • 投稿者のリスト
  • 検索フォーム
  • パンくず(TOP>商品カテゴリ>…みたいなやつです)

上記のように、ハレノヒブログを構成する要素は計9個でした。

構成を考える

次に、書き出した要素を配置して全体の構成を考えます。ですがその前に重要なポイントがひとつあります。
「webページを閲覧するのはパソコンだけではない」ということです。

スマホ・タブレットを持っていることは2014年の今、もう普通のことになってきました。しかもそれらの方がパソコンより断然お手軽です。電車内でスマホやタブレットをいじって時間をつぶす人の多さを見ていると、これからモバイル端末のアクセスが増えていくことを予感させます。というか今まさにしてますねきっと。

そういうわけで、スマホ・タブレット・パソコンのどれからアクセスしても見やすいサイトを目指していきたいと思います。
そしてこういう仕組みのデザインを「レスポンシブデザイン」といいます。ちなみに師匠からの受け売りです。

とはいえ全部を同時進行で考えられる頭は私にはありません。
スマホ版から発展させる「モバイルファースト」というやりかたもありますが、ここではパソコンベースのオーソドックスなレイアウトから、他の端末へのアレンジを考えてみます。

140108-04

横幅が小さくなった時にどうなるかも検証して、横に表示されていたカラムを下にしたりと見やすい工夫を。

ブログの大体の枠組みが見えてきました!
ワイヤーフレームによってイメージの共有や指示がしやすくなりそうです。チームでもの作りをする上では必需品ですね。

さあハレノヒブログの設計図が出来ました。次はいよいよデザインか?!どこから手を付けよう??!と期待に胸を膨らませながら今回の修行はここまでです。押忍!

標準
IMG_1929
Development

Rubyを始めよう

新年あけましておめでとうございます。
本年もよろしくお願い致します。

さて開発日記の一発目はrubyプログラミングを始めるための第一歩をご紹介したいと思います。

プログラミングってなに?

まずプログラミングとは何でしょうか…?ズバリ一言で説明できるものでもないのですが、簡単に言うとコンピューターに作業をしてもらうための指示書を書く行為なのかなと思います。

コンピューターは計算機ですから例えば自分が生まれた日から今日で何日目なの?といっためんどくさいことも日数を足し算するプログラムを書いておけば何度でも同じ計算をしてくれてラクですよね。
ほかにもブログの文字数を数えて読み終わるのにかかるおよその時間を計算するとかもわかりやすいプログラミングの例かと思います。

ただしこの “プログラムを書く” というのがちょっと難しいんです。
前述の例で言えば「日数の足し算ってどうやるの?」「1月は31日だけど2月はうるう年で日数変わるよね?」と疑問がいくつか湧いてきますし、プログラムには書き方のルール(文法)があるので間違った書き方ではコンピューターはちゃんと動いてくれません。

Rubyってなに?

ruby-logo

そこでRubyの出番です。でもRubyだとめちゃくちゃ簡単かと聞かれればそんなことは無いです。ただRubyには “書きやすさ” や “楽しさ” 、”わかりやすさ” があります。

これはプログラミングをする上でとても大事なことだと思います。なぜならプログラミングをする目的はコンピューターに意図したとおりに動いて計算してもらうことなので、初心者が目的までの道のりで挫折してしまわないように気を配ってくれるイメージでしょうか。
また、わかりやすいコードであれば一ヶ月後の自分も、他人にも何をしているのかすぐに把握できるメリットがあります。

そんなRubyは20年ほど前に日本人の開発者である、まつもとゆきひろさんが作ったそうです。今では世界的にメジャーなプログラミング言語なので沢山の海外WebサービスでもRubyが使われています。

インストール

さてRubyを使うためにはコンピューターにRubyがインストールされていなければいけませんので、インストールの手順をご紹介します。

Mac OS X Mavericks の人

あなたのMacには既にかなり新しいRubyがインストールされていますので何もする必要はありません。

Mac OS X Mountain Lion以前の人

これに該当する人はMacにインストールされているRubyのバージョンが1.8とちょっと古いです。なのでできれば以下の手順で2.0以降をインストールすることをおすすめします。(Rubyの世界では枯れた古いバージョンを使い続けるよりも、なるべく新しいバージョンを使う傾向があります。この方が動作が速くセキュリティ性能が向上しているからです)

  1. XCodeをインストール
    AppStoreからXCodeを検索してインストールしてください
  2. XCode Command Line Toolsをインストール
    環境設定 > Downloads からCommand Line Tools という項目がある場合はこちらもインストールしてください
  3. ターミナルを起動する
    アプリ−ケーション > ユーティリティ > ターミナル.app をダブルクリックして起動してください
  4. git コマンドが使えるか確認
    ターミナルに git –version と打ち込んでバージョン情報が表示されるか確認をしてください。
    僕の環境では git version 1.8.3.4 (Apple Git-47) と表示されました
  5. rbenv をインストール
    以下のコマンドを打ち込んでください

    git clone https://github.com/sstephenson/rbenv.git ~/.rbenv

    続けて以下のコマンドを打ち込んでください

     echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
     echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
  6. ターミナルを再起動
    といってもウィンドウを一旦閉じてからもう一度ウィンドウを開くだけでOKです
  7. ruby-buildをインストール
    以下のコマンドを打ち込むだけです

    git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
  8. ruby 2.0.0-p353 をインストール
    以下のコマンドを打ちこんでください

     rbenv install 2.0.0-p353

    しばらく待ってインストールが完了したら以下のコマンドを打ち込んでください

     rbenv global 2.0.0-p353
  9. インストール手順は以上です

Windowsの人

僕はWindowsで開発しないのであまり詳しくありませんが、RubyInstallerというソフトを使うと簡単にインストールできるようです。

使い方

まずは適当なフォルダを作っておくといいと思います。
特にこだわりがなければデスクトップにdevというフォルダを作ってください

スクリーンショット 2014-01-07 17.46.57

 

次にテキストエディタでプログラムを書きたいのですが、MacならTextmateがおすすめです。windowsならTerapadとかでしょうか。
人気のエディタにSublimetext(Mac、Windows両対応)というのがありますが有料なので1ヶ月くらい経つと使えなくなるようです。

エディタが用意できたら以下のようにコードを書いてhello.rbという名前で保存しましょう。

p 'Hello World'

保存できたらターミナルを起動して以下のコマンドを打ち込んでください。

ruby Desktop/dev/hello.rb

“Hello World” という文字が表示されたと思います。

これはプログラムの最初の一歩として定番の儀式のようなもので、Hello Worldに特に意味はありませんが簡単に動作を確認できたと思います。

使い方は以上です。拡張子 .rb というテキストファイルにコードを書き、ruby コマンドに続けてコードファイルの場所をターミナルに打ち込めばrubyプログラムが動作します。

まとめ

お使いのコンピューターでrubyは動いたでしょうか?
プログラミングはコンピューター1つでできる作業であまり場所や時間にとらわれないので意外なほど身近に感じられたのではないでしょうか。
まだHello Worldしかしていないので全然おもしろくないと思いますが。次回以降で先に触れた「生まれてから今日は何日目?」等のプログラミングを解説していきたいと思います。

標準
jpeg
Design

Photoshop スライスツールと画像形式を知るべし

Image by Earl

明けましておめでとうございます!
初詣で大吉を引いて幸先良さげな新人森田です。
本年も株式会社ハレノヒをよろしくお願いいたします。

それでは今日も元気に修行したいと思います。
2014年一発目はどのようなお題でしょうか?

[山形師匠のお言葉]
Photoshopでデザインカンプ(ページ全体のデザイン)や、画像パーツ等を作成したらブラウザで表示できるようにするためにスライスツールを使います。
ツールの使い方と書き出し画像形式の種類と特徴を学んでください。

[森田]
スライs…あ、はい!早速実践的な内容ですね!PhotoshopCS2を使い続けていた森田にとって最新版を勉強する良い機会でもあります。さくさくっとスライスしちゃいます!

Photoshopのスライスツールとは

と言いつつ、正直に申し上げますと実は私、過去1回くらいしかスライスツールに触ったことがありません。なのでまずアイコンを探すところから始めたいと思います。

140106-5
発見。メニューバーのここに隠れてました。
いかにもスライスしてくれそうな鋭い切先ですね。

そして今回スライスする元の画像がこちら。

140106-10

自社サイトに載せるブログ記事のリストです。
自分なりにハレノヒのイメージを絞り出して作ってみました。(入社して初の制作に緊張しまくりこれだけで既にヘトヘトという失態)

必要とされる画像は、右側の雲の画像とアイキャッチ画像を入れなかった場合のデフォルトアイコンです。(下図参照)

140106-10b

まず雲の画像に狙いを定めます。

140106-12

画像のぎりぎりのところにガイドラインを引き、スナップを頼りに範囲選択。アイコンも同様に選択します。

140106-8b

このようにスライス範囲が確定されました。
範囲表示が邪魔という時は表示タブからオンオフ出来ます。

ここまでくればスライスマスターまであと一息!
ファイルタブから[web用に保存]を選択し、最適な画像形式で保存します。

130106-2

画面左のスライスツールマークで切り出した画像を選択し、右側のファイル形式を選びます。今回は色数が少ないのでGIF形式で保存したいと思います。

はい!出来ました!
blog_slicetool_03  blog_slicetool_07

なーんだ思ってたより簡単じゃーん!

[山形師匠]
森田さん、これ片方だけ画像形式jpgになってるよ。

[森田]
はっはいぃ!すぐ直します!!

どうやら複数保存する場合はそれぞれ選択して保存形式を選ばないといけないようです(私は1つGIFにして満足してました)。
作業終了まで気を抜いてはいけません。
最後に保存形式についてまとめてみます。

Web用に保存
[jpg]

最も一般的な、写真などによく使用される画像形式です。
圧縮の際に多少の劣化を伴いますが、比較的きれいに保存できます。赤が弱点です。

[gif]

カラーパレットの256色で頑張る保存形式です。小さいアイコンや簡単な動画におすすめ。頑張りすぎるとドット絵みたいになります。

[png]

windowsでスクリーンショットを撮ってペーストしてみるとすごい奇麗だったりする時の保存形式です。個人的すぎました。GIF形式より透明色の扱いが得意で、劣化せずきれいに保存が出来ます。でもファイルサイズにご用心。

まとめ

一枚の画像をスライスツールで切り出して保存することで作業効率が大幅アップ!webデザイナーとしては初歩中の初歩的ツールでした。こういうのを覚えると沢山使ってみたくなりますね。森田はこれから一体何枚の画像をスライスしていくのか、途方もないことを考えつつ今回の修行はここまでです。押忍!

標準