Middlemanで静的サイト制作

20131008 0

以前書いた「Middlemanで静的サイト制作」の記事の続きです

Middlemanのインストール

gem install middleman

新規サイトの制作

middleman init my_new_project

これを実行した時点ではmy_new_projectフォルダ以下にいくつかのファイルとsourceフォルダが生成されます。サイトの制作作業はsourceフォルダ内でおこないます。

config.rb

サイトの設定情報が記録されています。初期値は以下の様な構成になっています。ほとんどがコメントアウトされていますが、スタイルシートや画像、javascriptの保存場所もここで指定します。

サーバーの起動

middleman server

このコマンドを実行すると開発用のサーバーが起動します。http://0.0.0.0:4567にアクセスすることでサイトを見ることができます。config.rbにactivate :livereloadと追記しておくと、ファイルが更新された時に一緒にブラウザも再読み込みしてくれるので便利です。

ファイルの生成

middleman build

sourceフォルダの中身を元にhtmlを生成します。生成したファイルはbuildフォルダに配置されます。

ファイルのデプロイ

middleman deploy

buildフォルダの中身を設定された場所にデプロイします。

middleman deployでftp

middleman-deployを利用することでサイトのデプロイ時にサーバーにできあがったファイルをFTPすることができます

middleman deploy

サーバーの情報はconfig.rbに以下のように追記します。

middleman-deploy

Middlemanで静的サイト制作

パーフェクトRuby (PERFECT SERIES 6)
Rubyサポーターズ すがわら まさのり 寺田 玄太郎 三村 益隆 近藤 宇智朗 橋立 友宏 関口 亮一
技術評論社
売り上げランキング: 7,652
Webデザインの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-3)
デザインラボ編集部
ソフトバンククリエイティブ
売り上げランキング: 9,223
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
インプレスジャパン (2013-10-02)
売り上げランキング: 1,700

Markdownの使い方

20131004 0

Markdownの使い方

先日「Markdown使っていますか?」という記事を書いたまま続きをなかなか書くことができませんでしたが、株式会社wEVAのインターンシップ(OJT)メンバーのうちの今月からの新メンバーが諸事情で日報ブログをはてなブログにしたこともあり「ちゃんと説明する機会を設けなきゃ!!}というわけで、今回は再度Markdownについて書いていきます。

Markdownとは?

Markdown は、文書を記述するための軽量マークアップ言語のひとつである。「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、ジョン・グル―バー(John Gruber)により作成された。アーロン・スワーツ(Aaron Swartz)も大きな貢献をしている。[1] Markdownの記法の多くは、電子メールにおいてプレーンテキストを装飾する際の慣習から着想を得ている。

Markdown – ウィキペディア – Wikipedia

パソコンを使ってブログやつぶやきなど何かを書くというアクションが当たり前の世界になってきました。そして、文章も長い文章などを書く必要がある…というケースも多くあるようになりました。

Markdownを使うと長い文章が簡単に書けるようになる!! 」ということはありませんが、見出し、本文などをわかりやすく明記していく癖をつけることで「文章の全体構造を見やすくなり、書きやすくなる」という効果はあるんじゃないかと個人的には思っています。

見出し

# を行頭に記述することで見出しを指定することができます。見出しはH1〜H6までの6種類の見出しをつくることができ、#の個数で表現します


見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

段落

改行で囲まれた文章のブロックは段落をあらわします。

改行

文章の末尾に半角スペースを2個以上入れると改行になります。

装飾

文字の装飾については以下のような書式になります

強調

文字の前後を 「** 文字 **」 と言う具合に 2つのアスタリスクで囲むと、囲まれた文字は強調 として表示されます

イタリック

アスタリスクが1個の場合はイタリック体になります

打ち消し線

\~\~ で囲まれた文字は打ち消しになります。「打ち消し

リスト

行頭に「-」「+」「*」のどれかを書くとリストになります。行頭に空白を入れて記号を別のものに切り替えることでインデントをつくることができます

  • 項目1
    • 項目2
  • 項目3

