Iwate HTML5 Community#4

前回は滝沢市IPU第2イノベーションセンターで開催(職場を出るとそこはHTML5コミュニティ)でしたが、
今回のHTML5 Communityは盛岡市アイーナで開催。

イベント情報 https://www.facebook.com/events/1645135662425047/

Bracketsでコーディング環境構築・入門編

デイジー・デジタル・デザインの笹平さんがお話してくださいました。

Brackets http://brackets.io/

• Adobeが開発している無料のエディタ
• 日本語環境もちゃんと整っている
• HTMLだけでなく各種プログラミング言語も対応
• プラグインを追加してエディタの拡張が行える

espresso http://macrabbit.com/espresso/ 自体がcss3などに対応が微妙になっているらしく、
簡単に高機能で日本語も整備されているBracketsを使ってみたとのこと

実際に仕事で利用されたらしい

• オートリロードなど簡単に設定できた
• 慣れてないのでちょっと効率は落ちたがよさ気
• emmet記述の拡張があるのが便利 -> 行数選択->全行liタグの挿入など
• sass, phpも設定を行えばオートリロードを行ってくれる
• imgタグを記述すると実際にあるファイルの候補を出力してくれる

まとめ

• オートリロード・サーバ構築などの環境を整える学習コストが低い
• メモ帳など最初のステップから次の段階を考えている学生などに使ってほしい
• 他のエディタ、環境をすでに使いこなしていると物足りないかもしれない

紹介している関連サイト

• 無料エディター「Brackets」にも恋に落ちた
• デザイナーでも超簡単！Bracketsで楽々コーディング 第1回 デザイナーにも優しいエディタ、Bracketsの基本を知っておく

Webデザイナー向けRuby入門

IWDD代表 鈴木さん http://www.iwdd.net/

Rubyの 布教活動 HTMLに関するツールなどの紹介

• Ruby on Railsの出現によってWeb業界全体が変わったというお話
• Rubyの 布教活動 記法がいかに簡単かの紹介
• HTMLやCSSを書くのにもはやカッコやセミコロンは必要ない

便利なツールの紹介

Slim

• HTMLを記述するのにカッコやセミコロンはいらない
• 便利なHTMLのテンプレート -> http://slim-lang.com/
• これで試せるのを思い出した -> http://codepen.io/pen/

stylas

もはやカッコがいらないCSSの書き方 https://learnboost.github.io/stylus/

• CSSあまり書かないので記述がシンプルですごくいいと思った

html_massage

https://github.com/harlantwood/html_massage

• urlを指定して実行を行うとHTMLを綺麗にしてくれるツール これもruby製
• htmlだけでなくtextでもmarkdown(←これすごい)でも出力OK
• コマンドラインで html_massage markdown http://xxxxx みたいな感じで使う

psd.rb

https://github.com/layervault/psd.rb

• psdファイルの情報を取得したりレイヤーごとのデータを書き出せるライブラリ
• RubyのPGからライブラリを呼び出して利用するのでPGに画像をバラすロジックを書いたりできるのかな
• レイヤー名や画像サイズなどがobject情報として表示できるようなのでもしかして面白いことができるかも

勉強会に参加してみて

フロント系お仕事用ツールが紹介されていたので、
主にバックエンドを行っているからHTMLやらCSSってそんな簡単に作れるんだという新しい発見。
普段の仕事だとCSSは人に書いてもらうもの or Bootstrap最高!! なのでちょっとチャレンジしてみようかと思う勉強会でした。