WordBench 富山 に参加してきました。

【勉強会】WordBench 富山 勉強会@富山市 第67回 11月26日(土)
https://www.facebook.com/events/1741536562763982/
に参加してきました。

今秋は、いろいろな方と出会いがあり、遠方の勉強会への参加が多めです。
ありがたいことです。
軽い気持ちで参加したら、20名以上の参加で会場はびっしり埋まってて、富山のWP熱すげーなってのが第一印象。
あと、開始前に会場裏の「富岩運河環水公園」ってところをフラフラ歩いてたんだけど、すっっっごくいいところで、あまりに美しすぎて謎の敗北感を感じるほど。(褒め言葉です)
WordBench富山に(参加&&会場がサンフォルテ)だったら足を運ぶことをお勧めします。

Welcartについて

WordPressのECサイト構築プラグイン「Welcart」を開発しているコルネ株式会社の南部様によるセッション。Welcartについてわかりやすく解説していただき、開発の歴史や運営の方法、セキュリティについてなど、色々盛りだくさんに解説をしていただきました。
Welcartは、たしか5年前とかそういう時期に(たしかまだバージョン1になる前)、あるお客様と一緒にWordPressでECサイトできないか検討している過程で使ったことがありました。そのときは、申し訳ないけどなかなかに使いづらくて断念しました。(そのお客様の業態とシステムがあわないってのが大きかったですが)。。そのときは結局ECキューブを選択したのですが、それがキッカケで、その後も特にWelcartと触れ合うキッカケがないままになっていました。
でも、今回お話を聞いて当時と比べてめちゃめちゃ進化しているなぁ、、、て思いました。
デモを見せてもらいましたが、もう別物ですね。今後は積極的に使っていこうと、心をあらたにして、食わず嫌いだった自分を恥じる今日このごろです。

感じた事

コアな機能は本体プラグインで提供しつつ、ウィジェットとかの見た目機能は専用テンプレートで提供してて「カスタマイズするときはこれの子テーマをつくりましょう」という姿勢や、拡張機能を専用プラグインで配布しているところ。
あとは、当たり前なのかもですが商品情報がカスタム投稿として実装されているところとか(これはデモみてるときのURL見てそう思っただけなんで違うかも)、WordPressの流儀というかそういうのに添ってつくられているので、普段からWordPressをがっつりやっている人には、いじりやすそうだなって感じました。
あと、なんというか、南部様の話しぶりとかからにじみ出てくる人柄が、「THE開発者」って感じの方で、こういう方がリーダーシップとって開発されているシステムなので、これからもどんどん良くなっていくだろうなと感じました。(なんか偉そうな書き方になってしまいました。すみません。m( _ _ )m)

よりよいコードを書く!


WordBench富山の神垣さんによるセッションでした。
静的コード解析による読みやすいコードを書きましょう。というお話。
普段から「大事だよね」とかいいながら、ついつい疎かになる「コーディング規約」について、ちゃんとやろうぜ!って内容と、ちゃんとやるための手法やツールの紹介をしていただきました。
「3日経てば他人のコード」は、自分の中で「var_dump書きたくなったらテスト書け」と並ぶCI格言にリストされました。
WordPressのコーディング規約は、1,2回読んだだけで、実際にはクォートの部分とか直接のパフォーマンスに関わりそうな部分しか守ってなかったので、(ごめんなさい・・)、ちゃんと守ろうって心をあらたにしました。というか自動チェック&自動整形ですね。Atomでどこまでできるんだろうか。。。あとで調べねば。あと、{}とかifのスペースは個人的にはどっちとも言えないなぁ。。という印象でしたが、ヨーダ記法はまさにそのとおりだと思ったので意識して取り入れるようにしたいと思います。

こういう『書き方』をちゃんとやっていないと、結局勘違いとかで無駄な時間を取られたりするので超大事。
ありがとうございます。m( _ _ )m

以上。

大勢が参加する勉強会だと、意見とかもバンバン出て活気がありますね。次回は長岡との合同開催の計画も持ち上がっているようで今後が楽しみです。

【#TechBuzz】10/7 第26回HTML5+JS勉強会 in 代々木に参加してきました

東京出張での打合せがありましたので、

そのまま勉強会に参加してきました。
http://html5js.connpass.com/event/33011/
https://atnd.org/events/78125
↑これです。

まとめを兼ねて、久しぶりにブログ書きます。

Webアニメーションについて

川上 和義さん(@saruyama_monki)

ディズニー社で培われてきたというアニメーションの基本原則12の紹介をWebアニメーションで実装するとどんな風になるのか?という内容を、実際に作成してCSSアニメーションの実例で見せていただき勉強になりました。
アニメーションの要望は高まっているように感じていますが、ついついJS側で実装してしまうのですが、メンテナンス性とかを考えるとCSSアニメーションでできるものはCSSで実装する方がいいのかもな。と考えを新たに。本腰をいれて勉強せねば。

HTML/CSS3のイマドキコーディング技術

ICS 鹿野壮さん(@tonkotsuboy_com)

フロントエンドの前線で仕事をされている鹿野さんによる「フロントエンドの技術は数年前のをそのままやっていると、作り手にもクライアントにもよくないので、新しいものを学びハッピーなフロントエンジニアライフをおくりましょう」的な講義。8つのあるあるネタを元に現場ではこういうのをやっているよという内容を教えていただきました。
中でも、古いブラウザ対応についても、現在はモダンブラウザがかなりのシェアをもっているので古いIEやベンダープレフィックスなどはある程度なくしていってもいいのでは?という呼びかけに、たしかにそうだよね。頷いてしまいました。

