Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
ブログの執筆環境を
タスクランナーで自動化してみる
NEZU.log
A.Nezu
自己紹介
ねづ
Webディレクター
フロントエンドエンジニア
A.Nezu
開発言語
PHP、Javascript(TypeScript)
経歴
・クライアントサイドのFEを2年ちょい
・今の会社を友人と創業して3年 ←いまここ
特徴
・180...
ブログデータ
NEZU.log
NEZUというオブジェクトのlogメソッド的な意味
アクセス
PV 30∼35万(月)
主な内容
海外情報、シェアハウス情報
バズった記事
『男だけでディズニーランドにいったらモテたお話』
2014/06/04 ...
ブログの執筆環境どうしてますか?
リッチエディタ? 外部エディタ?
僕はマークアップしてます
どういうこと?
ライティング
マークアップ
本番化
Evernoteにて記事タイトルと本文を執筆
記事をhtmlでマークアップ。
使用する画像のリサイズや圧縮。
画像をメディアにアップロード
HTMLをWordPressにコピペ
ローカル開発環...
普通にマークアップして…
書いた記事を
マークアップしつつ…
http://localhostにアクセス
ブラウザを更新して確認
WordPressにコピペ!
テキストでコピペ!
手間も多い…
HTMLファイルを毎回生成しなきゃいけない…
マークアップを確認のためにリロードするのが面倒…
画像のリサイズと圧縮に時間がとられる…
手間も多い…
そうだ、自動化しよう!
というわけで本題です
手間も多い…
タスクランナーを使って自動化します
タスクランナーとは…
Web制作における様々な処理「タスク」を自動化するツールのこと
様々な処理 タスク って何?
・htmlの文法チェック
・cssの圧縮、結合
・javascriptの文法チェック、結合、圧縮
・画像のリサイズ
・スプライト画像の生成
etc…
Webサイトやブログを開発する上で
面倒なルーティン作業ありませ...
拡張言語の管理もできる
HTML、CSS、Javascriptの拡張言語がたくさん登場しました
haml, sass, less, compass, CoffeeScript, TypeScript…
compass	
  watch	
  -­...
どんなツール?
gulp
node.jsでつくられた比較的ナウい
タスクランナーツール
ガルプ と読みます
インストールまで(簡単に)
1) node.jsのインストール
http://nodejs.orgからインストール
2) gulpのインストール
npm	
  install	
  -­‐g	
  gulp
3) gulpの初期実行
npm	
...
実際に実行するまでの流れ
1) 自動化したい処理のパッケージをインストール
npm	
  install	
  -­‐g	
  gulp-­‐cssmin
「自動化したい作業 + gulp 」で検索!
Ex :「gulp css 圧縮」
ブログ...
実際に実行するまでの流れ
2) 設定ファイル gulpfile.js をつくる
var gulp = require('gulp');
var resize = require('gulp-image-resize');
var liverelo...
gulpを実行するとどうなるの? - 1
フォルダに入れるだけで
自動で画像をリサイズ&圧縮!
gulpを実行するとどうなるの? - 2
HTMLファイルを更新すると…
自動でブラウザをリロード!
記事を書く時の手間が
HTMLファイルを毎回生成しなきゃいけない…
マークアップを確認のためにリロードするのが面倒…
画像のリサイズと圧縮に時間がとられる…
なくなるよ!
HTMLファイルを毎回生成しなきゃいけない…
マークアップを確認のためにリロードするのが面倒…
画像のリサイズと圧縮に時間がとられる…
デメリット
実装ハードルが高い
黒い画面(ターミナルなど)を利用するので、
CUIに慣れていない人にとっては難しい。
PCでしか書けない
スマホでブログを書いている方には使えない。
おわりに
ハードルは高いですが、ブログの執筆だけでなく、
WordPressのカスタマイズやWeb制作で活かせます!
「こんな機能、方法もあるよー」程度の紹介なので、
詳しく知りたい方はぜひ直接ご質問ください。
That's all for my presentation.
Thanks for your attention.
ご清聴ありがとうございました
Próxima SlideShare
Cargando en…5
×

ブログの執筆環境をタスクランナーで自動化してみる

849 visualizaciones

Publicado el

WordCamp7月東京のLT用です。

Publicado en: Tecnología
  • Sé el primero en comentar

