ドキュメントを調べるのにDashが便利

20130920 0

この仕事しているとよく「あれ、なんだっけ…」を調べるのに、いつもいつもブックマークに入れてあるオンラインドキュメントのサイトを見ては調べるって事があるわけですが…

Dashがこういう場合便利です(^^v

http://kapeli.com/dash

Herokuの始め方

Herokuの始め方

20130915 0

Herokuってなに?

Heroku(ヘロク)とは、サイトにアクセスするとタイトルにも「Cloud Application Platform」(「クラウド アプリケーション プラットフォーム」)と書かれているようにRuby(Rails〜Sinatra)を始めとしてNode.jsPythonJavaを使うことのできる PaaS (Platform as a Service)の一つです。

Herokuの料金

Herokuの利用料金は Dynos というHeroku独自の単位によって決められた転送量などによって算出される価格とデータベース、アドオンの価格によって利用料金が決められます(と言っても勝手に金額が増やされるようなことはないです)。

また、 1Dynosまでは無料 で利用できるので、RailsやSinatraの勉強用のPaasとしても使い勝手のいいサービスです。

Herokuへの登録方法

Herokuへの登録は以下の様な流れになります。

  1. Herokuにアクセスする
  2. Sign up for freeに進みメールアドレスを登録する
  3. Heroku Toolbeltをインストールする

2.のステップでメールアドレスを登録すると、登録メールアドレスに確認のメールが届くので、メール内に書かれたリンクをクリックしてHerokuに進んで下さい。

20130915 1

登録が完了すると heroku dashboard にアクセスできるようになります。いくつかサイトを制作してあるとこんな感じで自分が管理しているサイトのリストがずらっと並びます。

20130915 2

また、画面上部のメニューからはHerokuに関する様々な操作をおこなうことができます。

20130915 3

Heroku Toolbeltを使いましょう

20130915 4

Herokuにアプリケーションを制作したりなどの操作は先のダッシュボードからもできますが、基本操作は Heroku Toolbelt を使うことをオススメします。先ほどの3.の操作でHeroku Toolbeltをインストールしたら、まずは以下のコマンド「heroku login」を実行してください。

heroku login」を実行すると、Herokuに登録したメールアドレスとパスワードが聞かれてきます。あとは公開鍵を制作して保存します。

Heroku Toolbeltでアプリケーション制作

Heroku上にアプリケーションを制作するには「heroku create」コマンドを利用します。このコマンドを実行することでアプリケーションが制作されます(このサンプルでは実行後に「http://stark-fog-398.herokuapp.com/」というアプリケーションが制作されています)。

実行した後ダッシュボードを見ると追加したアプリケーションが一覧の中に加わっていることを確認してください。

このあとはファイルをHerokuへの転送ですが、以降はGITを利用してファイルを転送する流れになっていきますので別記事で紹介していきます。

明日の勉強会 特別編「Rails勉強会」★沖縄Ruby勉強会 Ryukyu Rubyist Rookies(Ryukyu.rb) ではこのへんもやっていく予定ですので参加者の皆さん楽しみにしててねー(^^v

HerokuではじめるRailsプログラミング入門
掌田 津耶乃
ソフトバンククリエイティブ
売り上げランキング: 64,711
Heroku: Up and Running
Heroku: Up and Running
posted with amazlet at 13.09.15
Neil Middleton Richard Schneeman
Oreilly & Associates Inc
売り上げランキング: 47,972
Professional Heroku Programming (Wrox Programmer to Programmer)
Chris Kemp Brad Gyger
Wrox
売り上げランキング: 140,376

WordPressテーマの制作の流れ PART.1

WordPressテーマの制作の流れ PART.1

20130911 1

WordPressをCMSとして採用する場面は、弊社(株式会社wEVA)でも多い方です。積極的な更新が必要なサイトであったり…サイトの運営形態にもあわせて選択するように心がけていますがそれでも資料の多さやカスタマイズのしやすさからもWordPressを採用する場面は結構多いのではないかと思います。

WordPressのオリジナルテーマの制作方法は他のサイトや書籍でもいろいろと紹介されているので、ここであらためて書く必要もないように思いましたが、聞かれることも多いのでまとめてみます。

WordPressのインストール

まず、ここから先の記事はWordPressがインストールされていることを前提に解説します。レンタルサーバーでも構いませんがローカルのマシンにWordPressをインストールしておくと、その都度FTPする必要もありませんし、使っては壊して…という感じでいくらでも実験もできるので是非インストールをオススメします。

  • XAMPPやMAMPの環境をつくる
  • WordPressを解凍し、Webサーバーのサイトフォルダにコピーする
  • WordPressを解凍してコピーしたフォルダをブラウザで開く
  • 完了!!(笑)

インストールの説明についてはさらっと(^^;

WordPressオリジナルテーマの制作

WordPressのオリジナルテーマの制作は以下の様な流れでおこないます。

  1. まずはワイヤーフレームを制作する
  2. HTMLとCSSでサイトデザインする
  3. style.cssを制作する
  4. 各パーツに分解する
  5. 確認

まずは、上記の順番に沿って説明していきます。

WordPressの管理画面の枠の中にコピペしている方を見かけますが、自分の場合は「wp-content」の下の「themes」フォルダにFTPするようにしています。

まずはワイヤーフレームを制作する

まずは通常のサイトを制作するのと同様にワイヤーフレームを制作します。ここで書かれたワイヤーフレームはこの後もページを分解してパーツにした時などの設計図にもなるので重要です。ページのヘッダはどこからどこまでなのか?サイドバーはどうするか?フッタもどこからどこまでなのか?…この他にも共通してサイト内で利用される部品化のできる部分はどこなのかを明確にしましょう。

HTMLとCSSでサイトデザインする

ワイヤーフレーム(モックアップ)に従ってコーディングを始めます。この時点ではWordPressはそんなに意識せず、出来上がったフHTMLファイルをブラウザでチェックするなど、一般のサイトを作る時と同じ流れでHTMLファイルとCSSファイルを制作します。

また、CSSについては次で制作する「style.css」に内容を書き足しても構いませんし、「style.css」から「@import url('stylesheets/style.css');」のように外部ファイルとして読み込んでも構いません(弊社の場合は管理上楽なので後者の外部ファイル形式でやっています)

style.cssを制作する

テーマを入れるフォルダに必ず必要な「style.css」を制作します。このファイルには一番最初に以下のような記述が必要です。ここに書かれた内容をWordPressは判断し、このフォルダの中身がテーマファイル一式だと認識します(同時にscreenshot.pngも作っておきます)。

各パーツに分解する

WordPressのテンプレートファイルで一番最初に読み込まれるファイルは「index.php」です。このファイルをざっくり書くと以下の様な構成になっています。いきなりPHPが書かれているのでびっくりする方もいるかもしれませんが、ここで書かれているPHPのコードはそれぞれ「header.phpを読み込む」、「sidebar.phpを読み込む」、「footer.phpを読み込む」とだけ書かれています。

まずは、さっき制作したHTMLファイルをワイヤーフレームを参考にしながらヘッダ、フッタ、必要ならばサイドバーに分割します。

分割したファイルはそれぞれ「header.php」、「footer.php」、「sidebar.php」と名前をつけて保存します。

上のコードを参考にしての「index.php」も制作しておきます。この時点ではメインの記事の部分はダミーのテキストのままでも空っぽでも構いません。

ここで一旦、制作出来たファイルを全てローカルの「wp-content」の下の「themes」フォルダ配下にテーマ専用のフォルダをつくって保存し、WordPressの管理画面から「外観」→「テーマ」を開いてみましょう。ここまでの流れがうまくできていれば「利用可能なテーマ」の中に先ほど保存したscreenshot.pngと、テーマの情報が表示されているはずです。

試しにそのテーマを「有効化」してページを開いてみましょう。

記事はダミーか何もないけれども、サイトが表示されているのは確認できましたか?

次回に続きます

今回はここまでですが、次回はここで制作したトップページに記事を読み込んで表示する部分を説明していこうと思います。

※こうしてテンプレートのつくり方をあらためて書き上げておきましたが、実際の現場で必要とされているWordPressの説明は全く違うものなので、いつか機会を設けて解説する機会があればと思います。

基礎からのWordPress (BASIC LESSON For Web Engineers)
高橋 のり
ソフトバンククリエイティブ
売り上げランキング: 7,396
【Amazon.co.jp限定特典付き】本格ビジネスサイトを作りながら学ぶ WordPressの教科書2  スマートフォン対応サイト編
プライム・ストラテジー株式会社
ソフトバンククリエイティブ
売り上げランキング: 755
プロが選ぶ WordPress優良プラグイン事典
相原 知栄子 一戸 健宏 鳥山 優子 西川 伸一 服部 久純 星野 邦敏 松田 千尋 吉澤 富美 大串 肇 大島 義裕 大曲 仁 北村 崇 小島 勝茂 後藤 賢司 染谷 昌利 高野 直子 高橋 文樹
エムディエヌコーポレーション
売り上げランキング: 65,169

【Rails】テーブルへのカラムの追加方法

テーブルにカラムを追加するには?

Railsで開発中にクライアントから「この項目も加えて欲しいんだけど」…よくありますよね(^^;

こういう時は「add_column」(remove_column)を使うことになりますが、これはターミナルで以下のように打ちます。

AddColumnToTable」の部分を詳しく書くと…この通りに打つという訳じゃないので注意しましょう

正確には

Addカラム名To追加したいテーブル名

です。

例えば「Usersテーブルに性別をsexで加えて欲しい」と言われた場合の記述方法は以下のようになります。

すると、こんな風にマイグレーションファイルができあがります

あれ?カラムの追加は?

そう、カラムの型などがちゃんと指定されていないので、このままだと中身が空っぽのマイグレーションファイルができるだけです。

更に型もきちんと記述しておきましょう

これでようやく中身も入ったマイグレーションファイルが完成します

出来上がったマイグレーションファイルを「rake db:migrate」で実行することでデータベースのテーブルにカラムを追加できます。

RailsによるアジャイルWebアプリケーション開発 第4版
Sam Ruby Dave Thomas David Heinemeier Hansson
オーム社
売り上げランキング: 10,042
RailsとiPhoneではじめるアプリケーション開発
栗田 由菜
インプレスジャパン
売り上げランキング: 14,449
Rails3レシピブック 190の技
高橋 征義 松田 明 諸橋 恭介
ソフトバンククリエイティブ
売り上げランキング: 87,762

iPhone5S、iPhone5Cが発表になりました

20130911 0

昨夜発表になったiPhone5SiPhone5Cアップルのサイトはこちら)。前々から言われていた廉価版の5Cと、5の後継機となる5Sが発表され、9/20に発売になるそうです(iOSは9/18公開)。

今回のiPhone5SからはDoCoMoもiPhoneを取り扱うことになったそうで…9/13から予約受付を開始する模様…

これからAndroidはどうなるんだろう?

と、iPhoneユーザーなのにこのiPhoneの一人勝ち状態を気持ち悪く感じてしまう自分でした。

5から5Sへの進化も「もっと!!」と期待してましたが、うん…

でも、そろそろ「いつまでも4S」じゃいられないので、今回5Sにするだろうとは思いますが、もう少し「おお!!」と驚く何かが欲しかったなぁとも思いなんとなくモヤモヤしているのでした。

サイトのスマフォ対応

このところ「サイトのスマフォ対応」は、ほぼ「当たり前」におこなう必要が出てきています。ウチ(wEVA)でも、対応を頑張って進めている最中です。

スマフォの普及率が増えれば増えるほど、サイトはパソコンで見るだけではないんだという状況へのシフトが更に加速していくことになりますね。

HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
谷拓樹
ラトルズ
売り上げランキング: 75,573
スマートフォンサイトデザインブック 仕事で絶対に使うプロのテクニック
株式会社アジタス
エムディエヌコーポレーション
売り上げランキング: 99,614
実例200に学ぶスマートフォンサイトデザインのアイデア帳
インプレスジャパン (2013-03-25)
売り上げランキング: 12,301

Sinatra自動リロードをsinatra-contribで有効にする

Sinatra自動リロードをsinatra-contribで有効にする

Sinatraいじっていて面倒なのはコードを書き換えるたびにSinatraを停止→再起動させなければならない点ですね…「sinatra-contrib」を入れることで、これも改善できます。

sinatra-contribをインストールしよう

以下のコマンドを実行するだけです

詳しいドキュメントはSinatra::Contribにあるので、こちらを参考にしてください。

インストールできたらコードの最初に「require "sinatra/reloader" if development?」を追加します。

クラシック形式

モジュール形式

これだけです!!

簡単でしょ(^^v

Sinatra Documentation

Sinatra: Up and Running
Sinatra: Up and Running
posted with amazlet at 13.09.09
O’Reilly Media (2011-11-21)
パーフェクトRuby (PERFECT SERIES 6)
Rubyサポーターズ すがわら まさのり 寺田 玄太郎 三村 益隆 近藤 宇智朗 橋立 友宏 関口 亮一
技術評論社
売り上げランキング: 2,436

Sinartaでフォームからデータを受け取る方法

Sinartaでフォームからデータを受け取る方法

20130909 1

今朝の記事では、ここまでの紹介でしたが…せっかくなのでフォームから文字を受け取るところまでも解説していきます。

Sinatraでは通常のWebアプリケーションと同様にGETとPOSTでユーザーがフォーム等から送信したデータを受け取ることができます。

GETで受け取る場合

GETで受け取る場合のコードは以下のようになります

このコードを記述してruby xxxx.rbと実行し「http://localhost:4567/hello/Tanabe」にアクセスすると、SinatraはTanabeの部分をGETで受け取り、params[:name]に格納します。

POSTで受け取る場合

POSTの場合はフォームも一緒に書いたのでコードが一気にちょっと長くなってしまいましたが…GETの時と同様に「params[:name]」で受け取ることができます。

Sinatraでの値の受け渡しは結構シンプルです。小さめのアプリを作るときなど参考になるかと思いますので、これからも更新を楽しみにしていてくださいね。

Sinatra Documentation

Sinatra: Up and Running
Sinatra: Up and Running
posted with amazlet at 13.09.09
O’Reilly Media (2011-11-21)
パーフェクトRuby (PERFECT SERIES 6)
Rubyサポーターズ すがわら まさのり 寺田 玄太郎 三村 益隆 近藤 宇智朗 橋立 友宏 関口 亮一
技術評論社
売り上げランキング: 2,436