あと、「知らんかった・・・(汗)」ってなったのが、imgタグのsrcset属性について、これWordPressなどでもimgタグを出力する関数つかうと普通に実装されているので、HTML5で勧告済みなのかと勝手に思っていましたが、HTML5.1の仕様なんですね。まあsrc入れてるので互換性には問題ないですが勘違いでした。(ちゃんと調べてから使おう!)

さらには、講義後に鹿野さんと名刺交換させていただいたときにその話をさせてもらったんですが「あのエスアールシーセットってぇ・・・」て話したら「ソースセットね」ってやんわり訂正されて超恥ずかしい。。。(TT)
一人でやっていると、文字での情報は勉強できるけど、周りに普段から会話でやり取りできる人がいないのでコーディング周りの 「読み方」 は鬼門です。

全体的に、Flexboxとか普段から使いたいけど古いブラウザ的にどうだろう・・・という踏み切れない気持ちを強く後押ししてくれる講義でした。

名刺交換タイム

最後に名刺交換して交流を深めるタイムみたいのを設けていただいたので、フロントエンド界隈の人々と情報交換ができて知識と刺激を沢山いただいてきまいた。
なかでも、話題にでたのが「sass+compass」ってどうなの?というお話がホットでした。

  • compassをつかうとベンダープレフィックスを書かなくていいけど、コンパイルされたCSSにはもういらないようなベンダープレフィックスのズラズラついちゃうからスマートじゃない?
  • compassを使っていても、主にCSS3関連のベンダープレフィックスを省略できることくらいしか使わない?
  • どうせgulpとかのタスクランナーも併用するんだから、いっそのことsass+Autoprefixerでいいんじゃね?

というあたりの意見が交わされました。

これらは確かにそうかも。と思わせられて、これから検証していきたいと思いました。

トーキョーはこういう熱い勉強会がたくさんあってうらやましい今日このごろ。

ちなみにこの記事、高速バスで新潟に早朝に帰りついたはいいけど、家の鍵を持って出るのを忘れてしまい家には入れないので、しょんぼりしながら市内のコワーキングスペースcodeforで書いたことはヒミツです。

Vagrant+Scotch Box にphpMyAdminをインストール

VagrantでPHP開発環境をつくりたいんだけど、最低限PHPとMySQLが動けばいいくらいであとは細かいことは気にしなくていいって、感じの軽い開発のときに、そういう環境がさくっと立ち上げられるScotchBoxが重宝しそうです。
PHPとか新しいバージョンのがはいっているのでLaravelとかも動きます。
ただ、phpMyAdminが入っていない?のか見当たらなかったので、ScotchBoxの立ち上げから、phpMyAdminのインストールまで。

これで、PHPとmySQLが動いている「とりあえずなPHP開発環境は揃うはず」

参考にさせていただいたサイト

Scotch BoxをインストールしてphpMyAdminを動かす

  1. 任意の場所で
    git clone https://github.com/scotch-io/scotch-box.git <フォルダ名>

    これで、フォルダ内に必要ファイルが入ります。

  2. 上記のフォルダを見ると、「Vagrantfile」とうファイルがあるので任意で編集。
    Vagrant.configure("2") do |config|
    
        config.vm.box = "scotch/box"
        config.vm.network "private_network", ip: "192.168.33.10"
        config.vm.hostname = "scotchbox"
        config.vm.synced_folder ".", "/var/www", :nfs => { :mount_options => ["dmode=777","fmode=666"] }
    
    end
    

    上記でいうところの

    config.vm.hostname = "scotchbox"
    

    scotchbox がホスト名になります。私のChromeだと、アドレスバーにscotchboxとだけ打つと検索しにいってしまうことがあって不便だったので、scotchbox.local みたいなアドレスっぽい名前に修正しました。

    config.vm.synced_folder "."・・・・
    

    の “.” がローカルの作業フォルダになります。通常は、上記でcloneしたときに作ったフォルダの中にpublicていうのができててそれが作業フォルダになります。ここを変えると作業フォルダを変更できますが、ここで指定したフォルダの中にpublicというフォルダができてそれが作業フォルダになります。
    例えば、

    config.vm.synced_folder "./www/"・・・・
    

    としたときには、wwwフォルダのなかのpublicフォルダが公開フォルダになります。
    そのままのほうがわかりやすいかも。

  3. あとは
    vagrant up
    
  4. で、環境が立ち上がって先ほど決めたホスト名でのアクセスを確認できたらphpMyAdminのインストールをします。
    まずは

    vagrant ssh
    
  5. ScotchBoxのOSはUbuntuなのでphpMyAdminインストールは
    sudo apt-get install phpmyadmin

    インストール中にいろいろ聞かれますが、
    Webサーバーはapachを選択。
    Configuring phpmyadmin は「No」
    ・・・
    でインストールは終了しますが、このままだと<ホスト名>/phpmyadmin でアクセスできません。

  6. Ubuntuの公式にしたがって
    sudo ln -s /etc/phpmyadmin/apache.conf /etc/apache2/conf-available/phpmyadmin.conf
    sudo a2enconf phpmyadmin
    sudo /etc/init.d/apache2 reload
    

    これでOK。
    <ホスト名>/phpmyadmin
    でphpMyAdminにアクセスできたら成功です。

  7. ちなみに、ScotchBoxが最初から準備してくれているDBへのアクセスは
    ユーザ名:root
    パスワード:root
    です。

以上、まあようするにUbuntuへのphpMyAdminのインストール方法なんですが、まとまった情報がなかったので
まとめ+備忘録を兼ねて。