ブログの執筆環境をタスクランナーで自動化してみる

  1. 1. ブログの執筆環境を タスクランナーで自動化してみる NEZU.log A.Nezu
  2. 2. 自己紹介 ねづ Webディレクター フロントエンドエンジニア A.Nezu 開発言語 PHP、Javascript(TypeScript) 経歴 ・クライアントサイドのFEを2年ちょい ・今の会社を友人と創業して3年 ←いまここ 特徴 ・180人くらいでシェアハウスに住んでます
  3. 3. ブログデータ NEZU.log NEZUというオブジェクトのlogメソッド的な意味 アクセス PV 30∼35万(月) 主な内容 海外情報、シェアハウス情報 バズった記事 『男だけでディズニーランドにいったらモテたお話』 2014/06/04 公開 ブログ環境 CMS : WordPress サーバ : さくらVPS(nginx + php + mysql) ソース : vagrant + git
  4. 4. ブログの執筆環境どうしてますか?
  5. 5. リッチエディタ? 外部エディタ?
  6. 6. 僕はマークアップしてます
  7. 7. どういうこと? ライティング マークアップ 本番化 Evernoteにて記事タイトルと本文を執筆 記事をhtmlでマークアップ。 使用する画像のリサイズや圧縮。 画像をメディアにアップロード HTMLをWordPressにコピペ ローカル開発環境にブログと同じデザインの スタティックなHTMLファイルを用意する HTMLファイル生成
  8. 8. 普通にマークアップして… 書いた記事を マークアップしつつ… http://localhostにアクセス ブラウザを更新して確認
  9. 9. WordPressにコピペ! テキストでコピペ!
  10. 10. 手間も多い… HTMLファイルを毎回生成しなきゃいけない… マークアップを確認のためにリロードするのが面倒… 画像のリサイズと圧縮に時間がとられる…
  11. 11. 手間も多い… そうだ、自動化しよう! というわけで本題です
  12. 12. 手間も多い… タスクランナーを使って自動化します タスクランナーとは… Web制作における様々な処理「タスク」を自動化するツールのこと
  13. 13. 様々な処理 タスク って何? ・htmlの文法チェック ・cssの圧縮、結合 ・javascriptの文法チェック、結合、圧縮 ・画像のリサイズ ・スプライト画像の生成 etc… Webサイトやブログを開発する上で 面倒なルーティン作業ありませんか?
  14. 14. 拡張言語の管理もできる HTML、CSS、Javascriptの拡張言語がたくさん登場しました haml, sass, less, compass, CoffeeScript, TypeScript… compass  watch  -­‐e  development coffee  —watch  *.coffee tsc  -­‐w  hoge.ts これらの処理を一括で実行、管理できる
  15. 15. どんなツール? gulp node.jsでつくられた比較的ナウい タスクランナーツール ガルプ と読みます
  16. 16. インストールまで(簡単に) 1) node.jsのインストール http://nodejs.orgからインストール 2) gulpのインストール npm  install  -­‐g  gulp 3) gulpの初期実行 npm  init
  17. 17. 実際に実行するまでの流れ 1) 自動化したい処理のパッケージをインストール npm  install  -­‐g  gulp-­‐cssmin 「自動化したい作業 + gulp 」で検索! Ex :「gulp css 圧縮」 ブログの執筆に利用しているパッケージは下記4つ ・gulp-image-resize 画像のリサイズ ・gulp-imagemin 画像の圧縮 ・imagemin-pngquant 画像の圧縮の高機能化 ・gulp-livereload ブラウザのオートリロード
  18. 18. 実際に実行するまでの流れ 2) 設定ファイル gulpfile.js をつくる var gulp = require('gulp'); var resize = require('gulp-image-resize'); var livereload = require('gulp-livereload'); var imagemin = require('gulp-imagemin'); var pngquant = require('imagemin-pngquant'); gulp.task('resize', function () { gulp.src('test.png') .pipe(resize({ width : 100, height : 100, crop : true, upscale : false })) .pipe(gulp.dest('dist')); }); gulp.task('default', function () { return gulp.src('src/images/*') .pipe(imagemin({ progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngquant()] })) .pipe(gulp.dest('dist/images')); }); ※ サンプル コマンドライン(黒い画面)で gulp 叩くだけ!
  19. 19. gulpを実行するとどうなるの? - 1 フォルダに入れるだけで 自動で画像をリサイズ&圧縮!
  20. 20. gulpを実行するとどうなるの? - 2 HTMLファイルを更新すると… 自動でブラウザをリロード!
  21. 21. 記事を書く時の手間が HTMLファイルを毎回生成しなきゃいけない… マークアップを確認のためにリロードするのが面倒… 画像のリサイズと圧縮に時間がとられる…
  22. 22. なくなるよ! HTMLファイルを毎回生成しなきゃいけない… マークアップを確認のためにリロードするのが面倒… 画像のリサイズと圧縮に時間がとられる…
  23. 23. デメリット 実装ハードルが高い 黒い画面(ターミナルなど)を利用するので、 CUIに慣れていない人にとっては難しい。 PCでしか書けない スマホでブログを書いている方には使えない。
  24. 24. おわりに ハードルは高いですが、ブログの執筆だけでなく、 WordPressのカスタマイズやWeb制作で活かせます! 「こんな機能、方法もあるよー」程度の紹介なので、 詳しく知りたい方はぜひ直接ご質問ください。
  25. 25. That's all for my presentation. Thanks for your attention. ご清聴ありがとうございました

×