Horic Design

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

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

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



「HTML、CSSの共有サービスを作りました。」の続きを読む

Chromeの拡張アプリでgulpfile-generatorを作りました。

Chromeの拡張アプリを作りました。今回作った拡張アプリはgulpfile generatorです。
gulpの初心者の方やよくgulpfileの設定を忘れてしまう方。GUIがお好きな方におすすめです。


上のリンクのGoogle WebStoregulpfile generatorを図のようにインストールしてください。



インストールして頂くと、Chromeのツールバーの右上にgulpのアイコンが追加されるはずなのでそれをクリックしてください。



すると下の図のような画面に遷移します。


その後、CSSやJavaScriptなどで、「圧縮するかしないか」、「オートプリフィクサー」を使用するかしないかなどの設定をします。
最後に下の図のようにソースが表示されている右の画面の上にある「パッケージをダウンロード」をクリックしていただくと、package.jsongulpfile.jsが梱包されたzipファイルがダウンロード出来ます。


レビューやコメントがあれば...

下のリンクにコメントをください。お願いします。



Sublime Textでちょっとしたパッケージを作ってみよう。

Sublime Text Advent Calendar 2014の21日目の記事になります。
今回はコマンドのgulp watchを実行するだけの簡単なパッケージを作ってみようというエントリーです。
以下のような手順で話を進めていきます

  1. パッケージフォルダにフォルダを作成
  2. gulp.pyの編集
  3. キーバインディングに作ったコードを割り当てよう
  4. 実行

1. パッケージフォルダにフォルダを作成

下のように、Sublime Textのメニューから、Preferences >> Browse Packagesを選択し、パッケージフォルダを開きます。
その中に、gulpというフォルダを作成しましょう。


フォルダを作成したら、その中にgulp.pyというpythonファイルを作ってください


2. gulp.pyの編集

先ほど作成した、gulp.pyに以下のようなソースを入力し保存してください。

import sublime, sublime_plugin
class rungulp(sublime_plugin.TextCommand):
   def run(self, edit):
      self.view.window().run_command('exec', {'cmd': ["gulp","watch"],"path" : "/usr/local/bin"})

3. キーバインディングに作ったコードを割り当てよう

まずは下のように、Sublime TextのメニューからpreferencesKey Bindings - Userを選択してください


そして下記のように記述しましょう。
このとき、commandにはgulp.pyで定義したクラス名を記述してください。

[
	{ "keys": ["ctrl+g"], "command": "rungulp"},
]

4. 実行

ctrl + ggulp watchが実行されるかと思います。
明日は、@hrksaikiさんです。宜しくお願いします。


ローカルのZipファイルもNettuts+ Fetchで展開

Sublime Text Advent Calendar 2014の21日目の記事になります。今回はよくSublime Textのプラグインとして紹介される、Nettuts+ Fetchの自分なりの使い方を紹介したいと思います。

Nettus + Fetchとは

まず、Nettus + Fetchとはなにかということからふれておきます。Nettus + Fetchとは、ファイルやパッケージなどを下のように設定しておくと、簡単にファイルやパッケージをサーバーなどから落として作業中のフォルダに展開してくれるプラグインです。


ダウンロード方法

cmd+shift+Pからinstallと入力し、下の項目をクリックしパッケージインストールを開きます

パッケージインストールを開いたらfetchと検索するとNettus + Fetchが見つかるはずです。それを選択してインストールしてください


私なりの使い方

Nettus + Fetchはサーバからパッケージをダウンロードしてくるだけではありません。
ローカルの環境のZipファイルだってパスさえあっていれば作業中のフォルダに展開してくれます。
普段同じ記述をしているHTMLファイルやCSSなどをテンプレート化しておきたい際に役に立ちます。
gulpなどのタスクランナーは、CSSを圧縮したり、ブラウザーをリロードさせたり、
大体は書くことが決まっていたりするのでテンプレート化しておくといいのではないでしょうか?

私の、Fetch.sublime-settings

{
	"files":
	{
		"Atlas.js": "https://raw.githubusercontent.com/steelydylan/Atlas.js/master/Atlas.js",
		"Bootstrap": "https://raw.githubusercontent.com/twbs/bootstrap/master/dist/js/bootstrap.js",
		"Bootstrap.css": "https://raw.githubusercontent.com/twbs/bootstrap/master/dist/css/bootstrap.css",
		"Bootstrap.min.js": "https://raw.githubusercontent.com/twbs/bootstrap/master/dist/js/bootstrap.min.js",
		"app.js": "file:///Users/daigo/Documents/package_install/app.js",
		"jquery": "http://code.jquery.com/jquery.min.js",
		"mean": "file:///Users/daigo/Documents/package_install/express_ejs.json"
	},
	"packages":
	{
		"Atlas.js": "https://github.com/steelydylan/Atlas.js/archive/master.zip",
		"Bootstrap": "https://github.com/twbs/bootstrap/releases/download/v3.3.1/bootstrap-3.3.1-dist.zip",
		"a-blog cms": "http://ablogc.ms/129NDpL",
		"callisto": "https://github.com/steelydylan/Callisto/archive/master.zip",
		"gulp": "file:///Users/daigo/Documents/package_install/taskrunner/アーカイブ.zip",
		"html5_boilerplate": "https://github.com/h5bp/html5-boilerplate/zipball/master",
		"mean": "file:///Users/daigo/Documents/package_install/node/アーカイブ.zip"
	}
}

"file:///Users/daigo/Documents/package_install/taskrunner/アーカイブ.zipに注目してください。html://ではなく、file:///からパスを記述することでネット上ではなく自分のローカル環境にあるzipファイルを持ってきて展開することが出来ます。
gulpなどのタスクランナーをローカル環境で作っておけば、開発が効率化できますね。
下が、私が実際にローカルに置いているgulpのzipファイルの構成になります。


みなさんもローカルにテンプレートを作ってNettus + Fetchでフェッチしてみてはいかがでしょうか?
明日は、@hrksaikiさんです。宜しくお願いします。


acmsUtilKitを使ってみてください。

先日、a-blog cms Training Camp 2014 Autumnのイベントで発表させていただいたアプリなのですが、ブログに少し取り上げただけでしたので、今回全面的に告知したいと思います。

acmsUtilKitとは

合宿で発表するネタとして僕が用意したnode-webkit製のアプリです。カスタムフィールドやカスタムユニットの生成。スタイルガイドやスニペットの閲覧が可能です。自分の場合はスニペットを利用する際やカスタムフィールドを生成する際に管理画面に移動する手間を省くために使用しています。

カスタムフィールド生成


カスタムユニット生成


スタイルガイド


スニペット


なにかバグを発見されましたら、コメントをしていただけると助かります。

ここからダウンロードできます。

ダウンロード

堀 悟大

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

エントリーリスト

カテゴリーリスト

タグクラウド