Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

HTML、CSSの共有サービスを作りました。

HTML, CSS の共有サービスを作りました。名付けて、Atomic Labです。ちょっとした、HTMLやCSSの目も程度に作ろうと思ったのですが色々アイデアが膨らんで気づけば結構機能を盛り込んでしまいました笑


コンセプト

Atomic Labはその名の通りAtomic Designという考え方をベースに作られたサービスです。すべてのパーツは4つのカテゴリーに分類されます。それぞれ、Atom, molucule, organism, templateです。Atomは一番原始的な部品で、他のカテゴリーに分類される部品をincludeできませんが、逆にtemplateはすべての部品をソース上でincludeすることができます。以下がその対応表になります。

MaterialAtomsMoluculesOrganismsTemplates
Atoms××××
Molucules×××
Organisms××
Templates×

使い方

使い方は自由ですが、一番ハードコアな使い方は、Atom, Molucule, Organism, Templateをしっかり作り込んで、それを他の人と共有する使い方です。今回はそれまでの流れを紹介します。

  1. コンポーネントの追加
  2. コンポーネントのコーディング、プレビュー
  3. コンポーネントの定義
  4. 他のコンポーネントから別のコンポーネントの読み込み

1. コンポーネントの追加

まず、HTMLとCSSをコーディングしていくためには、下記のように、「追加」ボタンを押してコンポーネントを追加してあげる必要があります。


すると、下のように、カテゴリーと名前を入力するためのモーダルウィンドウが出てくるので入力してください。カテゴリーの分類については前述の通りです。


2. コンポーネントのコーディング、プレビュー

コンポーネントを追加すると、下の画像のようにタブで、そのコンポーネントのCSSやHTMLを記述できます。またそのレンダリング結果はPreviewで確認できます。


ただし、Previewに表示したい内容は下のソースコードのようにpreviewのコメント文で括ってあげる必要があります。

<!-- preview -->
プレビューに表示したい内容
<!-- /preview -->

3. コンポーネントの定義

また、コンポーネントを他のコンポーネントからどのように利用するかを定義する事ができます。その際はtemplateのコメント文で下の図のように囲って定義します。

<!-- template -->
<label class="label">{text}</label>
<!-- /template -->

先ほど、定義したコンポーネントの名前が、例えばlabelである場合、以下のようなコメント文でそれを呼び出す事が出来ます。以下の例では、先ほど定義した、{text}の部分がラベルという文字に置換されます。

<!-- label text="ラベル" -->

実行結果

<label class="label">ラベル</label>

4. 他のコンポーネントから別のコンポーネントの読み込み

他のコンポーネントから別のコンポーネントを読み込んで使いたい時は、以下のようにimportを使います。カンマ区切りで複数のコンポーネントを読み込む事も可能です。

<!-- import="header,mainVisual,modulettes,footer,common" -->

ただし注意して頂きたいのは、冒頭でも述べましたが、自分より小さなカテゴリーのコンポーネントしか読み込めないという事です。例えば、moluculeはatomしか読み込めません。organisumはmoluculeとatomしか読み込めません。

記述例

<!-- import="header,mainVisual,modulettes,footer,common" -->

<!-- template -->
<!-- header title="steelaxe" button="contact" -->
<!-- mainVisual image="http://www.civillink.net/fsozaip/phote/fukei3l.jpg" text="steelaxe" -->
<h2 class="mod-title">Our Products</h2>
<div class="mod-clearfix">
<div class="mod-col-6">
    <!-- modulettes title="Can I Use bot" subtitle="You can check browser support on your slack without visiting caniuse website. " url="http://www.caniuse-bot.com/" -->
</div>
<div class="mod-col-6">
    <!-- modulettes title="gulp generator" subtitle="Recommendable for those who often forget how to write gulpfile or for those who like GUI like me!! " url="http://steelydylan.github.io/gulp-generator/"  -->
</div>
<div class="mod-col-6">
    <!-- modulettes title="Atomic Lab." subtitle="Atomic Lab is where you can make components based on Atomic design. " url="http://steelydylan.github.io/atomic-lab/" -->
</div>
<div class="mod-col-6">
    <!-- modulettes title="Atlas.js" subtitle="Simple JavaScript game engine" url="http://steelydylan.github.io/Atlas.js/" -->
</div>
</div>
<!-- footer text="&copy; steelaxe" -->
<!-- /template -->

<!-- preview -->
<!-- theme1 -->
<!-- /preview -->

実行結果


その他の機能

Atomic Labでは、HTMLとCSSをメモ代わりにサイトに書いておくことができます。また書いたソースコードを下の図のように他の人にURLでシェアすることも可能です。


また、マークアップに使用する、レンダリングエンジンは、ejs,jade,hamlから選択でき、CSSプリプロセッサも、scss, less, stylusから選択できるようになっています。


またグローバルナビより「Download」というメニューをクリックすることでここで制作した部品を一式ダウンロードすることができます。


さらに、Downloadしたときに添付されている、setting.jsonを下記のメニューよりアップロードすることで、以前ここで制作した内容が、Atomic Labに適応されます。


また、下の図のようにEditボタンを押して、表示されるdialogウィンドウより、マークダウンで、そのコンポーネントに対する説明も追記する事が出来ます。



堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド