Toro_Unit

  • 「SaCSS Special13 : SaCSS SUMMER FESTIVAL 第2弾 FRONTEND」でJSの話をしてきました。#SaCSS

    「SaCSS Special13 : SaCSS SUMMER FESTIVAL 第2弾 FRONTEND」でJSの話をしてきました。#SaCSS

    家のキーボードの「a」が反応しなくなりました。つらい。とろゆにです。

    先日、8/5に開催された、「SaCSS Special13 : SaCSS SUMMER FESTIVAL 第2弾 FRONTEND」にて登壇させて頂きました。

    「最近 SaCSS Special 続きで凄いなー」と観察してた頃、5月頃だったか、ハムさんから登壇しない？とお誘い頂きました。WordPress の話かなーと思っていたところ、JavaScriptの勉強の話をとのことで。何の冗談かと思いましたが僕なりに話せることもあるかなと思い、軽い気持ちでOKしました。

    ゆるふわな感じでとのことだったんですが、実際話す内容を考え出したら何を話して良いか全くわからず、何回かボツくらいました。

    そんなわけで、当日のスライドはこちらです。魔境感溢れる昨今のJS事情を僕なりにゆるふわにお伝えしたつもり。

    とりあえず、僕がJavaScriptに触れ出した頃とは状況がだいぶ変わっていて、ググって出てくるコードをコピペしても動かない、固有名詞がとにかく沢山出てくる、.js だけど JavaScript じゃないコードも沢山ある等、めちゃめちゃハイコンテクストに感じてます。そのあたりの文脈を少しでも整理出来たらと思っていろいろ書きました。

    ES6で変わったことを全部は紹介できないので、詳細はいまからはじめるECMAScript 6も見て頂ければいいのかなと。

    https://www.slideshare.net/1000ch/begin-ecmascript6

    また、こちらも参考になるかと。

    結局伝えたかったこと

    • みんな攻略本の無いダンジョンをさまよってる感じなので焦らない。ビビらない。
    • 普段コピペしているコードを読んでみる。
    • とりあえず、動くモノをつくってみる。
    • JSは猛烈に進化し続けるので、やりながら徐々に覚える。少しずつ実戦投入していく。
    • 仲間を作って見せ合いっこしたりする。
    • 1日30分でも週に1時間でも良いので、挫折しない程度にJavaScriptに触れる時間を作る。

    ここらへんが、言語や技術を勉強する上でとにかく大事だなと思っているので、それが伝われば良いなと思ってました。英語の勉強とか楽器とかにも通じる話かもしれません。（どちらもサボり気味ですが・・・）

    「CoffeeScriptで、ライフゲームしてみた。」みたいな記事を書いたら滅茶苦茶JavaScript出来る人からいろいろツッコミをもらったりしました。そういうやりとりが楽しかったり、勉強になったりするので、公開するのはほんとに大切だと思います。

    僕は友人が勉強に作ったモノを改造して遊んだり、近所の温泉のデータを収集してみたりしてゆるっとやってます。

    今回のをきっかけに何か書いてみたと言う人が居たら是非教えて下さい。喜んで見に行きます！

    イベントの感想

    他の登壇者の方々の話もいろいろ刺激的でした。個人的にはアップルップルの森田さんの「コーディングしながらデザインルールをドキュメント化してみた」が特にビビりました。マークアップエンジニアとしてそういう仕事のやり方があるのかーと考えさせられました。

    関口さんの、「おれの使うさいきょうえでぃた」は PHPStorm 使いとしてまだまだ知らない機能がいっぱいあるなーと思いました。3年くらい使っているのに知らないことばかりです。

    編集後記

    45分の予定が10分も押してしまいすみませんでした！ほんとはもう少し余裕を持ってやるはずだったんですが…

    スコープの広い話をすることの難しさを改めて感じました。なかなか謎の単語がずらずら並ぶ感じになってしまったので、また何かJSの勉強をしたくなったときにでも見返して頂ければ幸いです。

    スライドを作りながら改めて jQuery を調べたのですが、やっぱり使いどころを間違えなければ良いツールだなーと再認識しました。そういう意味でも生の JavaScript やブラウザのAPI、他のライブラリが解決しようとしている課題とかは知らないとだなぁと。温故知新。

    さいごに

    まさか、SaCSS に登壇する日が来るとは思いませんでした。業界入ったときの自分に言っても信じないでしょうね。不思議なモノです。これからも精進したいと思います。

    また、前日にa-blog cms 勉強会 in 札幌 2017にも参加させて頂きました。WordPress や Movable Type 、Drupal くらいしか制作で携わったことが無い僕にはなかなか新鮮な体験でした。他の CMS のアプローチの仕方を知るのは、いろんな気付きがありますね。

    Frontend Nagoya の話も聞けたので近いうちに偵察に行こうかなと思います。

     

    札幌楽しかったです。お酒も食べ物も美味しかったです。人生で初めて空を飛んでみましたが、意外に松本からは行きやすいんだなーと感じました。ひこうきすごい。また機会を作って遊びに行きたいです。そのときや別の場所でお会いしたときは、また遊んで下さいー！

  • WordPress のテーマの配置場所について

    Roots さんが作っている Sage という WordPress のスターターテーマがありまして。WordPressのテンプレートに、Webpack や Laravel Blade とか様々な便利ツールを突っ込んだ、大変意欲的なプロジェクトです。

    このテーマの中に resources というディレクトリが有り、その中にWordPressのテーマの style.css やら functions.php やらが居るんですよね。

    これどうなってるんだろー、って思っていろいろ調べたところ、どうやら WordPress のテーマは themes 直下だけでなく、その一段したのディレクトリにある場合でも検出されるようです。

    つまり、themes/my-theme だけでなく、themes/hoge/my-themeに配置されたテーマも認識されるようです。

    内部的にはこんな感じらしいです。

    gulp や Webpack でいろいろゴリゴリやってる場合などは覚えておくと便利かもしれないですねー。

  • WordCamp Kyoto 2017 でセッションチームをやりました。

    WordCamp Kyoto 2017 でセッションチームをやりました。

    6/24,25に、WordCamp Kyoto 2017 が開催されました。

    実行委員長の太鼓の人こと岡本さんに、「お前を太鼓にするぞ！」と脅されたのは嘘ですが、お誘いいただいたのでセッションチームのリーダーをやらせてもらいました。

    年明けくらいから準備をしつつ、気がつけばあっという間の半年でした。

    過去のWordCampの実行委員長がメンバーだったりとても豪華な布陣でした。胃が痛くもあり、心強くもあり、なんだかんだ楽しかったです。

    スピーカー、ハンズオンの世話役などを快く引き受けて下さった皆様、本当にありがとうございます。

    また、WordPress コミュニティ以外の方にも登壇して頂けたのは、僕個人としても嬉しかったです。WordPress そのものや、WordPress を利用するにあたって、本当に様々な考え方や技術が関わっています。それを全て紹介するというのはなかなか難しいことですが、少しくらいはそういったことが伝えられたのかなとは思います。

    実行委員という立場上、当日のセッションを全然見れませんでした。客席に座って聴いてたいなーと思いながら会場を行ったり来たりするのは宿命みたいなモノなので仕方が無い。

    WordCamp Kyoto 2017 | Event | WordPress.tv に当日のセッションの動画が上がっているので、ゆっくり見ようと思います。当日来られなかった方や、裏番組のセッションも聞いてみたかった方なども、ぜひご覧下さいませ。

    またスピーカーの方々にお会いしたときにでも詳しく話を聞いてみたいので色んなイベントに顔も出そうと思います。直近では、CMS大阪夏祭り2017 に参加予定なのでかまって頂ければ幸いです。

    というわけで今週末の7月15日、WordBench 長野 vol.10 を開催します。WordCamp Kyoto 2017 の振り返りとか、いろいろやりたいと思いますので、お時間がある方はぜひ参加登録よろしくお願いします！

    また、来月の8月19日にも予定はしているので、そちらも予定が合えばぜひどうぞー。

     

     

     

     

  • WordBench 長野 vol.9 にて、「WordPress テーマ作成再入門」という話をしてきました。#wbnagano

    WordBench 長野 vol.9 にて、「WordPress テーマ作成再入門」という話をしてきました。#wbnagano

    ブログを書くまでが勉強会と言うことで。

    5月20日に行われた WordBench 長野 vol.9 にて「WordPress テーマ作成再入門」というセッションをさせていただきました。

    WordPress テーマ作成再入門 // Speaker Deck

    Vanillaやその他のテーマの制作を行ったりした上でどのように考えたか、どのように情報を収集したりしているかという話をしたつもりです。ちょっといろいろ詰め込みすぎたせいでだいぶ駆け足になってしまいました。また改めてスライドなどを見て頂いたり、質問など頂ければと思います。

    7割くらいMignon Styleさんのスライドのパクりという噂もあるにはあります。WordPress.tv に動画も掲載されているのでそちらも大いに参考になるかと思います。

    イベントの感想とか

    東京からお越し頂いたスピーカーの皆様方ありがとうございます。写真の話から、デザイン、REST API等、本当にいろんなジャンルにディープな話があってただただ楽しい会でした。

    また、今回は長野市で初めてのWordBench長野の会でした。主催でいろいろ動いていただいた宮本さん、本当にありがとうございました。こうして長野県のいろんなところでWordBench長野のイベントがあるってのはプチ旅行気分で楽しかったです。また長野市でもそれ以外でもやれたら良いなと。

    会場を提供して頂いた CREEKS さんですが、素敵なところでした。また遊びに行こうと思います。

    今後のイベントなど

    もくもく勉強会を6/10に松本で開催します。おやつでも食べながらゆるりとやれればいいなと思いますので、お時間ある方はぜひどうぞ。

    また、セッションでも話しましたが、6月24-25日にWordCamp Kyotoが開催されます。ちょっと遠いですが、きっと楽しい会になると思います。ぜひぜひおいでくださいませませ。

  • WordBench 長野 Vol.8 開催します！

    WordBench 長野 Vol.8 開催します！

    気がつけば今年3回目のWordBench長野になりました。今回は5/13の開催です。

    WordBench 長野 vol.8 WordPress 勉強会@松本 – connpass

    LT等も随時受付中です！

    また、本編終了後に、会場での懇親会も予定しています。

    ぜひご参加下さいませー！

  • WordBench 長野 vol.7 にて「WordPress プラグインとの付き合い方」という話をしてきました。#wbnagano

    WordBench 長野 vol.7 にて「WordPress プラグインとの付き合い方」という話をしてきました。#wbnagano

    Photo by Takashi Q. Hanamura

    ブログを書くまでが勉強会というわけで。

    3月11日に開催されたWordBench 長野 vol.7にて、「WordPress プラグインとの付き合い方」というセッションをさせて頂きました。

    どっかで聞いたような…

    しゃべったこと。

    プラグインに限らず WordPress 本体もそうですが、どんなソフトウェアでもリスクはついて回るものなんですよね。

    リスクがあるから使うなって話では無いですね。自分で全部作ることだってリスクが低いかというとそんなことは無いですし、そこはやっぱり、WordPress のエコシステムに積極的に乗っかっていくのが、結局一番楽なんじゃ無いかなーと思っています。

    また、「必須プラグイン」、「初心者にお勧めプラグイン10選！」みたいな感じでプラグインが紹介されてたりしますが、「必須な機能ならなぜ本体に入ってないの？」って思いますし、とりあえずどんなものかも良く解っていないプラグインを10個もインストールすること自体が初心者向けではないと思ったり。トラブルシューティングを困難にします。

    WordPress を使っている上で自分に足りない機能があったらそのときにプラグインの導入を検討するのが、ベターな考え方なのでは無いのでしょうか。

    セッション内容

    1. WordPressで個人ブログを運営しよう！ -アウトプットのススメ-

    Ateitexe アテークゼ *非IT企業のプログラマによるメモブログ を運営している *you さん ( @ateitexe ) によるブログ運営の話でした。

    さらっと、「美しいコードにしてブログに掲載するのが勉強」とか言い出したりして非常に後ろめたい思いをしました。

    特別何かすげーテクニックがあると言う話では無くて、当たり前のことをきっちりしっかりやること、その重要性を実体験を交えての話でした。

    特に過去の記事のメンテナンスが重要という話はなかなか重みがありました。

    WebデザイナーがVCCWとWordMoveでWordPressのデプロイ環境を構築した話

    THE ORTHODOX WORKS のアゼガミさん（@42EG4M1）による、VCCW の紹介でした。

    MAMP辛いとか消耗とかどっか（大阪）で聞いたことあるような話でした。

    XAMPP とか MAMP とかだとどうしても、サイトが増えたときにしんどくなっていくなぁという気がします。MAMP Pro だとそこら辺もうまいことやってくれると言う話もあるみたいですが。

    また FTP クライアントでのデプロイはWEB制作におけるやらかしがちなポイントの一つだと思うので、ここら辺を簡略化するというのは大切ですよね。

    また、辛い、面倒くさいみたいなタスクはミスの発生原因になりやすいと言う視点は、これに限らず重要な考え方だと思います。

    感想とか

    大曲さんと僕がMCでの座談会なのかWordPressダラダラトークみたいなのをやってみたりしましたが、どうだったんでしょうか。ざっくばらんにセキュリティの話とかテーマの話とかをしたような記憶がありますが、なにか参考になる話が少しでもあれば嬉しいなと思います。

    懇親会も、高校生が文化祭のサイトを作った話や、チームカピバラによる懇親会のLTじゃ無いと絶対に聞けない話があったり、楽しい会でした。

    また、4月5日にもくもく勉強会を開催しますのでそちらもよろしくどうぞー。

  • Browsersync とローカルサーバーを連携させて自動リロードさせる。

    おかんが喜ぶらしいので書きます。

    Browsersync という node.js 製の開発ツールがあります。これを使うと、開発用のサーバーが（通常 localhost:3000）で立ち上がって、ファイルの変更時にブラウザを自動リロードしてくれたり、CSSとかを自動で差し替えてくれたり、 見ている全てのブラウザでスクロールの位置などを同期してくれたりととにかくいろいろ便利なツールです。Sass や Babel 等と組み合わせるととても便利だったりします。

    VCCW や Wocker や PHP のビルトインサーバーで WordPress や PHP の開発を行ったりしますが、そのときにも Browsersync 出来たら便利ですよね。（というか別にWordPressやPHP以外でも便利です）

    こんな感じで出来ます。何はともあれ、Browsersync をインストールします。

    $ npm install -D browser-sync

    そして、こんな感じで、server.js のようなファイルを、開発中のテーマの中に作ります。

    var browserSync = require("browser-sync");
browserSync({
  proxy: 'vccw.dev',
  files: [
	"./dist/styles/**/*.css",
	"./dist/scripts/**/*.js",
	"./**/*.php",
  ]
});

    proxy に設定するのは、ローカルサーバーの hostname です。WP-CLI でローカルWEBサーバーを立てて開発などをしているときは、localhost:8080 等にします。

    files には、監視するファイルを入れます。指定したファイルに変更があったときにブラウザが自動でリロードしたり、CSSファイルの場合は、動的に差し替えてくれます。JS や CSS をビルドしたりする際は、出力されたものだけを指定しておくのがベターです。

    そして、server.js を起動すると、Browsersync が起動して、いろいろ便利にやってくれます。

    $ node server.js

    package.json に

    {
  "scripts": {
    "serve": "node ./server.js"
  }
}

    等と書いておくと、

    $ npm run serve

    みたいな感じで使えるので、よりスマートかなーと思います。

    glup と組み合わせる場合

    gulp を使っている場合はこんな感じになります。

    var browserSync = require("browser-sync");
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
  gulp.src('./src/styles/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist/styles'));
});

gulp.task('browserSync', function () {
  browserSync({
    proxy: 'vccw.dev',
    files: [
	    "./dist/styles/**/*.css",
	    "./dist/scripts/**/*.js",
	    "./**/*.php",
    ]
  });
});