行頭に数字と.を記述すると数字型のリストになります

  1. 項目1
  2. 項目2
  3. 項目3
引用

引用を記述する時は行頭に「>」をおきます

水平線

「—」「***」「___」などの3つ以上の記号行は水平線をあらわします


リンク

「[テキスト](URL)」と書くことでリンクになります

画像

「!テキスト」と書くとURLで指定された画像ファイルを表示することができます

コード 

“`で囲まれたブロックはコードとして扱われます

puts "Hello World"

参考

Instant Markdown
Instant Markdown
posted with amazlet at 13.10.04
Packt Publishing (2013-08-26)
Markdown und Pandoc
Markdown und Pandoc
posted with amazlet at 13.10.04
ebooks.kofler (2013-05-20)

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

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

Middlemanで静的サイト制作

20130905 0

Jekyllで静的サイト制作」の記事を書いて以来、「もっと簡単に効率よくサイトを制作していく方法はないか?」といろいろ考えていたところ・・・「そういえばMiddlemanってのもあった!!」と思い、早速サイトをじっくりと見ています。

gem install middleman

で、インストールはできるということで…結構簡単そうですね。

サイトのひな形制作は

middleman init my_new_project

でできます。このひな形を編集していくことでサイトを作りこんでいくようになるようです。テンプレートの中ではerbでrubyのコードも使えるようだしいろいろと遊べそうですね。

Middleman

ReVIEWで電子書籍を出版!

20130903

wEVAでは電子書籍の出版も試験的に業務の中でおこなっています。ただ、電子書籍の出版のツールとしてメインに「これを使う!!」というものがなく、「Sigil」を使ってみたり「InDesign」を使ってみたり…「Word」を使ってみたり…と試行錯誤している状態ですが、ここ暫くの間に外部からも電子書籍の出版についての話が持ち込まれるようになり、「本格的にどのツールを使おうか?」と迷っている最中です。

そんな中「1つのソースでEPUBとPDFを生成できる「ReVIEW」を試す」という記事を発見し、「これも良さそう!!」と、ReVIEWについて記事を読み漁っているところです。

ReVIEWクイックスタートガイド
ReVIEW フォーマット

いろいろと面白そうなスライドもいっぱいある「ReVIEW」…電子書籍出版のツールとして良さそうですよね。

Markdownからの変換も「Pandoc」でできるようなので、いつか試してみようかと思います。

### Maliqも面白そう!!

他にも「RubyによるMarkdownをベースにしたEPUB電子書籍の作り方と出版のお知らせ」という記事を見つけました。これも面白そうですね。

サルでもわかる電子出版
株式会社wEVA (2013-03-15)
売り上げランキング: 35,119
すぐにわかる! 電子出版スタートアップガイド (マイコミムック) (MYCOMムック)
+DESIGNING編集部
毎日コミュニケーションズ (2010-08-20)
売り上げランキング: 393,175
EPUB 3 電子書籍制作の教科書
林 拓也
技術評論社
売り上げランキング: 177,640

グループでのタスク管理にはTrelloがオススメ!

20130828 0

Trello使っていますか?

株式会社wEVAの社内ではサイト制作など、様々な案件のプロジェクト管理に Trello を利用しています(2013/08/28現在)。実際には半年ほど前までは Pivotal Tracker を利用してきていました、その後から Fulcrum に浮気をして Trello に移りました。

Pivotal Tracker は「高機能すぎて使わない機能が多すぎた。」というのが使わなくなってしまった大きな理由の一つで、個人的には気に入っていた面もあったのですが、最終的には「無料で使える範囲が Trello のほうが大きい」という理由だけで引っ越してきました。

タスク管理は重要

先日「 SCRUM BOOTCAMP 」をおこなってみた弊社です。タスクの共有も重要だと考えて、 Trello 利用に更に力を入れていくことになります!!

Trello