このページでは、HAIKのオリジナルテーマを作成するために
必要な環境と基本的な知識について解説します。

なお、プログラマーの開発環境は日進月歩で進化しているので、
自分のやりやすい環境を作れる人はご自由に!

HTML、CSS(SASS)、Bootstrapの知識

HTML,CSSの基礎を学ぶには。

HTML、CSS、Bootstrapについては、とりあえず一通り知っているものとして話を進めてしまいます。

もし「全く知らない。これから勉強する」という場合は、
ドットインストールがオススメです。
動画で基本的なことを学べます。

ドットインストールのスクリーンショット


Bootstrapデザインを知る(任意)

HAIKデザインは、Bootstrapというデザインを読み込んでいます。
そのBootstrapデザインに上書きする形で、HAIKテーマの CSSを読み込みます。

そのため、ベースのデザインであるBootstrapを理解していることが
開発する上で必要になってきます。

&show(): The style ref(filename,pagename) is ambiguous and become obsolete. Please try ref(pagename/filename);

*BootstrapはHAIKテーマを開発しながら、ソースを見ながら覚えていけばいいので事前に知っている必要はありません。
*HAIKテーマで、Bootstrapを読み込まない設定も可能ですが、プラグインの表示・動作にBootstrapが利用されていることがあるので、読み込まない時の挙動をテストするのが、やや大変。

開発環境=MAMP(マンプ)

開発環境のパソコンは、Mac、WindowsどちらでもOK。
筆者はMacを使っています。

PC内でWEBサーバーを起動することができるソフトMAMPをPCにインストールしましょう。

HAIKは、WEBサーバー上で動作するシステムです。ゆえにHAIKシステムファイルをPC内にダウンロードしても、そのままでは動きません。

テーマ制作をする場合は、PC内で動作させ、開発を行っていきますので、PC内でHAIKが動作できるようにする必要があります。

MAMPのダウンロードはこちら

MAMPスクリーンショット

簡易的な開発環境を構築するなら!

Macを使っている方は、Terminalを起動して、

  1. フォルダに移動
    cd HAIKを入れているフォルダに移動
  2. 仮想サーバーでPHPを起動
    php -S localhost:8000 &

以上の操作後、ブラウザで http://localhost:8000/ にアクセスすると、HAIKシステムを表示できます。

* バックグラウンドで起動しているプログラムを終了する方法

  1. バックグラウンドで立ち上がっているプログラムの確認
    jobs
  2. バックグラウンドのジョブを終了
    kill %1 //job番号は上記で確認した順番に準じる

テーマファイルを作成、編集するためのソフト

テーマファイルはPHPファイル、CSSファイル、HTMLファイル、javascriptファイルの4種類のテキストファイルを編集する必要があります。

PCにあらかじめ同梱されているテキストエディタでも何とかなるっぽいのですが、専用のテキストエディタを使う方が、エラーもなく、効率も良いです。

以下、オススメのテキストエディタを紹介します。

Coda 2(Mac専用ソフト)

https://panic.com/jp/
こちらが個人的には使いやすいです。
新型MacBook ProのTouch Barもサポートしてます。
Codaには2種類ありまして、

  • Coda2はMac用(9,800円)
  • Coda for iOSは、iPadとiPhone用(3,000円)

合計 12,800円です。仕事で使うソフトとして考えたら優しい価格かと。

Coda 2は 提供元サイトでの直販のみ。
Coda for iOSはiTunesストアで購入できます。
Codaシリーズの良いところは、無料で使える「Panic Sync」というサービスによって、MacとiPhone、iPadにインストールしているソフト(アプリ)を同期してくれるところですね。デスクワークはMac版Coda2で、出先ではiPadで編集...ということも可能。

https://itunes.apple.com/jp/app/coda/id500906297?mt=8

Coda2のスクリーンショット

Atom(Mac、Windows対応)

https://atom.io/
Github製のテキストエディタで近年とても人気。
完全無料で使える高機能エディタです。

ばりばりのプログラマーに「無料のテキストエディタで良いのない?」って聞いたら、必ずといって良いほど「Atomがいいじゃない?」と返事あるほど。

使い方もいろいろなブログで紹介されています。
初心者にはちょっと難しいかもしれませんが、まずはインストールして試してみましょう。

Atomスクリーンショット

Sublime Text 3(Mac、Windows対応)

https://www.sublimetext.com/3
こちらも有名なテキストエディタ。
無料試用版がありますが、製品版は70ドルです。

2016年9月から更新がないみたいですが、
まぁ安定的なソフトだからこそ、
バージョンアップも頻繁ではないと考えて良さそうです。

Sublime Text 3スクリーンショット

HAIK本体&ベーステーマ

HAIK本体は、Githubというサイトからダウンロードできます。
*Githubとは、簡単にいうとプログラムコードを共有、公開するためのサービスです。

以下の手順でPC上でHAIKを表示させます。
事前に、MAMPインストールし起動しておきましょう。

  1. HAIKをダウンロードする
  2. MAMPのパブリックフォルダ内に解凍したフォルダを入れる
  3. ブラウザでアクセスし、HAIKを表示

Githubのスクリーンショット

1. HAIKをダウンロード

  1. こちらのページにアクセスして、Clone or Downloadというボタンをクリック
    https://github.com/open-qhm/qhm
  2. Download ZIP という部分をクリック
  3. PC内の任意のフォルダ内を選択してダウンロードしてましょう
  4. qhm-master.zipというファイルを保存できたらOKです

2. MAMPのパブリックフォルダ内に入れる

  1. qhm-master.zipをダブルクリックで解凍
  2. qhm-masterというフォルダが表示され、フォルダ内に様々なファイル・フォルダがあります
  3. qhm-masterフォルダごとMAMPのパブリックフォルダ内に入れましょう

HAIKのファイル構成

ブラウザでアクセスし、HAIKを表示

  1. 任意のブラウザ(Google Chromeがオススメ)を起動します
  2. アドレスバーに、MAMPのルートURLを入力し、ルート画面を表示します
     例:http://localhost:8888/
  3. qhm-masterというリンクをクリックしてHAIKにアクセスします
     例:http://localhost:8888/qhm-master/
  4. HAIKによるウェブサイトが初期状態で表示されます

MAMPのルート画面