gulp.task('watch', function(){
  gulp.watch('./src/styles/*.scss', ['sass']);
});

gulp.task('default', ['browserSync', 'sass', 'watch']);

    gulp で sass の自動ビルドをやってる場合などは、こんな感じで使えば良いんじゃ無いかなと思います。

  • WordBench 長野 vol.7 を開催します。#wbnagano

    WordBench 長野 vol.7 を開催します。#wbnagano

    今年は頻繁に開催出来たら良いなと思っています、WordBench 長野。

    というわけで、第7回目の勉強会を3月11日(土)に開催します。

    WordBench 長野 vol.7 WordPress 勉強会@松本 – connpass

    によるセッションを等を予定してます。

    LT等も随時受付中です！また、本編終了後に、会場での懇親会も予定しています。

    ぜひご参加下さいませ。

  • Vanilla が WordPress の公式ディレクトリに公開されました。

    Vanilla が WordPress の公式ディレクトリに公開されました。

    WordPressのテーマを作ったので公開しました。

    去年の10月にWordPressのテーマ作ったので、Github上で公開しましたが、それがWordPress.org の公式テーマディレクトリで公開されました。

    Vanilla — Free WordPress Themes

    Vanilla

    テーマの動作はこのサイトや、デモサイトにて確認できますので、ダウンロードしていじって頂ければとおもいます。

    また、テーマを作るにあたって、Twenty Seventeen や Twenty Sixteen 、そして _s のコードがかなり参考にしました。特にアクセシビリティへの配慮の部分などは、やっぱりデフォルトテーマって良く練ってあるなと感じることが多かったです。

    テーマレビュー自体は割とすんなりと終わった感です。Theme Check プラグインと、PHP_CodeSniffer でテストしながら開発するのはやっぱり大事だなぁと。

    また、Github と Travis CI を使ってリリース用のZIPファイルを自動作成するようにしたのですが、こういうちょっとしたところを自動化しておくのはかなりストレスを減らしてくれるなぁと思った次第です。

    今回はかなり引き算しながらテーマを作ったので、次はもう少し凝ったものを機会があればやってみたいなぁと。

    フィードバックやプルリクエストお待ちしています！

  • WordPress に貼った SpeakerDeck をレスポンシブ対応するプラグインを作りました。

    WordPress は Speaker Deck の埋め込みをサポートしていて、スライドのURLを貼ると、自動的に、埋め込み用の iframe に変換してくれます。便利。

    便利なんですけど、ちょっとイラッとくるポイントがありまして、レスポンシブに対応していないんですよね。スマホでみたらはみ出たり、縦にスキマが出来てしまったり。 iframe の宿命といえばそうなんですが・・・・。

    またそれがレスポンシブ対応になっていないブログを見たりして、いい加減になんとかならないかな…と思ったわけです。「チッて思ったらプラグインのネタ」と教わってきたので、プラグインにしました。

    Responsive Slide – Plugin Directory — WordPress

    Github : torounit/responsive-slide

    デモ

    現在 Speaker Deck にのみ対応しています。他のサービスは要望があったらやるかもしれません。

    プルリクエストとかお待ちしてます。

  • WordBench Nagano vol.6 “WBNagano Special!!!” を開催しました！#wbnagano

    WordBench Nagano vol.6 “WBNagano Special!!!” を開催しました！#wbnagano

    WordBench Nagano vol.6 “WBNagano Special!!!” のほう、無事終了しました。

    たくさんの方にご参加頂き、本当にありがとうございました。スタッフ・スピーカーの方々、本当にありがとうございました。

    イベントページに資料の方を追加していきますのでそちらも振り返りなどに役立ててもらえればと思います。

    全体の振り返りは WordBench.org の方にまた書こうと思いますので、とりあえず感想やら自分のことについて。

    Get involved in WordPress !!

    「Get involved in WordPress !!」というテーマで、セッションをさせて頂きました。オープンソースでコードを公開したり、開発に参加すると楽だし楽しいよって話と、コミュニティに参加すると楽だし楽しいよって話をしました。

    特に業務でWordPressやプラグイン、それらに限らずOSSを使うということは、昨今のほとんど全てのWEB制作に当てはまることだと思います。それらともっと上手に、効率的に、そして楽しく付き合っていくためのヒントになれば幸いです。

    WordCamp Kansai 2016 でプラグイン開発やらコアコントリビュートの話のセッションもしたので、それもあわせて見て頂ければと思います。そのときの動画もあります。

    また、今回の話をするにあたっていろいろと参考になった資料です。

    感想とか

    なんだかどのセッションもめちゃめちゃに濃い内容だったような気がします。懇親会も本当に楽しかったです！

    ブログを書くまでがWordBenchです。楽しく読ませて頂きますので、よろしくお願いします。

    WCT2015の忘年会のLTでWordBench長野盛り上げる！とLTしてからまるまる一年。とりあえず何でも良いから続けることというのは去年のテーマでしたが、その結果として、一つ大きな形として出来たのは良かったなと思います。

    また、登壇者から暴露されたりLTで自分でも話しましたが、とりあえずやりたい！と声を上げることは重要なんだなということをほんとに感じました。ダメ元でも言ってみるモノですね。

    当日は県内の方も多数参加して頂きました。これをきっかけに松本や飯田以外でも何かがはじまれば良いなと思っています。また、大雪で残念ながら参加できなかった方などもいたので、定期的に何かしらイベントを開催出来ればなと思います。またWordPress以外のコミュニティと合同で何かをやれたりしても楽しいかもしれませんね。

    とりあえず、2/1にもくもく勉強会を開催しますので、もしお時間ある人はお気軽にご参加下さい！

    次回は、3月か4月くらいにイベントを開催しようかなとも思っています。そのときはまたぜひよろしくお願いします！またこんなこと聞いてみたい！喋りたい！等もあればFBグループやwordbench.orgの長野ページにてご相談下さいませませ。

  • WordBench 長野 vol.6 “WBNagano Special!!!” を開催します。#wbnagano

    WordBench 長野 vol.6 “WBNagano Special!!!” を開催します。#wbnagano

    2017年、明けましておめでとうございます。今年もみなさまよろしくお願いします。

    9月頃から所々で噂をして来ましたが、1月21日に松本で WordBench 長野 vol.6 「WBNagano Special!!!」を開催します！

    今回は、何があったか北海道の札幌市から香川県の男木島まで、日本の至る所から WordPress な方々が長野県松本市に集まって頂けることになりました。気がつけば、至る所の WordBench のモデレーターや、過去の WordCamp の実行委員長などがわらわらと。いやぁ、言ってみるもんですね。

    こんな感じのセッションを行う予定です。

    1. 長谷川 広武 （´°ム°`）（@h2ham）「実演！jQuery以外でデザイナーも触れておきたいフレームワーク」
    2. Kite（@ixkaito）「What’s New in Twenty Seventeen」
    3. 岡本秀高（@motchi0214）「WordCamp US 2016 とWordPress 4.7から、これからのweb制作について考えてみた」
    4. ながとみちはる（@luchino__）「WordPressのコミュニティに関わって楽しかったりした話。」
    5. 額賀順子（@nukaga）「フリーランスWebデザイナーのイマドキ WordPress 案件ワークフローとお見積り」
    6. Toro_Unit（@Toro_Unit）「Get involved in WordPress !! 」

    東京、愛知、宮城からも参加して頂ける方もいらっしゃるので、楽しい会になるんじゃないかなとは思っております。

    会場で終了後懇親会も行う予定ですのでぜひお越し下さい！

    参加登録はこちらからどうぞ: WordBench Nagano vol.6 “WBNagano Special!!!” – connpass