エンジニアをリングする プログラをミングしたり。 2021-12-31T13:50:19+09:00 yoshiko_pg Hatena::Blog hatenablog://blog/12921228815719091442 State of よしこ 2021(年間振り返り) hatenablog://entry/13574176438047934728 2021-12-31T13:50:19+09:00 2021-12-31T14:07:29+09:00 振り返りいっときますか! 仕事 2020年4月に ナレッジワーク という会社の創業メンバーになり、今月末で1年と9ヶ月が経ちました。 <p>振り返りいっときますか!</p> <h2>仕事</h2> <p>2020年4月に <a href="https://kwork.studio/">ナレッジワーク</a> という会社の創業メンバーになり、今月末で1年と9ヶ月が経ちました。</p> <h3>開発</h3> <p>今年はもうひたすら邁進する1年でした。<br /> プロダクトはひとつですが、3プロダクトぶんのMVPを立ち上げるぐらいの開発をしてました。<br /> そんな怒涛の開発を乗り越え、そろそろ0->1から1->10への変わり目のフェーズになってきて、立ち上げ時の技術的な仮説もある程度答え合わせができてきたところです。</p> <p>手前味噌ですが、なかなかよい構成で立ち上げられたおかげで1年以上経った今もうまく開発を回せているなという実感があるので、考えてきたことをどこかに公開したいなと思い、Zennデビューしました。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fzenn.dev%2Fyoshiko%2Farticles%2F32371c83e68cbe" title="2020年に立ち上げたWebフロントエンド構成の振り返り" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://zenn.dev/yoshiko/articles/32371c83e68cbe">zenn.dev</a></cite></p> <p>秋にこの記事を公開してから、ちょっとずつ各セクションの深堀り記事を書いていっています。<br /> 創業してからはずっと会社に閉じていたので、気づけば記事でのアウトプットはだいぶ久しぶりでした。<br /> この記事+深堀り記事3件で、公開済みはいまのところ計4件です。それぞれ嬉しい反応を貰えていてうれしいです。<br /> 来年中には全部の深堀り記事を公開できたらいいなぁ〜。。</p> <h3>組織</h3> <p>創業時には7人、去年末には9人だった社員数が、今年末には15人になりました。<br /> 爆発的ではないけれど着実に必要な人が必要なときに仲間入りしてくれている実感があって、ペースも含めてとても嬉しいです。<br /> それぞれにスキルがあるのはもちろんですが、「人のために」「誠実に」「こだわりを持って」というStyleを軸に採用活動をしているだけあって、社内見渡すと皆人当たりがよく優しくて温かい人たちばかりだな!という印象で、とても摩擦レスです。<br /> キャリア的にはシニアが多いので、スタートアップにしてはかなり落ち着いている印象。いわゆる同年代での文化祭前夜の熱狂の連続、みたいなお祭り感はないけど、成熟したチームとして地に足付けながら一歩一歩確実に山を登れている感じで気に入っています。</p> <h3>採用</h3> <p>創業メンバーなのもあり、採用もかなり自分ごととしてやっています(元々近くで働く人は自分で見つけてきたいタイプ)。<br /> 今年は年間通して自分の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%D5%A5%A1%A5%E9">リファラ</a>ルで正社員3名、副業5名をお迎えできました。フロントエンドもついに一人から二人体制になって、チーム化!! 🎉</p> <p>自分的な今年の新たなトピックとしては、元々あった繋がりを超え、 <a href="https://yoshiko.hatenablog.jp/entry/2021/09/08/131119">模擬面接の募集</a> や <a href="https://meety.net/matches/UAIEphAboPUl">meetyの副業募集</a> などで新しい出会いを自ら開拓できたことです。それぞれ思っていた以上のたくさんの応募をいただき、秋からはずっと週2ペースで模擬 or 副業のスキル面接をしていました。</p> <p>模擬面接は採用そのものではなく採用フローの改善に主眼を置いた取り組みで、そのフィードバックのおかげでブラッシュアップできた面接フローや質問などもあり、とても有意義でした!ご参加くださった皆様ありがとうございました。まだ実施できていない方々も半分ぐらいいらっしゃるので、年明け以降また再開できたらよいなと思っています。</p> <h3>事業</h3> <p>で、リリースしたの?って声が聞こえてきそうですが、まだです!でもやっとその日が見えてきました! <br /> リリースまわりに関しては直近公開されたCEO麻野さんのブログで触れられているのでぜひ。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fnote.com%2Fkojiasano1103%2Fn%2Fnc4d9d2da6c41" title="創業者への3つの問いと振り返り|麻野耕司|note" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://note.com/kojiasano1103/n/nc4d9d2da6c41">note.com</a></cite></p> <p>来年はいよいよ市場にオープンな<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%D1%A5%AF">インパク</a>トを与えられたらいいなと思っています。</p> <h2>プライベート</h2> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> Developer Experts for Web</h3> <p>ご縁あって10月からGDEに仲間入りしました。</p> <p><blockquote data-conversation="none" class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">お知らせ! 📣<br>ご縁あって先月からWebの<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> Developer Expertsになりました😳<br>引き続きよろしくお願いします🙌<a href="https://t.co/7ctF61yZva">https://t.co/7ctF61yZva</a></p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/1458694669341134848?ref_src=twsrc%5Etfw">2021年11月11日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <p>なってみての振り返りとしては、自分にとっては改めてのインプットのし直しの機会になったことがとてもよかったです。<br /> 日本のGDEには月1で自分の担当分野の周辺動向を発表し合う機会があるのですが、創業してからは事業に集中していてずっとプロダクトの開発に必要なインプットしかしなくなっていたので、このままじゃ何も持ってこれる情報がない!!と焦ってインプットの体制を立て直しました(主に<a class="keyword" href="http://d.hatena.ne.jp/keyword/RSS">RSS</a>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>)。<br /> おかげで最近はGDEになる前よりも格段に周辺動向についていけるようになって、知識の引き出しが増えてきた感じがあります。<br /> 自分が<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BB%C5%C6%FE">仕入</a>れるだけじゃなく、周辺動向でオッと思ったことは積極的にツイートするようにしているので、GDEとして周囲にも啓蒙貢献できているといいな。</p> <p>12月にはGDG DevFest TokyoのWebセッションを担当して、最近使えるようになった/なりそうな<a class="keyword" href="http://d.hatena.ne.jp/keyword/Web%C9%B8%BD%E0">Web標準</a>仕様の紹介をしました。ご好評いただけてよかったです。スライド公開していますので以下からぜひ。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Fyoshiko-pg%2Fslides%2Fblob%2Fgh-pages%2F20211211-devfest%2Fdevfest-2021-web.pdf" title="slides/devfest-2021-web.pdf at gh-pages · yoshiko-pg/slides" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/yoshiko-pg/slides/blob/gh-pages/20211211-devfest/devfest-2021-web.pdf">github.com</a></cite></p> <h3>引っ越し</h3> <p>コロナの巣ごもりから、少し郊外に引っ越しました。広くなって最高です。 <br /> 完全に偶然なのですがご近所さんができて、ちょいちょい突発的に遊べるようになりました。<br /> 元々友達の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%E9%A5%B9%A5%BF">クラスタ</a>が少ないので、新しい<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%E9%A5%B9%A5%BF">クラスタ</a>ができてとても嬉しい〜。来年もよろしくおねがいします。</p> <h3>30代になった</h3> <p>今月で30歳になりました。19歳の半ばぐらいから未経験でWebエンジニア職になったので、そこから10年半ぐらい。</p> <p>前々職Goodpatch/前職<a class="keyword" href="http://d.hatena.ne.jp/keyword/FOLIO">FOLIO</a>では入社時にそれぞれ23歳・25歳だったので、働いているときにもまだまだ若手気分だったのですが、去年の現職ナレッジワーク創業のあたりからだいぶフェーズが変わってきたというか、中堅に入ってきたな〜みたいな感覚はあって。特に今年は気持ちも動きももう完全に中堅みたいな感じになってたので、あー年齢のほうも30になったかー。みたいな、フェーズと年代が共に階段登ったような感覚がありました(別にフェーズと年齢がイコールではないと思ってるけど)。</p> <p>自分に自信が持てない・過小評価しがち、みたいな性質は引き続きずっと抱えているものの、そろそろそういうのを(内心ではまだ思ってたとしても)表に出すことは減らしていかないと潤滑に物事が進まなくなる頃なんだろうなぁ。と思っています。これは多分ここからの自分の課題のひとつです。自信なさげな若手は励ましたくなるけど、自信なさげなテッ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%EA%A1%BC%A5%C9">クリード</a>とか嫌だよね。笑</p> <p>あとは家庭や健康との両立!幸い会社は「健康・家庭 > 事業の成功」というのを明確に掲げてくれているので環境としては申し分ないものの、自分が勝手にやりたくなってやりすぎる時がちょいちょいあるので、バランスをとっていきます。来年はもっとご飯が作れたらいいなと思います。</p> <hr /> <p>おわりです。今年も大きな事件なく家族共々平和に健康に過ごせてよかったです。<br /> あっという間に次の年が始まりますね。また来年!</p> yoshiko_pg コーディング面接を試しに受けてくれる人 or 受けさせてくれる会社を募集します hatenablog://entry/13574176438009208488 2021-09-08T13:11:19+09:00 2021-09-08T17:20:41+09:00 タイトルの通り、2種類の別々の募集をしたいです。 前提として、わたしは ナレッジワーク というまだ少人数のスタートアップでWebフロントエンドエンジニアの採用選考をさせてもらっています。 担当しているのはスキル面を確認するためのコーディング面接で、内容は主に自分で考えたものなのですが、最近いくつかのもやもやを感じています。 それらの解消を目的として、ふたつの募集をしたいと思います。 <p>タイトルの通り、2種類の別々の募集をしたいです。</p> <p>前提として、わたしは <a href="https://kwork.studio">ナレッジワーク</a> というまだ少人数のスタートアップでWebフロントエンドエンジニアの採用選考をさせてもらっています。<br /> 担当しているのはスキル面を確認するためのコーディング面接で、内容は主に自分で考えたものなのですが、最近いくつかのもやもやを感じています。<br /> それらの解消を目的として、ふたつの募集をしたいと思います。</p> <h2>コーディング面接のシミュレーションを試しに受けてくれる人を募集します</h2> <p>解決したいのは以下。</p> <ul> <li>選考基準となりうる課題・質問を自分一人の閉じた中で考えるのって不健全な気がする。まだ会社規模も小さく同職種の社員数もわずかなので、会社の外側から多角的なフィードバックがほしい</li> <li>カジュアルな雰囲気を作れるようなアイスブレイクや、新しい課題や質問を試してみたりしたいが、実際の面接は会社と候補者様間で一度きりしかない大事な機会なので、ア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>を試す場にはできない(したくない)。なので試行錯誤ができるような、実際の面接ではない練習的な場がほしい</li> </ul> <p>というわけで、選考ではなく、お互いの場馴れやフィードバックの交換を目的として、コーディング面接のシミュレーションを受けてみてもいいよという方はいないでしょうか?<br /> コーディング面接を受ける練習をしてみたい方はもちろん、同じようにフロントエンドエンジニアの選考を任されている方で、他の人はどんな面接してるのか気になる!という方も歓迎です!</p> <ul> <li>所要時間 <ul> <li>1時間30分(面接シミュレーション1時間 + お互いに所感の交換や内容へのフィードバック30分)</li> </ul> </li> <li>面接の内容 <ul> <li>React + TypeScriptの構成で用意したSPAのテンプレートをベースに、お題に沿った内容をコーディングするパートが40分</li> <li>HTML/<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>/JS/TS/Reactなどに関する質問のパートが20分</li> </ul> </li> <li>備考 <ul> <li>選考ではないので、合否のお伝えはありません。</li> <li>ご自身のほうから「yoshikoの面接シミュレーション受けてみた」という旨を公開することは問題ありませんが、面接の内容自体は公開しないでください。</li> <li>私のほうから受けてくださった方に関する情報や個別の感想を公開することは一切ありません。</li> </ul> </li> </ul> <p>React/TypeScriptでSPAの開発経験がある方ならマッチすると思います。 <br /> (採用要件にFW縛りは設けてないんですが、プロダクトで使ってるのがReactなことと、私が他のFWの最新仕様をキャッチアップできてなくて今のところReactベースの課題しか用意できてません。。このへんも拡張したい) <br /> 興味ある〜という方がいましたら <a href="https://twitter.com/yoshiko_pg">私のTwitterアカウントまでDMください!(開放してます)</a></p> <p>※ 会社にも募集することのOKもらってます!<br /> ※ 上記はフロントエンドエンジニア向けですが、弊社のCTOがバックエンド向けのコーディング面接で同じような取り組みをやっているので、そちらをやってみたい方は <a href="https://twitter.com/mayahjp">mayahさんまでDMください!(開放されてます)</a></p> <h2>コーディング面接(スキル面接)のシミュレーションを試しに受けさせてくれる会社を募集します</h2> <p>解決したいのは以下。</p> <ul> <li>ひとつの会社に長く所属すればするほど、面接をする機会ばかり増え、面接される機会は無くなるので、心持ちが偏りそう。面接を双方のマッチングというフラットな場にするために、面接される側の緊張感も定期的に体験しておくことで、面接する側になったとき色々気を配れそう。</li> <li>他の会社ではどんな内容でスキル面の選考をしているのか気になる。吸収できる良い内容があれば取り入れたい!</li> </ul> <p>というわけで、私を相手にスキル面接のシミュレーションをしてくださる会社さん/担当者さんはいませんでしょうか?<br /> Webフロントエンドのスキル面を選考する内容であれば、必ずしもコーディングのパートがなくても大丈夫です!</p> <p>上に書いたひとつ目の募集をしようと考える中で、私が採用担当者としてシミュレーションを受けてくれる方を募集したいなら、他の会社へ私がシミュレーションを受けにいく需要もあるかな?と思い。</p> <p>採用目的ではないこと(わたしの転職意向が0なこと)をご了承いただける方で、「うちも練習やフィードバックの場として面接シミュレーションやってみたいから受けてみてくれー!」という会社さん/担当者さんがいましたら、 <a href="https://twitter.com/yoshiko_pg">私のTwitterアカウントまでDMください!(開放してます)</a></p> <hr /> <p>面接って一発勝負なので、自分の力を出しきれなかったり相手の魅力を引き出しきれなかったりしたらせっかくの機会がもったいないですよね。<br /> そのためには面接する側もされる側も慣れや経験が必要だと思います。</p> <p>今回の募集は初めての取り組みなのでどうなるか未知数ですが、気軽に場数を踏める機会が増えることで、コーディング面接というものがもっとカジュアルでハードルの低い身近なものになっていけばいいなーと思います。</p> yoshiko_pg 2020年これまでのこと hatenablog://entry/26006613672395043 2020-12-31T20:13:32+09:00 2020-12-31T20:13:32+09:00 振り返りたくなるぐらい良い年だったので滑り込み振り返り。 一言でいうと、今まで生きてきた中で一番楽しい年でした。 つらつらと内心を書き連ねてしまったのでちょっと恥ずかしいな…まぁ外向けのアウトプットじゃなくて思考ログみたいなものです。 <p>振り返りたくなるぐらい良い年だったので滑り込み振り返り。 一言でいうと、今まで生きてきた中で一番楽しい年でした。</p> <p>つらつらと内心を書き連ねてしまったのでちょっと恥ずかしいな…まぁ外向けのアウトプットじゃなくて思考ログみたいなものです。</p> <h2>1~3月</h2> <p>2019年12月末に次を決めずに退職をしたので、1~3月は次どうするかを考えてました。</p> <p>(その頃書いたブログ: <a href="https://yoshiko.hatenablog.jp/entry/2020/01/22/081854">2020&#x5E74;&#x3053;&#x308C;&#x304B;&#x3089;&#x306E;&#x3053;&#x3068; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a>)</p> <p>惹かれている会社さんで体験入社をさせていただいたりしてました。めっちゃ楽しかった!</p> <p><blockquote data-conversation="none" class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">1, 2月はGoodpatch・SmartHR・<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B5%A5%A4%A5%DC%A5%A6%A5%BA">サイボウズ</a>の3箇所で体験入社をさせてもらいました!どこもとてもよい環境だった☺️<br>自分が出せたバリューで喜んでもらえた部分もそれぞれあってよかった!<br>様々な現場を経て、自分が大切にしたいことの輪郭が徐々に見えてきて実り多かったです。ありがとうございました🙏</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/1230417279944286209?ref_src=twsrc%5Etfw">2020年2月20日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <p>この頃濃厚だったのは、「週3で正社員として働きつつ週1~2で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B8%C4%BF%CD%BB%F6%B6%C8%BC%E7">個人事業主</a>として働く」または「友人と起業」でした。未だにどちらも魅力的な道だったなと思ってます。</p> <p>ただ時期を同じくして、とあるスタートアップの立ち上げに一人目のフロントエンドエンジニアとして入らないかという誘いを前々職の同僚から貰い、話を重ねるごとに気持ちが傾いていって、気がつけばフルタイム正社員としてそのスタートアップを一緒に創業することを決めていました。<br /> 年始には「働き先を決める前には必ず体験入社する」「正社員なら週4以下の稼働にする」を強く胸のうちに掲げていたので、そのどちらも満たさない道に心が動いたことは自分でも結構びっくりしていました。人間、最後は心が決めますね…</p> <p>決め手となったのは「CEOを組織のリーダーとして、CTOを技術のリーダーとして信頼できそうと思ったこと」と「コ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%E1%A5%F3%A5%D0%A1%BC">アメンバー</a>と話しているときの自分を好きだと思えたこと」でした。</p> <h3>"組織のリーダー"について。</h3> <p>わたしが正社員では週4以下の稼働にしようと思っていた理由のひとつは、もうあんまり組織に深入りしすぎないようにというか…感情移入しすぎない距離を保てたほうが自分のためかもしれないと思ったからでした。<br /> もともと30~40人ぐらいのフェーズの、勢い(<a href="https://tumada.medium.com/%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%81%AF%E3%83%A2%E3%83%A1%E3%83%B3%E3%82%BF%E3%83%A0%E3%81%AB%E3%82%88%E3%81%A3%E3%81%A6%E7%94%9F%E3%81%8D%E5%BB%B6%E3%81%B3%E3%82%8B-bdcc5bd2c48">モメンタム</a>)に溢れた組織に惹かれがちなため、そういう現場を連続して経験してきたのですが、やっぱりそういう魅力あふれる会社は必然的にその後急拡大するし、急拡大するといろいろな壁(50人の壁、100人の壁とか)にぶつかりますよね。それは当たり前のことで、大抵の勢いあるスタートアップがそうだと思うし、そうならずして短い時間で大きな成功をしている会社なんてほとんどないんじゃないかと思います。だからそれがどうとかではなくて、ただ自分の心が、それに耐えるには弱すぎるのではないかということがだんだんわかってきました。具体的には、自分が働く上で不満がなくても、近い仲間が傷付いたり不満を持ったりしていると自分も同じような心情になってしまうタイプなんですよね。それを長所とも短所とも思っていませんが、まぁ変化の大きい拡大期の組織には向かない性質だな。ということだけはわかりました。<br /> なので今までよりも後のほうのフェーズの、ある程度成長してきていて激震が走る頻度が低そうな会社で、時間も減らして少し距離を取りながら働くことで、自分のメンタルも安定し、結果的により長く在籍しながら高いパフォーマンスを出せて貢献できるかなと思ったのが背景です。</p> <p>なので立ち上げの話をもらったときも週3~4稼働も視野にいれていたのですが、代表の麻野さんがかなり組織のプロフェッショナルなことがわかってきて(著書のTHE TEAMも頂いて読みました)、あーなんか…この人の元でゼロから組織を立ち上げられて、その立ち上げに最初から自分も参加できるのなら、勝手に自分の中で諦めていた組織への深いコミットも、わんちゃんあるのかもしれない…みたいな気持ちが芽生えてきたんですよね。本当に最後のチャンス。この最良の条件で無理ならもう自分には無理ってことでしょ、みたいな。逆にそれを試さずにこのまま退いてしまうのはもったいなく思えたので、フルタイム稼働を決めました。</p> <h3>"コ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%E1%A5%F3%A5%D0%A1%BC">アメンバー</a>と話しているときの自分を好きだと思えたこと"について。</h3> <p>みんな良い人であることはもちろん、それ以上に「善くあろう」としている人たちだと私は見ています。自分の心に悪意を持ち込まない。相手の意見に悪意を見いださない。目の前の人に真摯に誠実に向き合う。まぁ文字で書くと綺麗事にしか見えなくなってしまうんですが…そういう姿勢を感じています。そして、そういう人の中にいると自然と自分もそうありやすいんですよね。<br /> わたしはたぶん良心が強いほうなのか、よくなかったなと思う言動をしてしまうたびに良心の呵責でじわじわとセルフダメージ受けているのですが、でもそんな立派な人間じゃないので、場の流れ次第でよくない言動も全然すぐ出てくるんですよね。流されやすくて、環境や状況から受ける影響が強い。(周りのせいということじゃなくて、自分のせいですが)<br /> なので善くあろうとしている人たちと話していると、自分もとても自然体でいられて、思ったことを素直に話しているのに、よくないなと思う言動が自分から全然出てこなくて、解散したあとも後味がとてもよい。むやみに傷付けられないという信頼を持てるから、乱暴に扱われたくない自分の柔らかい部分まで見せることができる。感覚の表現が拙いですがそんな感じで、話しててとても楽で楽しかった。長く時間を過ごすならこんな人達とがいいなぁと思いました。</p> <p>そして大事なのは、その心的スタンス(社内ではstyleと呼んでいます)が明確に選考基準に入っていることでした。どれだけスキルが高くても、そのstyleの部分が合わなければ一緒に働くことはできない。これは創業前の、創業メンバーを探していた頃から大事にされていたようです。<br /> これはまさにここ1~2年ぐらいで自分も重要に思い始めていた部分でした。(ある人の生産性が高くても言動によって周囲の生産性を落としていたら結果としてマイナス、みたいなやつ)<br /> 明確に選考基準に入っていることで、今の心地よい空気が偶然の産物ではなく計画されたものなんだなとわかり、安心感が増しました。</p> <p>そんな感じで、3月頃に腹を決め、4月に7人で創業しました。 ナレッジワークという会社です。 <a href="https://kwork.studio/">https://kwork.studio/</a></p> <h2>4~12月</h2> <p>そんな感じで4/1に創業をして、先日12/28に仕事納めでした。 前段がかなり長くなってしまったからさっくり書きますが、もう最高に楽しかったです。事業も組織も開発も。</p> <h3>事業</h3> <p>今ステルスでやっているのでまだ多くを語れないんですが、良いプロダクトは良い課題から。その課題の手応えは確実に感じています。<br /> プロダクトも、まー9ヶ月でよくここまで作ったな。ってチーム画チーム賛できるぐらいにはいいものができてます。品質高い。<br /> あとは熱狂を生み出せるかどうかなので、来年もっと磨いて、はやくお披露目したいですね。</p> <h3>組織</h3> <p><blockquote data-conversation="none" class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">4月からの会社どう?ってたまに聞かれるのでここでまとめて答えると、マジクソたのち〜〜〜〜って感じです</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/1289167530985103365?ref_src=twsrc%5Etfw">2020年7月31日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <p><blockquote data-conversation="none" class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">組織のゼロイチに参加できるのは開発でゼロイチできるのと同じぐらい楽しいことだった</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/1289167849215295495?ref_src=twsrc%5Etfw">2020年7月31日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <p><blockquote data-conversation="none" class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">今日で創業から丸半年!なんだかんだめちゃ楽しかったなぁ。自分に合った良い場所に居れてるなと思い続けた半年間だった。<br>とにかくものづくりが楽しいのと、組織の健全さが心地よい。<br>明日からは新メンバーもふたり増えるのでますます楽しみ!</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/1311314976745742337?ref_src=twsrc%5Etfw">2020年9月30日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <p><blockquote data-conversation="none" class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">年内最終営業日おわった!!!あ〜〜〜〜〜4月からずっと、めちゃめちゃ楽しかった………………</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/1343547835963199489?ref_src=twsrc%5Etfw">2020年12月28日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <p>楽しそうでよかったですね。</p> <p>やっぱり私は組織とか人が好きなんですよね。勝手に諦めようとしたときに最後のチャンスが見えて、飛び込んでみてよかったです。</p> <p>もちろんスタートアップなのでここから荒波がこないわけもないと思ってます。でも創業メンバーというポジションは結構自分の心の耐性を上げてくれるなと思いました。やれることをやっていきたいです。</p> <h3>開発</h3> <p>今までは0->1か1->10のどちらかだけに携わることが多かったのですが、0->1で問題を自分なりに解き、1->10で答え合わせをする、というのをセットでやらないとなかなか設計力って身につかないなぁと感じていました。<br /> 今回まさにそれがやれているのでとても充実しています。これは創業メンバーの特権ですね。<br /> ざっくり書くと、TypeScriptで書いたNext.jsのアプリをVercelに乗っけていて、読み込みの非同期まわりはReact.Suspenseを使っています。SWRのSuspenseモード便利。SuspenseはめちゃくちゃDX変わりました。Componentがデータ取得後の正常系に集中できるのめっちゃ楽。<br /> StateはSWR内のServer Cache, Recoilでページ跨いで保持するGlobal State, React Componentが持つLocal Stateの3つに分類して扱っています。<br /> このへんはSuspenseがStableになったら記事でも書きたいなって思ってます。</p> <h2>家庭</h2> <p>結婚して1年半ぐらい経ちました。今年は旦那は事業準備、わたしはリモートメインで二人とも家にいることが多かったので、二人が快適に作業できるスタイルを見つけるまでに試行錯誤がありました。結局、もうひとつ作業スペースを設けて1人1つの専有スペースとすることで平和になりました。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A1%BC%A5%ED%A5%F3%A5%C1%A5%A7%A5%A2">アーロンチェア</a>高かったけど買ってよかった…。 <br /> この記事の大半で長々仕事のことを書きましたが、わたしは生活の上に仕事が乗っかっているタイプなので、家庭での生活が安定してないと仕事のパフォーマンスも出ないです。今年仕事に集中して高いパフォーマンス出せていたのは家で旦那が支えてくれていたおかげです。ありがとう。わたしは年々仲良くなれている気がするけれどそっちはどうだろう。来年もよろしくお願いします。</p> <p>コロナもあってほとんどの時間を家で過ごしており、住環境の改善が進んだのはよかったことです。キッチンには食洗機とホットクックを導入して最高になりました。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%A1%B4%D6%CF%C2%C2%E5">勝間和代</a>さんの背中を追って家庭料理がちょっと進歩しました。サラダって、レタスちぎってドレッシングかけるしかやりかたわからなかったけど、ベ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D3%A1%BC%A5%EA%A1%BC">ビーリー</a>フにホットクックで蒸したきのことかナッツとか乗せるとおいしいし豪華になってよきですね。無水カレーうめぇ。</p> <h2>おわりに</h2> <p>2020年12月で29歳になりました。なんか今年めっちゃ良い1年だったので、これで30歳になっても悔いないな、という気分だったのですが実際にはあともう1年ありました。体感もう30ぐらいの気持ちだったりもするので、29歳はちょっとおまけの1年みたいな気持ちがしています。 気楽にいこうと思います。</p> <p>なんか、やっと人生楽しくなってきました。今死にたくないなーってときどき思うようになったの初めてでした。生きてればいいこともありますね。</p> yoshiko_pg 2020年これからのこと hatenablog://entry/26006613500884212 2020-01-22T08:18:54+09:00 2020-01-22T08:18:54+09:00 2019年を3行で 1月に次世代Webカンファレンスで話した リスペクトしてるカンファレンスでCSSセッションのオーナーをさせていただき嬉しかったです。 8月に結婚した なんとなく気恥ずかしくてあまり言ってなかった…ちなみにGoodpatch時代の同僚と。 12月に退職した FOLIO、2年間お世話になりました。たくさんの優秀な方々と働けてよかった。これからも仲良くしてください! 2020年なにするの? 4月以降は考え中です。以下のどれかかなーと思ってます。 会社員 多分そのうちまたどこかの会社にお世話になると思います。 ただその際に自分の中で決めたのが「次転職するとしたら実際に少し働いてみて… <h2>2019年を3行で</h2> <ul> <li>1月に次世代Webカンファレンスで話した <ul> <li>リスペクトしてるカンファレンスで<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>セッションのオーナーをさせていただき嬉しかったです。</li> </ul> </li> <li>8月に結婚した <ul> <li>なんとなく気恥ずかしくてあまり言ってなかった…ちなみにGoodpatch時代の同僚と。</li> </ul> </li> <li>12月に退職した <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/FOLIO">FOLIO</a>、2年間お世話になりました。たくさんの優秀な方々と働けてよかった。これからも仲良くしてください!</li> </ul> </li> </ul> <h2>2020年なにするの?</h2> <p>4月以降は考え中です。以下のどれかかなーと思ってます。</p> <h3>会社員</h3> <p>多分そのうちまたどこかの会社にお世話になると思います。<br/> ただその際に自分の中で決めたのが「次転職するとしたら実際に少し働いてみてから入社を決めたい」ということ。<br/> 勝手に体験入社と呼んでますが、要は入社の検討にあたって業務委託とかで数日間働かせてもらいたいということです。</p> <p>この必要性を痛感したのはどちらかというと自分が採用に関わっているときです。 質問内容とか色々工夫しましたが、やっぱり「面談・面接だけで一緒に働いてどうかを探るの難しい…数日一緒に働けたらずっとよくわかるのになぁ…」みたいな気持ちは拭えず。 加えて自分が採用される側になったときも会社に対して同じニーズがあったので、お互いに対してメリットがあると思い、入社を検討している会社さんには「こういうことできますか?」と聞いてみています。<br/> 幸いにもどの会社さんも、そういう制度がない場合でも「前例はないけどそういうのトライしてみたいと思っていたのでやってみましょう!」と快諾してくださるケースばかりでありがたいです。</p> <p>ただこれをするためには連続した数日×会社数ぶんの空いた時間が必要なので、自分が在職中だと難しいんですよね…<br/> 転職先を決めずに前職を退職したのはそういう理由です。</p> <p>というわけで、今年の1~3月はいくつかの会社さんに体験入社に行かせていただく予定です。楽しみ!<br/> チームの雰囲気や開発サイクル、社内環境や通勤経路の混み具合まで事前にわかるのでとても参考になりそう。<br/> 体験入社といっても<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%C8%CC%B3%B0%D1%C2%F7%B7%C0%CC%F3">業務委託契約</a>なので、ちゃんとアウトプット出せるようにがんばります。 先週まで行かせてもらっていたところは短期間でもいくつかの成果出せて喜んでもらえたのでよかった!</p> <p>ちなみに今回の転職では「デザイン」と「カルチャー」をキーワードにしています。ここに惹かれる会社さんを探したい。</p> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%EA%A1%BC%A5%E9%A5%F3%A5%B9">フリーランス</a></h3> <p>かなりありだなぁと思ってるんですが、今後妊娠出産となったときに産休育休など制度の恩恵を受けられないのが心細すぎますね…なので長期的には厳しいかなぁ。<br/> 女性のキャリアは難しいみたいなやつは今までほとんど思ったことなかったけど、妊娠出産を考えると安心できる選択肢が一気に限られる感じがあり、あーこういうことかーってちょっと実感しています。</p> <h3>起業</h3> <p>年始から特定のメンバーとちょっとずつプロダクト作りの計画を進めています。<br/> サブプロジェクトとして長い目でやるのか本腰入れて短期でガッと作り切るのか、後者の場合資金はどうするのか…など相談中なんですが、こういう活動にbetするのも楽しそうだなぁと思ってます。<br/> まあこれも子供とか考えると悩ましいけど、だからこそ逆にその手前の今しかできない気もする。</p> <h3>働かない</h3> <p>今年は開き直って長期の休みがないとできないことをしてみるとか。</p> <ul> <li>免許とる</li> <li>長めの旅行いく</li> <li>何かを勉強・履修する</li> </ul> <p>とかかなぁ?<br/> 勉強はデザイン(設計)系がいいなぁと思ってます。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BB%BA%B6%C8%B5%BB%BD%D1%C2%E7%B3%D8%B1%A1%C2%E7%B3%D8">産業技術大学院大学</a>の人間中心設計履修証明プログラムとか。他おすすめあったら知りたい。</p> <hr /> <p>2020年はこの中の可能性を探りながら、2021年以降どう進むかを模索する年になりそうだなぁと思ってます。<br/> 19歳から働いてるので社会人になってもうすぐ丸9年ですが、こんなに先が決まってないのは初めてなのでなかなか楽しいです。多少貯金しててよかったな。</p> <p>たまにはこういう年があってもいいよね〜。</p> yoshiko_pg git grepでソースコード内検索のあれこれ hatenablog://entry/8599973812328076303 2017-12-21T08:38:37+09:00 2017-12-21T15:34:17+09:00 いま作業してるリポジトリのファイル群から、目当ての文字列を1秒でも早く見つけるための話。 <p><a href="https://qiita.com/advent-calendar/2017/folio-sec">FOLIOアドベントカレンダー</a> 21日目です。<br/> 12月は読み応えのある記事が多いので、わたしからはさくっとしたTipsを。</p> <p>いま作業してる<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>のファイル群から、目当ての文字列を1秒でも早く見つけるための話。</p> <h2>おすすめのコマンド</h2> <p><code>grep</code> だと対象指定が面倒だったり、カレント<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リ以下を指定すると巨大なnode_modules以下のファイルも対象になってしまったりするので、git管理下のファイルのみを対象に検索できて高速な <code>git grep</code> がおすすめ。<br/> <code>git grep 検索したい文字列</code> だけで検索できる。</p> <p><code>~/.bashrc</code> や <code>~/.zshrc</code>などに以下の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%A4%A5%EA%A5%A2%A5%B9">エイリアス</a>を書いておくと、 <code>gg hoge</code> だけでgit管理下のファイルにある<a class="keyword" href="http://d.hatena.ne.jp/keyword/hoge">hoge</a>をハイライトつきでリストアップしてくれてめちゃ手軽。</p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synStatement">alias </span><span class="synIdentifier">gg</span><span class="synStatement">='</span><span class="synConstant">git grep</span><span class="synStatement">'</span> </pre> <p>もちろん日本語も <code>gg ほげほげ</code> でいける。 <code>gg hoge src/js</code> のようにさらに<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リを絞ることも。</p> <h2>単語検索</h2> <p>これめっちゃ便利なやつ。</p> <p><code>gg -w user</code> で、 <code>users</code> でもなく <code>userData</code> でもないただの <code>user</code> や <code>hoge.user</code> だけを検索できる。<br/> 探したい文字列が関連メソッドや別の変数名に頻出しているときにもかなり絞り込めて助かる。</p> <h2>大文字小文字を無視して検索</h2> <p><code>gg -i hoge</code> で <code>hoge</code> も <code>isHoge</code> も <code>HOGE</code> もひっかかる。</p> <h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/%C0%B5%B5%AC%C9%BD%B8%BD">正規表現</a></h2> <p><code>''</code> で囲うと <code>gg '\(hoge\|fuga\)'</code> のように<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C0%B5%B5%AC%C9%BD%B8%BD">正規表現</a>も使える。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%B9">エス</a>ケープはがんばる。</p> <h2>検索した中から別のワードを除外</h2> <p>まれにライブラリのコードがgit管理対象になっちゃってて引っかかってくるときとかに<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リ名で除外したり。</p> <p><code>gg 検索したい文字列 | grep -v 除外したい文字列</code></p> <p>ただ結果からハイライトが消えちゃいます。 <del><code>git grep</code> だけでこれやる方法あったら知りたいなあ。</del></p> <p>[12/21 15:30追記] 情報もらえました!</p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">&quot;gg 検索したい文字列 | <a class="keyword" href="http://d.hatena.ne.jp/keyword/grep">grep</a> -v 除外したい文字列&quot; は &quot;git <a class="keyword" href="http://d.hatena.ne.jp/keyword/grep">grep</a> -e 検索したい文字列 --and --not -e 除外したい文字列&quot; でよさそうマン</p>&mdash; Kotaro Hirayama (@kotaro_hirayama) <a href="https://twitter.com/kotaro_hirayama/status/943716723663945728?ref_src=twsrc%5Etfw">2017年12月21日</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p><code>gg -e 検索したい文字列 --and --not -e 除外したい文字列</code> で! <br/> <code>--and</code> とか使うときは <code>-e</code> がないとダメだったんですね。感謝 🙏</p> <hr /> <p>これぐらいですが、以降はわたしが普段よくやることとか。</p> <h2>使われ方で検索</h2> <ul> <li>代入: <code>gg 'hoge ='</code></li> <li>関数実行: <code>gg 'hoge('</code></li> <li>プロパティ: <code>gg '\.hoge'</code></li> <li>View<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>: <code>gg '&lt;Hoge</code></li> </ul> <h2>分解して検索</h2> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>でありがちなことなのですが。</p> <p><code>.alert--warning</code> みたいなスタイル定義やclass属性を消していいか調べるとき、 <code>gg alert--warning</code> して引っかからないから大丈夫そう〜とか思っていると</p> <pre class="code" data-lang="" data-unlink>className={`alert--${data.status}`}</pre> <p>みたいなViewとか逆に</p> <pre class="code" data-lang="" data-unlink>.alert { ... &amp;--warinig { ... } }</pre> <p>みたいなAltCSSとかがあったりして無事死亡するので、BEMとかバリエーションがあるっぽいクラス名は分割して <code>'alert--'</code> とか <code>'--warning'</code> とかで検索してみるのがおすすめ。</p> <p>というか、そういう苦労を強いられてしまうので自分が書くときはクラス名を動的に組み立てるの極力避けてます。 <a class="keyword" href="http://d.hatena.ne.jp/keyword/grep">grep</a>ビリティ大事!</p> yoshiko_pg UIデザインの会社から証券会社へ転職しました hatenablog://entry/8599973812292669589 2017-08-30T08:08:41+09:00 2017-08-30T08:08:41+09:00 2年と2ヶ月勤めたGoodpatchを先週いっぱいで退職しました。 最終出社日は今月の頭頃でした。 最終出社日まもなく終了。おせわになりました!! @ Goodpatch Inc. https://t.co/CiYMf8JN1G— よしこ (@yoshiko_pg) 2017年8月4日 Goodpatchでは入社してからずっとProttというプロトタイピングツールのWebフロントエンドを担当していました。 今週からは新しい会社で働いています。 なんでやめたの? 一言で言えるものでもないですが、あえて一言で言えば「2年の間に自分も会社も変わった」というところです。入社当時は自分の特性やニーズにと… <p>2年と2ヶ月勤めたGoodpatchを先週いっぱいで退職しました。<br/> 最終出社日は今月の頭頃でした。</p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">最終出社日まもなく終了。<br>おせわになりました!! @ Goodpatch Inc. <a href="https://t.co/CiYMf8JN1G">https://t.co/CiYMf8JN1G</a></p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/893403591746211840">2017年8月4日</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>Goodpatchでは入社してからずっとProttというプロトタイピングツールのWebフロントエンドを担当していました。<br/> 今週からは新しい会社で働いています。</p> <p></p> <h2>なんでやめたの?</h2> <p>一言で言えるものでもないですが、あえて一言で言えば「2年の間に自分も会社も変わった」というところです。入社当時は自分の特性やニーズにとてもマッチした環境だなーとしばしば感じていたのですが、2年という長い時間の間に私の求めるものも会社の規模や持ち味もそれぞれ変わったなーという。それはどちらが良い悪いではなく単純にマッチングの問題だと思ってます。これが辞めた理由のうちの半分。</p> <p>一方で良い意味で自分が変わった点として、思い返せば、入社前の私は「何を作るかより、(技術的に)どう作るか」に興味のあるタイプの人間でした。技術が手段ではなく目的なタイプ。でもこの2年の間に色々なプロジェクトや人や働き方を目の当たりにして、「何を作るか、どんな課題を解決するかってとても大切なんだなあ」という視点が自分の中に根を下ろしたように思います。いつの間にか自然と「何を課題と捉え、それを解決するために何を作るのか」という問いを中心に手を動かすようになっていました。<br/> 元々そういう視点を持つ人からしたら当たり前すぎることだと思いますが、私はそうではなかったので、単に今までと異なる視点を持てるようになったことが喜ばしいです。この点だけでもGoodpatchに入ってよかったなと思っています。</p> <p>そんなふうに「何を課題とし、そのために何を作るか」を最重要視するようになってからしばらく経った今年の7月。前述の理由で「そろそろ転職もありかなー」なんて思いながらいくつかの会社さんとお話しをさせていただいていた頃、たまたま知ったとある会社が取り組んでいる課題とプロダクトを知り、一目惚れのような勢いでめちゃくちゃ惹かれてしまいました。これが辞めた理由の残りの半分です。</p> <h2>次どこいくの?</h2> <p>IT<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D9%A5%F3%A5%C1%A5%E3%A1%BC">ベンチャー</a>でもあり証券会社でもある、<a href="https://folio-sec.com/">FOLIO</a>という会社に転職しました。創業2年目で、社員数は40人ぐらい。<br/> このブログを読んでいる人だと社名を知らない人のほうが多いかもですが、先月<a href="http://news.folio-sec.com/post/162696390821/170707">β版のリリース</a>が出たり、<a class="keyword" href="http://d.hatena.ne.jp/keyword/CDO">CDO</a>(Chief Design Officer)のブログ <a href="https://hajipion.com/2531.html">たかがFOLIOという1サービスの開発に、23歳が2年もの時間を捧げてしまった話</a> が話題になったりしたので知っている人も増えてきているかも。<br/> 会社の紹介記事も去年ぐらいからいくつも出ています。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=http%3A%2F%2Fthebridge.jp%2F2017%2F02%2Ffolio-raised-1800m-yen" title="18億円調達の FOLIO、テーマ投資+ロボアドバイザを武器に「誰でも資産運用できるオンライン証券会社」の今春開業を目指す - THE BRIDGE(ザ・ブリッジ)" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe></p> <h2>なんでそこにしたの?</h2> <p>先月のリリースやブログが出る少し前ぐらいのタイミングに、中のエンジニアの方から声をかけていただいたことで会社の存在を知りました。その直後ぐらいに別のルートで<a class="keyword" href="http://d.hatena.ne.jp/keyword/CDO">CDO</a>と知り合う機会があり、これも縁かと思ってとりあえずオフィスへおじゃましてみることにしました。<br/> そこでプロダクトや会社の話を聞いたら、なんかすごくわくわくしちゃったんですよね。とにかくわくわくしちゃったんです。すごく久しぶりに出会った「良い!!」という気持ちと共に、体がむずむずしてくるような感じ。今すぐ動き出したくなるような感じ。いつからか自分はずっとこんな衝動を探していたんじゃないかという気がして、いつの間にかほとんど気持ちが固まっていました。</p> <p>何にわくわくしたのかをもう少し噛み砕くと、大きく「メンバー」と「プロダクト」と「分野」に惹かれました。</p> <h3>メンバーがよさそう</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/CDO">CDO</a>を知ったきっかけは共通の知人たちの話題で<a class="keyword" href="http://d.hatena.ne.jp/keyword/CDO">CDO</a>とFOILOが絶賛されていたことだったのですが、その複数の知人は揃ってプロダクトやサービスへの感度が高い人たちだったので、この人たちがこれだけ褒めるならきっと良いサービスで<a class="keyword" href="http://d.hatena.ne.jp/keyword/CDO">CDO</a>も良いデザイナーなのかもな、と興味を持ちました。その後実際にオフィスにおじゃましてサービスを紹介してもらったとき、「やっぱり良かった!」と確信。私の中でデザイナーさんを信頼できることはフロントエンドの実装をする上でとても大事なのです。<br/> また、フロントエンドについてもお話を聞かせてもらうと、React+Redux+Flow+<a class="keyword" href="http://d.hatena.ne.jp/keyword/SSR">SSR</a>など今時な作り。nodeのBFFもあって、フロントエンドの業務がView寄りの部分とBFF寄りの部分で細分化されているそう。専門性高くきれいに作ってあるなあと思いました。<br/> そして印象的だったのが、社内のメンバーが他のメンバーをとにかくみんな優秀だと褒める。<br/> もちろん採用候補者に対してネガティブなことは言わないと思いますが、それにしても同じ社内のメンバーを胸を張って自慢できるっていいなと思ったんですよね。自分の理想のひとつでした。現在進行系でメンバー起因の悩みがあったらさすがにそこまで堂々と胸を張れないと思いますし。<br/> 最後の決め手が採用基準について。「(各採用担当が)自分よりできる人しか採らない」を実践されているようで、「この基準が徹底されている会社がいい!」と強く思いました。わたしも前職で採用面接をしていたのですが、わかっちゃいるけどなかなか遵守するのが難しいところなんですよね。。</p> <p>「何を作るか」と同じぐらい「誰と作るか」が重要だと思っているので、メンバーがよさそうという点には強く惹かれました。実際周りの人に<a class="keyword" href="http://d.hatena.ne.jp/keyword/FOLIO">FOLIO</a>へ転職すると伝えたとき、たびたび「あそこ優秀な人が揃ってるって聞きますよ」って言われました。これはかなり嬉しかったです。</p> <h3>プロダクトがよさそう</h3> <p>自社サービスを担当することになるなら、Goodpatchで担当していたProttのように自分がターゲットユーザーになるものがいいなーとは以前から思っていました。<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/FOLIO">FOLIO</a>は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B3%F4%BC%B0%C5%EA%BB%F1">株式投資</a>の知識があまりない人でも、自分の興味のあるテーマを選ぶことで少額から<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B3%F4%BC%B0%C5%EA%BB%F1">株式投資</a>ができるという、まさに自分が使いたいなーと強く思えるサービスでした。少し貯蓄に余裕ができたら株をやってみたいなーと思っていたので。<br/> また、それを既存の証券会社との提携ではなく、自分たちで業登録を受け証券会社を設立してやるっていうのがすごいなと思いました。専門知識と技術力と粘る力がないとできないと思います。<br/> 加えて可能性を感じたのは、デザインがとてもいい。サービスデザインもUIデザインもビジュアルデザインも。<br/> 難しいと敬遠されがちな投資というフィールドにおいて、こんなにフレンドリーなデザインで投資の一歩を踏み出せるというのは画期的だなと思いました。</p> <p>私は抽象的で規模の大きな夢を抱くのは苦手なほうなんですが、その私でもこのサービスでまずは日本をちょっと変えられるんじゃないかと本気で思いました。</p> <h3>分野がよさそう</h3> <p>自社サービスを担当することになるなら、自分が興味のある分野のものがいいなーと思っていました。<br/> ただ私趣味が少ないので、興味のある分野がかなり少ないんですよね。。仕事のIT以外で興味ある!って思える分野は、インテリアと子供ぐらい。<br/> でも生活と密接した「お金」にはもちろん興味があります。株もやってみたいと思ってましたし。<br/> 今まで数回確定申告をして<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B8%C4%BF%CD%BB%F6%B6%C8%BC%E7">個人事業主</a>としての税金や申請の知識はちょこっとだけつきましたが、当然法人のことは全然わからず…。以前から社会の仕組みをもっと知りたいという<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CD%DF%B5%E1">欲求</a>があったので、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B3%F4%BC%B0%C5%EA%BB%F1">株式投資</a>のサービスに携わる中で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E1%A5%A4%A5%F3">ドメイン</a>を学ぶことが社会の仕組みを学ぶことになり、自分の資産運用にも活かせるとなったら一石三鳥なわけです。<br/> 社内のメンバーには外務員試験を受けている人が増えているので、私もいつかそういうのもチャレンジしてみたいなーという気持ちです。</p> <p>あと、今までは関わる分野がかなりITに閉じていたのですが、そろそろ別の何かとの組み合わせを攻めてみたいなと思っていたんですよね。FinTechは少し前からだいぶ盛り上がってきているので、ちょうどいい時期かなと。</p> <p>いろいろ書きましたが、要は面白そうだったんです。その感じが伝われば嬉しいです。</p> <p>有給中にも何度か遊びに行ったり、今週月火と働いてみて、自分の選択は間違ってなかったなーと思っています。学ぶことがたくさんあって焦ると共に、まだまだ学べるんだという安心感もあります。大好きな”Be the worst”という言葉を久しぶりに思い出しました。<br/> 初めての金融系でカルチャーギャップに揉まれる毎日が始まりそうですが、自分のペースでがんばっていきたいと思います。</p> <p>正式リリースを控え、これから<a class="keyword" href="http://d.hatena.ne.jp/keyword/FOLIO">FOLIO</a>(<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%A9%A5%EA%A5%AA">フォリオ</a>)という名前を耳にする機会が多くなると思います!ぜひ覚えておいてください ٩(ˊᗜˋ*)و</p> <p>そして会社が気になった方は、昨日出たばかりのインタビュー記事を見てみてください!<br/> フロントエンド(React)/ バックエンド(<a class="keyword" href="http://d.hatena.ne.jp/keyword/Scala">Scala</a>)/ <a class="keyword" href="http://d.hatena.ne.jp/keyword/iOS">iOS</a>(Swift)他、絶賛募集中のようです。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.wantedly.com%2Fcompanies%2Ffolio%2Fpost_articles%2F73973" title="「投資の常識を変える」鍵は、ユーザーファーストな視点。iOSアプリ開発の舞台裏 | 株式会社FOLIO" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe></p> <p>ちょっとオフィス覗いて話聞いてみたい!って方、いつでもDMお待ちしてます🙆🏻</p> yoshiko_pg SPAにおけるCSSについて、ひとつの解(追記あり) hatenablog://entry/10328749687244089834 2017-05-09T08:52:02+09:00 2020-03-11T14:50:26+09:00 SPAにおけるCSSのありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた— よしこ (@yoshiko_pg) 2017年4月7日 この話を簡単にまとめておこうと思います。 結論を先に書くと「今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった」という感じです。 <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">SPAにおける<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>のありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/850300392294334465?ref_src=twsrc%5Etfw">2017年4月7日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </p> <p>この話を簡単にまとめておこうと思います。 <br /> 結論を先に書くと「今のところtemplate literal内に<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>を記述する形式の<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> in JSがいい感じ。Reactならstyled-componetnsが良かった」という感じです。</p> <h2>悩んでいたこと</h2> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>指向でSPAを作っていく上で、<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>(というかスタイリング)はどう書いていったらいいんだろう?ということに結構悩んでいました。<br /> HTMLとJSが<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>としてまとまっていく中で<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>だけは今まで通り別物として扱い、BEMなどでグロー<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%EB%A5%B9">バルス</a>コープと戦うのか?はたまた<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>の枠をはみ出てJS<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>の粒度に合わせた<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>化をするのか?<br /> 加えて、見た目も挙動も複雑なアプリケーションを作っていく上では以下の振る舞いが欲しくなってきます。</p> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>ごとにスコープが切られる</li> <li>JSと<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>で値を共有できる</li> <li>そのスタイルがどこで利用されているのか把握できる</li> </ul> <p>こうなるとやはり<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> Modulesや<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> in JS的なアプローチになってくるか…と思ったのですが、ロックイン回避や乗り換えのことを考えると同時に以下も意識したいところです。</p> <ul> <li>スタイルのsyntaxが標準の<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>から乖離しない</li> <li>エディタから<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>と同等のサポートを受けられる (syntax highlightや補完など)</li> <li>JSが特定のツールに依存せずvalidである</li> </ul> <p>そして最近「<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings">template literal</a>内に<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>を記述する形式の<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> in JS」がこれらの要件を満たしてくれることに気付いたので、記事を書くことにしました。</p> <h2>template literalを使用した<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> in JSってどんなの?</h2> <p>ライブラリによってそれぞれ色があります。<br /> <a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> in JSの比較表である <a href="https://github.com/MicheleBertoli/css-in-js">https://github.com/MicheleBertoli/css-in-js</a> の中からstar数の多いライブラリのコード例を3つ載せてみます。</p> <p><a href="https://github.com/styled-components/styled-components">styled-components</a></p> <pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synStatement">const</span> Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; </pre> <p><a href="https://github.com/zeit/styled-jsx">styled-jsx</a></p> <pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synStatement">export</span> <span class="synStatement">default</span> () =&gt; ( &lt;div&gt; &lt;p&gt;only <span class="synIdentifier">this</span> paragraph will get the style :)&lt;/p&gt; &lt;style jsx&gt;<span class="synIdentifier">{</span>` p <span class="synIdentifier">{</span> color: red; <span class="synIdentifier">}</span> `<span class="synIdentifier">}</span>&lt;/style&gt; &lt;/div&gt; ) </pre> <p><a href="https://github.com/rtsao/csjs">csjs</a></p> <pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synStatement">const</span> green = <span class="synConstant">'#33aa22'</span>; <span class="synStatement">const</span> styles = csjs` .panel <span class="synIdentifier">{</span> border: 1px solid black; background-color: $<span class="synIdentifier">{</span>green<span class="synIdentifier">}</span>; <span class="synIdentifier">}</span> .title <span class="synIdentifier">{</span> padding: 4px; font-size: 15px; <span class="synIdentifier">}</span> `; </pre> <p>私はReact案件では最初のstyled-componentsを使っています。<br /> あとAngular2以降もtemplate literalの形式を採用していますね。</p> <h2>template literalを使用した<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> in JSだと何が嬉しいの?</h2> <p>最初に挙げた要件を満たしてくれるのが嬉しいです。<br /> 挙げた要件をひとつずつ見ていきたいと思います。<br /> まず最初の3つはtemplate literal関係なく<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> in JSのメリットです。</p> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>ごとにスコープが切られる</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> in JSは大抵グロー<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%EB%A5%B9">バルス</a>コープではなくひとつのスタイルのまとまり単位でスコープを切ってくれます。 それにより「この名前どこかで使ってるかも…」という心配が不要になり、ネーミングコストや<a class="keyword" href="http://d.hatena.ne.jp/keyword/grep">grep</a>コストが激減します。<br /> クラス名の衝突については「適切な<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>設計をしていれば大丈夫」というのもあるのですが、むしろ今までグロー<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%EB%A5%B9">バルス</a>コープと戦う役割も担っていた<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>での設計がそこから開放されることで、もっと違う課題にフォーカスして形を変えていくのではないかと思っていて、少し楽しみだったりします。</p> <h3>JSと<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>で値を共有できる</h3> <p>複雑なアニメーションやドラッグでの要素の移動がたくさん出てくるようなリッチめなアプリケーションだと、どうしてもこれが欲しくなってきます。 <br /> <code>// style.cssの.hoge-classのxxxの値と合わせる</code>みたいなコメントはもう見たくない…!!</p> <p>styled-componentsではこんな感じで共有することができます。</p> <pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synComment">// style定義側</span> <span class="synStatement">const</span> Box = styled.div` width: $<span class="synIdentifier">{</span>(<span class="synIdentifier">{</span> width <span class="synIdentifier">}</span>) =&gt; width<span class="synIdentifier">}</span>px; height: $<span class="synIdentifier">{</span>(<span class="synIdentifier">{</span> width <span class="synIdentifier">}</span>) =&gt; width * 2<span class="synIdentifier">}</span>px; `; <span class="synComment">// 使用する側</span> <span class="synStatement">const</span> width = 300; &lt;Box width=<span class="synIdentifier">{</span>width<span class="synIdentifier">}</span>/&gt; <span class="synComment">// 300px×600pxのdivになる</span> </pre> <p>template literalの中に <code>${() =&gt; }</code> のように無名関数を埋め込むことで、引数にpropsが渡ってきます。無名関数の返り値がその部分の値として利用されることになります。 ちょっと見た感じがごちゃつきますが、valid JSな中で最小限にスマートに実現できているのがいいなと思います。<br /> <a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>の標準Syntaxからは離れてしまいますが、どちらをとるかというところですね…</p> <h3>そのスタイルがどこで利用されているのか把握できる</h3> <p>「一度書いた<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>は消せない」の理由がこれですね。。<br /> 通常の<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>だとそのスタイルがどこでどう使われているのかぱっとわからないので、どこに影響が出るかわからず消すに消せない、という問題があります。 <a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> in JSならスタイル定義はJSの形式でimportしてくるので、参照先のスタイル定義が消されてしまったら静的にエラーになります。<br /> 逆にこのスタイル定義がどこで使われているかというのもexportしたオブジェクトがどこからimportされているかがわかればいいので、JS向けのツールや<a class="keyword" href="http://d.hatena.ne.jp/keyword/IDE">IDE</a>の機能を活用できます。 ある定義がいつの間にかどこからも参照されなくなっている、というケースも<a class="keyword" href="http://d.hatena.ne.jp/keyword/IDE">IDE</a>のハイライトやlinterでかなり見つけやすくなるでしょう。</p> <p>そしてここからがtemplate literalの強みです。</p> <h3>スタイルのsyntaxが標準の<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>から乖離しない</h3> <p>ここまでで挙げた3つの要件は<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> in JSなら解決できるのですが、その採用にあたってはこれが一番の障壁でした。<br /> <a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> in JSによく見られるアプローチに、スタイルをJSのオブジェクト<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%C6%A5%E9%A5%EB">リテラル</a>で書いていくというものがあります。</p> <pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synStatement">const</span> styles = StyleSheet.create(<span class="synIdentifier">{</span> blue: <span class="synIdentifier">{</span> backgroundColor: <span class="synConstant">'blue'</span> <span class="synIdentifier">}</span>, hover: <span class="synIdentifier">{</span> <span class="synConstant">':hover'</span>: <span class="synIdentifier">{</span> backgroundColor: <span class="synConstant">'red'</span> <span class="synIdentifier">}</span> <span class="synIdentifier">}</span>, small: <span class="synIdentifier">{</span> <span class="synConstant">'@media (max-width: 600px)'</span>: <span class="synIdentifier">{</span> backgroundColor: <span class="synConstant">'red'</span>, <span class="synIdentifier">}</span> <span class="synIdentifier">}</span> <span class="synIdentifier">}</span>); </pre> <p>(star数が一番多そうな <a href="https://github.com/Khan/aphrodite">https://github.com/Khan/aphrodite</a> より)</p> <p>私がよく見かけていた<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> in JSライブラリの形式はほとんどこれだったので、最初は「<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> in JSは<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>をJSオブジェクトとして記述する」と誤解していたほどです。<br /> JSオブジェクトの形式だと</p> <ul> <li>syntaxが<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>の標準からだいぶ外れる <ul> <li>通常の<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>のsyntaxに移行したくなったとき変換したりが面倒そう</li> <li>sketchやzeplinからbox-shadowの指定をコピペとかできない</li> </ul> </li> <li>JSオブジェクトなので<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>ではクォーテーションが不要なはずの箇所でも必須 <ul> <li>書くのが面倒そう</li> </ul> </li> </ul> <p>このような理由から個人的にはなかなか乗っかりにくいなと感じていて、グローバルなAltCSSに甘んじていました。でもそれはそれで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>から<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>だけ置いてけぼり感が強く、つらい…。。</p> <p>しかし<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> in JSにはオブジェクト<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%C6%A5%E9%A5%EB">リテラル</a>のライブラリだけではなく、styled-componentsのようにES2015のtemplate literalを使用したライブラリもあるのです。 これなら中には<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>のsyntaxをそのまま記述することができ、なおかつJSとして扱えます。<br /> 見た目はなかなか異物感がありますが、なるほどなーと思いました。</p> <h3>エディタから<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>と同等のサポートを受けられる</h3> <p>これはちょっとハック的な感じなので余談なのですが。<br /> syntax highlightや補完が<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>(AltCSS)と同じように効くかというのも開発効率の上で重要なポイントです。<br /> 私が使っているWebStormではLanguage injectionという機能を使ってここをカバーすることができています。</p> <pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synComment">// language=SCSS</span> <span class="synStatement">const</span> Title = styled.h1` &amp; <span class="synIdentifier">{</span> font-size: 1.5em; text-align: center; color: palevioletred; <span class="synIdentifier">}</span> `; </pre> <p>これで中括弧の中では<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>(SCSS)としてのsyntax highlightや補完やlintが効くようになります。<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>のEmmetも効きます。</p> <p>こんな感じ</p> <p><span itemscope itemtype="http://schema.org/Photograph"><a href="http://f.hatena.ne.jp/yoshiko_pg/20170509093132" class="hatena-fotolife" itemprop="url"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20170509/20170509093132.png" alt="f:id:yoshiko_pg:20170509093132p:image" title="f:id:yoshiko_pg:20170509093132p:image" class="hatena-fotolife" itemprop="image"></a></span></p> <p>ハックっぽい上にtemplateの中にも外にも不要な記述が必要になってしまいますが、背に腹は代えられない感じですね…できればJSXのように市民権を得てエディタでサポートされるようになると嬉しいなぁって思ってます。</p> <h3>JSが特定のツールに依存せずvalidである</h3> <p>もう一つの選択肢である<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> Modulesのネックがここでした。<br /> JSに <code>import styles from "./style.css";</code> とか書きたくなかったんですよね。。。もちろんwebpackに依存しちゃうのも嫌で。。 styled-componentsだとJSが完全にvalidであるところも好きなポイントです。</p> <p>※ 私は挙げてきたような理由から<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> Modulesやobject literalタイプの<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> in JSを本格的に本番採用したことがないので、もしかしたら挙げたデメリットの中で認識が違ってるところがあるかもしれません。その場合は教えてもらえればと思います。</p> <h2>template literalのライブラリの中でもなんでstyled-componentsがおすすめなの?</h2> <p>styled-componentsを選んだ理由はその形式のライブラリの中で一番star数が多かったことと、styled-componentsの特徴である<strong>既存の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>にスタイルをあてるのではなく独立したスタイル用の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>を作っていく</strong>というアプローチが良いものだと思ったからです。 ただこれはこの記事で紹介した内容とはまた違って、より<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>設計的な側面の話になるので、今後別途記事を書いて紹介できればなと思っています。</p> <h2>まとめ</h2> <p>こんな感じの考えを経て今styled-componentsを業務で採用し、快適にスタイリングしています。<br /> SPAにおける<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>はまだ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%D5%A5%A1%A5%AF%A5%C8%A5%B9%A5%BF%A5%F3%A5%C0%A1%BC%A5%C9">デファクトスタンダード</a>になっているものもなく皆それぞれ最適解を探しているような雰囲気があるので、数ある解のうちのひとつとして参考になればと思います。</p> <p>また、今回は<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>を代替するライブラリ選定の話でしたが、それに加えてJS<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%EC%A1%BC%A5%E0%A5%EF%A1%BC%A5%AF">フレームワーク</a>やその他ツールも含めた全体的なSPAにおける技術選定の方針や内容の話をこちらのイベントでする予定ですので、よろしければ。<br /> <a href="https://teamspirit.connpass.com/event/55051/">【React.js】Goodpatch×TeamSpirit Meetup - connpass</a></p> <h2>追記:</h2> <p>転職によってチーム編成が変わったこともあり、2018年頃から<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> Modulesを選定するようになりました。</p> <h3>得たもの:</h3> <ul> <li>より標準に沿ったsyntax(validな<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>ファイル)</li> <li>動作時のパフォーマンス</li> </ul> <h3>失ったもの:</h3> <ul> <li>ビルド設定の簡潔さ</li> </ul> <p>評価軸そのものはあまり変わっておらず、上記メリデメのどちらをとるかの価値観が変わった感じです。<br /> こちらのスライドもご参考ください。</p> <p><a href="https://yoshiko-pg.github.io/slides/20180419-scramble/">SPA&#x306B;&#x304A;&#x3051;&#x308B;CSS&#x306B;&#x3064;&#x3044;&#x3066;&#x3001;&#x3082;&#x3046;&#x3072;&#x3068;&#x3064;&#x306E;&#x89E3; - @yoshiko_pg</a></p> yoshiko_pg 参加者の名は。の名札デザインを募集します! hatenablog://entry/10328749687220525558 2017-02-24T08:30:00+09:00 2017-02-24T08:30:02+09:00 先日、こんなWebアプリを公開しました。 yoshiko.hatenablog.jp おかげさまでご好評をいただいており、利用しました!というご報告も複数いただいています! TDDBC 富山で使わせてもらいました。むちゃくちゃ便利だった! / イベント用の名札シート印刷アプリ「参加者の名は。」を作った - エンジニアをリングする https://t.co/Lp9GzxWao1— Takuto Wada (@t_wada) 2017年2月20日 参加者の名は。使ったら名札準備と受付めっちゃスムーズになったのでよかった。 / “「Rubyエンジニアが語る、2016年の振り返りとこれから」レポート!… <p>先日、こんなWebアプリを公開しました。</p> <p><iframe src="http://yoshiko.hatenablog.jp/embed/your-name" title="イベント用の名札シート印刷アプリ「参加者の名は。」を作った - エンジニアをリングする" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://yoshiko.hatenablog.jp/entry/your-name">yoshiko.hatenablog.jp</a></cite></p> <p>おかげさまでご好評をいただいており、利用しました!というご報告も複数いただいています!</p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">TDDBC 富山で使わせてもらいました。むちゃくちゃ便利だった! / イベント用の名札シート印刷アプリ「参加者の名は。」を作った - エンジニアをリングする <a href="https://t.co/Lp9GzxWao1">https://t.co/Lp9GzxWao1</a></p>&mdash; Takuto Wada (@t_wada) <a href="https://twitter.com/t_wada/status/833531510158290944">2017年2月20日</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">参加者の名は。使ったら名札準備と受付めっちゃスムーズになったのでよかった。 / “「<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a>エンジニアが語る、2016年の振り返りとこれから」レポート! - TECHNICA Speee engineer blog” <a href="https://t.co/dx6H3odbOp">https://t.co/dx6H3odbOp</a></p>&mdash; takanamito (@takanamito) <a href="https://twitter.com/takanamito/status/824922183507914752">2017年1月27日</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">便利! <br><br>参加者の名は。<a href="https://t.co/a9pFy2CpLF">https://t.co/a9pFy2CpLF</a> <a href="https://t.co/iw6BVPUMFN">pic.twitter.com/iw6BVPUMFN</a></p>&mdash; kkbyu (@kkbyu) <a href="https://twitter.com/kkbyu/status/824567450263969792">2017年1月26日</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>ありがとうございます🤗</p> <p>本日、以下の点を更新しました。</p> <ul> <li>出力される名札の並び順をアルファベット順に変更</li> <li>カスタム背景画像アップロード機能</li> <li>angular-<a class="keyword" href="http://d.hatena.ne.jp/keyword/cli">cli</a>の最新化</li> </ul> <p>カスタム背景画像はCreateボタンの下にこんなエリアができて、背景画像を変えたり(今同じデザインの色違いしかないですが・・・)、お好みの画像を背景画像としてアップロードできるようになりました。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20170224/20170224015750.png" alt="f:id:yoshiko_pg:20170224015750p:plain" title="f:id:yoshiko_pg:20170224015750p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>そしてそして、ここに並ぶプリセットのデザインをもっと増やしていきたいなと考えており、デザインコントリビュートしてくださるかたを募集します🙌<br/> 背景画像+アイコンや文字のデザイン情報があれば、それらを反映させて動的にデザインを変更できるので! <br/> 詳細は以下にまとめています。</p> <p><a href="https://github.com/yoshiko-pg/your-name/issues/1">&#x540D;&#x672D;&#x30C7;&#x30B6;&#x30A4;&#x30F3;&#x30D7;&#x30EA;&#x30BB;&#x30C3;&#x30C8;&#x306E;&#x8FFD;&#x52A0; &middot; Issue #1 &middot; yoshiko-pg/your-name &middot; GitHub</a></p> <p>コントリビュートしてみたい!というデザイナーさんがいらっしゃいましたら、上記issueへのコメントでも<a href="https://twitter.com/yoshiko_pg">Twitter</a>でのメンションでも構いませんのでぜひご連絡ください ✨<br/> また、応援してくださる方はこちらの記事をデザイナーさんに届くように拡散していただけると助かります!</p> <p>今後はストックしているご要望に対応しつつ、connpass以外のプラットフォームへの対応も進めていけたらいいなと思っています💪 <br/> フィードバックお待ちしています💁</p> yoshiko_pg イベント用の名札シート印刷アプリ「参加者の名は。」を作った hatenablog://entry/10328749687206212852 2017-01-13T08:00:00+09:00 2017-01-13T09:59:31+09:00 ConnpassのイベントURLから印刷用のネームカードシートを生成できるWebアプリを作ったので、その紹介と技術的なところを。 <p>こんなものを作ってみました。</p> <p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fyoshiko-pg.github.io%2Fyour-name%2F" title="参加者の名は。- Name cards generator for events" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://yoshiko-pg.github.io/your-name/">yoshiko-pg.github.io</a></cite></p> <p>ConnpassのイベントURLを入力してCreateボタンを押すと、名刺サイズの参加者の名札を印刷プレビューできるようになっています。<br/> (主催するイベントがないけど動きを見てみたい場合、入力欄右下の「demo」を押すと雰囲気がわかるかと。)</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20170113/20170113011832.png" alt="f:id:yoshiko_pg:20170113011832p:plain" title="f:id:yoshiko_pg:20170113011832p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>右下の印刷ボタンで印刷できます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20170113/20170113011928.png" alt="f:id:yoshiko_pg:20170113011928p:plain" title="f:id:yoshiko_pg:20170113011928p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>管理者や補欠者もお好みで含めることができます。</p> <h2>背景</h2> <p>カンファレンスや勉強会って、普段ネット上でしか知らない人と直接話せる機会でもあると思うのですが、いざその場で顔や名刺を見ても誰が誰かわからないんですよね。。<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/SNS">SNS</a>ではよく見るけど顔がわからなくて、でも話したいことがあるときとか、頭の上にアイコンとIDが表示されるメガネがほしい・・・ってたびたび思ったりします。</p> <p>そんな思いから、自分がスタッフとして関わっているイベントではアイコンとIDの入った名札を用意するようにしていました。</p> <p><blockquote class="twitter-tweet" data-lang="HASH(0xa12ad18)"><p lang="ja" dir="ltr">名札セット完了!<br>開場は19:15、スタートは19:40から!<br>お待ちしてます ¯◡¯ <a href="https://twitter.com/hashtag/goodpatch?src=hash">#goodpatch</a> <a href="https://t.co/3JpJs4QoOH">pic.twitter.com/3JpJs4QoOH</a></p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/753887497088708609">July 15, 2016</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>参加者の方からもかなり評判がよく、喜んでいただけたり、写真を撮ってくださるかたもいたり。<br/> ただ印刷データの生成は自分用の簡単な<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>でまかなっていたので、汎用的な形でオープンに提供できたらいいなということで作りました。</p> <p>参加者一覧データはイベントIDから引ける<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>が開いていなかったためイベントの参加者一覧ページを<a class="keyword" href="http://d.hatena.ne.jp/keyword/yql">yql</a>で取得してパースしています。名札生成ってそんなに頻繁にやるものでもないのでめっちゃ負荷かかったりはしないと思うのですが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>ではないのでConnpassさんのほうからやめてくださいとお言葉があれば閉じるつもりです。</p> <h2>技術面</h2> <p>Angular / TypeScript / Fluxの実践のために何かアプリ作りたいなーということで作りました。<br/> 今は、ざっと書き下して動くところまでこぎつけたので、そろそろテスト書いてリファクタするかーぐらいのタイミングなのでコードは全然出来上がってないです。。ここからいじくって、どうしたらスマートになるかいろいろ試してみようかと。</p> <p>かいつまんで感想を。</p> <h3>Angular (v2)</h3> <p>この規模のアプリにはオーバーキルですが、まだProduction版を触っていなかったので。<br/> angular-<a class="keyword" href="http://d.hatena.ne.jp/keyword/cli">cli</a>すごい。alphaのときあんなに手こずった開発環境がコマンド一発で・・・AoTもオプションひとつ。これのおかげでさくさくできました。<br/> buildやserveのほか、<a class="keyword" href="http://d.hatena.ne.jp/keyword/rails">rails</a>のscaffoldのようなジェネレータも用意されています。<a class="keyword" href="http://d.hatena.ne.jp/keyword/github">github</a>-pagesへのデプロイコマンドまで!<br/> <a href="http://qiita.com/armorik83/items/5ad850b78e5893d41570">Angular-CLI&#x30C1;&#x30FC;&#x30C8;&#x30B7;&#x30FC;&#x30C8; - Qiita</a><br/> 便利なぶん、うまく動かなかったり用意されたもの以外のことをしたいときには苦労しそうだな感もあります。webpackのconfigも隠蔽されているし。。</p> <p>本体については、TypeScript側からの支えもあり道を踏み外しにくくなっている感じがしました。<br/> productionリリースまでに結構<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>が変わったので、検索したときRC以前の古い<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>の情報が出てくるのがけっこうつらかった。。<br/> お行儀よくレールの中で作るか、本体のコード読んだりして自力でがんがん掘り進むか、スピードに乗れるとしたらこのどちらかかなと思います。<br/> あとわからないことがあったらng-japanコミュニティのSlackで聞けるのはすごく心強いです。</p> <h3>TypeScript</h3> <p>型めっちゃいい。<br/> ただ普段使っているeslintrcが使えないのが悲しかったので、 <a href="https://github.com/eslint/typescript-eslint-parser">https://github.com/eslint/typescript-eslint-parser</a> を入れてがんばりました。 TypeScript独自な部分のlintがちょっと不安なのでtslintと両方かけています。</p> <p>Angularでは型定義ファイルをtsdとかtypingsじゃなくてnpmの@typesというスコープで管理していて、スムーズでよかったです。<br/> <a href="http://qiita.com/laco0416/items/ed1aadf335f12cd3618d">npm&#x3067;TypeScript&#x306E;&#x578B;&#x5B9A;&#x7FA9;&#x3092;&#x7BA1;&#x7406;&#x3067;&#x304D;&#x308B;types&#x30D1;&#x30C3;&#x30B1;&#x30FC;&#x30B8;&#x306B;&#x3064;&#x3044;&#x3066; - Qiita</a></p> <h3>Flux</h3> <p>概念は何度も見てましたが業務で触るアプリケーションには導入していないので、まだ今までFluxベースでひとつのアプリケーションを作りきったことがありませんでした。<br/> 今回はベーシックな形をス<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%E9%A5%C3%A5%C1">クラッチ</a>で書いてみたかったので、ライブラリは使わずに <a href="https://github.com/azu/mini-flux">https://github.com/azu/mini-flux</a> を参考に最小限のパーツを書いてみました。 AngularなのでActionCreatorやStoreはDIしたかったのですが、同じdispatcherを持たせた<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>をDIできるように登録するところでちょっと手こずりました。。factory関数作ってなんとかなりました。</p> <p>状態を持つ場所と変更される経路が定められることで、考えることが少なくなりますね。<br/> これまで状態がぐちゃぐちゃ入り乱れて破綻したアプリケーションを何度か見てきたので、心が洗われました。</p> <p>ただちょっと冗長に感じる部分もあったので、次は <a href="https://vsavkin.com/managing-state-in-angular-2-applications-caf78d123d02#.78ww1uzg9">Tackling State &ndash; Angular 2</a> とか <a href="https://medium.com/@milankinen/good-bye-flux-welcome-bacon-rx-23c71abfb1a7#.vttwp2b1g">Good bye Flux, welcome Bacon/Rx? &ndash; Matti Lankinen &ndash; Medium</a> にあるようなObservableベースのデータフローを試してみたいです。</p> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a></h3> <p>AngularにはShadow DOMのPolyfill的な仕組みが入っていてComponentごとのスタイルをスコープで守ってくれるので、それに甘えて結構適当な書き方をしています。。<br/> 今までの<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>設計の方法っていかにグロー<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%EB%A5%B9">バルス</a>コープと戦うかという部分も大きかったと思うので、今後<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%EC%A1%BC%A5%E0%A5%EF%A1%BC%A5%AF">フレームワーク</a>などでComponentごとのスコープが当たり前になっていくと必要な<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>の設計もまた違った形になってくるだろうなというところが気になっています。既にそういう前提の設計手法あるかな?あったら教えてください。</p> <p>ちなみにブラウザの高さに応じてプレビューの部分が固定比率で伸縮するのはこちらのテクニックを使っています。<br/> <a href="http://yoshiko-pg.github.io/slides/20150830-backtobasics/">CSS&#x3067;&#x56FA;&#x5B9A;&#x6BD4;&#x7387;&#x30EC;&#x30A4;&#x30A2;&#x30A6;&#x30C8; - @yoshiko_pg</a></p> <p>印刷用<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>についてはこちらの記事が参考になりました。<br/> <a href="http://qiita.com/cognitom/items/d39d5f19054c8c8fd592">&#x305D;&#x308D;&#x305D;&#x308D;&#x771F;&#x9762;&#x76EE;&#x306B;&#x3001;HTML&#x3067;&#x5E33;&#x7968;&#x3092;&#x63CF;&#x304F;&#x8A71;&#x3092;&#x3057;&#x3088;&#x3046;&#x304B; - Qiita</a></p> <hr /> <p>かいつまんで書くつもりが長くなってしまった。。。</p> <p>とにかくそんなこんなで最初は冬休み中の素振り目的がメインだったのですが、普通に使えるなと思って公開してみました。<br/> まだ外見も中身もやりたいことの進捗率は50%ぐらいで発展途上ですが、どこかで役に立てば嬉しいです。</p> <p>あとカスタムの背景画像をアップロードできるようにしたいのと、プリセットのデザインも増やしたいので名札デザイン案を提案してくださるデザイナーさんがいたらめっちゃうれしいです><</p> <p>他要望あれば<a href="https://github.com/yoshiko-pg/your-name/issues">こちら</a>にください!</p> <p>では。</p> <p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fyoshiko-pg.github.io%2Fyour-name%2F" title="参加者の名は。- Name cards generator for events" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://yoshiko-pg.github.io/your-name/">yoshiko-pg.github.io</a></cite></p> <p>(名前、最初NameCardGeneratorとかにしてたけどつまんなかったのでふざけた😇 )</p> yoshiko_pg 25歳は20代後半ではない。半ばだ。 hatenablog://entry/10328749687199229813 2016-12-16T08:30:00+09:00 2016-12-16T08:16:12+09:00 20代後半じゃなくて半ばと言えって同い年から圧がかかっている— よしこ (@yoshiko_pg) 2016年12月15日 昨日またひとつ歳をとってしまいました・・・時の流れには逆らえない。 TwitterやFacebookでのお祝いメッセージありがとうございました!! 去年も誕生日や年末に1年を振り返るブログを書いていて、今年はどうしようかな〜と思ったのですが、24歳はどんな歳だったかなんて自分でもきっとすぐに忘れてしまうので、備忘録的に書き残しておこうかと思います。時期的に年末の振り返りも兼ねて! (めっちゃ個人的な記事です) 仕事(会社で) 去年に引き続きGoodpatchでフロントエン… <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">20代後半じゃなくて半ばと言えって同い年から圧がかかっている</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/809405201245302784">2016年12月15日</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>昨日またひとつ歳をとってしまいました・・・時の流れには逆らえない。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>や<a class="keyword" href="http://d.hatena.ne.jp/keyword/Facebook">Facebook</a>でのお祝いメッセージありがとうございました!!<br/> 去年も誕生日や年末に1年を振り返るブログを書いていて、今年はどうしようかな〜と思ったのですが、24歳はどんな歳だったかなんて自分でもきっとすぐに忘れてしまうので、備忘録的に書き残しておこうかと思います。時期的に年末の振り返りも兼ねて! <br/> (めっちゃ個人的な記事です)</p> <h2>仕事(会社で)</h2> <p>去年に引き続きGoodpatchでフロントエンドエンジニアをしています。<br/> 今年は担当プロダクトであるプロトタイピングツール<a href="https://prottapp.com/ja/">Prott</a>で、以下の機能を開発&リリースしました。</p> <ul> <li><a href="https://blog.prottapp.com/post/ja/overlay">Prott Blog - &#x30AA;&#x30FC;&#x30D0;&#x30FC;&#x30EC;&#x30A4;&#x6A5F;&#x80FD;&#x3092;&#x30EA;&#x30EA;&#x30FC;&#x30B9;&#x3057;&#x307E;&#x3057;&#x305F;</a></li> <li><a href="https://blog.prottapp.com/post/ja/screen-group">Prott Blog - &#x30B9;&#x30AF;&#x30EA;&#x30FC;&#x30F3;&#x30B0;&#x30EB;&#x30FC;&#x30D7;&#x6A5F;&#x80FD;&#x3092;&#x30EA;&#x30EA;&#x30FC;&#x30B9;&#xFF01;</a></li> <li><a href="https://blog.prottapp.com/post/ja/interaction-map-beta">Prott Blog - &#x5F85;&#x671B;&#x306E;&#x753B;&#x9762;&#x9077;&#x79FB;&#x56F3;&#x6A5F;&#x80FD;&#x3092;&#x30D9;&#x30FC;&#x30BF;&#x30EA;&#x30EA;&#x30FC;&#x30B9;&#x3057;&#x307E;&#x3057;&#x305F;&#xFF01;&#x1F602;&#x1F389;&#x2728;</a></li> </ul> <p>どれも好評のようで嬉しい限りです。特に画面遷移図はES2015+で好きに書けたことと、要件決めやUIデザインなど広い範囲を自分で担当できたので、我が子のような思いがあります。今は早くベータを取るべく改善を頑張っています!</p> <p>そうそう、10月ぐらいに「テッ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%EA%A1%BC%A5%C9">クリード</a>」という肩書きをもらいました。厳密にはProttのフロントエンドテッ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%EA%A1%BC%A5%C9">クリード</a>です。<br/> とはいえ働き方が変わったわけではなく、技術選定などProttの開発に関する判断権限を会社からいただいたという感じです。<br/> テッ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%EA%A1%BC%A5%C9">クリード</a>って名前いいね!って言ってもらえることが多くてうれしいです。ナイスネーミングセンス!</p> <h2>仕事(その他)</h2> <p>1月にはschooさんで<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>のコース授業をさせていただきました。</p> <p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fschoo.jp%2Fclass%2F3059" title="実践JavaScript 吉田 真麻 先生 - 無料動画学習|Schoo(スクー)" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://schoo.jp/class/3059">schoo.jp</a></cite></p> <p>ハラハラドキドキ準備にヒィヒィな感じだったんですが、終わってみればなかなか好評だったようです。自分としてもよい経験になりました!</p> <p>あとは昔から関わりのある会社さんで半年強ほどの期間、フロントエンドのアド<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%A4">バイ</a>ザーとしてAngularJSアプリケーションのコードレビューをしたりもしていました。だいたい週に1度、1対1でコードを見ながらアド<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%A4">バイ</a>スをしたり、開発環境のモ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C0%A5%F3">ダン</a>化を進めたり。<br/> メンターをさせてもらった方がレビューやアド<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%A4">バイ</a>スを重ねるごとにどんどん伸びていく姿は、自分の刺激にもなっていました。</p> <p>それと去年の11月に出版した<a href="https://www.amazon.co.jp/exec/obidos/ASIN/4798141577/hatena-blog-22/">モダンコーディング本</a>はおかげさまで今年2回増刷しました!!🎉🎉🎉 <br/> あと1回増刷したら刊行数1万部なので、その日が待ち遠しい〜!!!</p> <p>そしてそして10月から台湾版も発売されています!</p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">うおおおモ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C0%A5%F3">ダン</a>コーディング本の台湾版見本誌届いたあああああ<br>表紙なんか予想外な感じだけど、かっこ悪くなくてよかった!!<br>中身はデザインも内容もそのままだけどサイトのキャプチャまで全部<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C8%CB%C2%CE%BB%FA">繁体字</a>になってて、感慨深い…翻訳ありがとうございます🙏 <a href="https://t.co/gfNiT9Pw3O">pic.twitter.com/gfNiT9Pw3O</a></p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/799794920915513345">2016年11月19日</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>執筆中は何度も折れそうになってましたが、なんとか乗り越えて広く読まれる本になれたこと、本当に嬉しいです🤗</p> <h2>登壇</h2> <p>去年の誕生日から今までの間にはこんな感じのことを喋りました!</p> <ul> <li><a href="http://yoshiko-pg.github.io/slides/20151215-scripty">&#x307E;&#x3060;&#x4E2D;&#x592E;&#x5BC4;&#x305B;&#x3067;&#x6D88;&#x8017;&#x3057;&#x3066;&#x308B;&#x306E;&#xFF1F; - @yoshiko_pg</a></li> <li><a href="http://yoshiko-pg.github.io/slides/20160120-tech-for-writing">&#x57F7;&#x7B46;&#x3092;&#x652F;&#x3048;&#x308B;&#x6280;&#x8853; - @yoshiko_pg</a></li> <li><a href="http://yoshiko-pg.github.io/slides/20160512-frontend-biz">Prott Front-end in 2016</a></li> <li><a href="http://yoshiko-pg.github.io/slides/20160517-ngmtg">Angular 2&#x3067;&#x7D10;&#x89E3;&#x304F;Decorators</a></li> <li><a href="http://yoshiko-pg.github.io/slides/20160610-webapp">&#x5916;&#x90E8;&#x5165;&#x529B;&#x306E;&#x6539;&#x884C;&#x306B;&#x8CA0;&#x3051;&#x306A;&#x3044;&#x4F53;&#x3092;&#x4F5C;&#x308B; - @yoshiko_pg</a></li> <li><a href="http://yoshiko-pg.github.io/slides/20160714-sushijs">&#x72EC;&#x81EA;&#x30BA;&#x30FC;&#x30E0;&#x5B9F;&#x88C5; - @yoshiko_pg</a></li> <li><a href="http://yoshiko-pg.github.io/slides/20160715-gp-frontend-2">&#x3055;&#x3088;&#x306A;&#x3089;&#x3001;CoffeeScript</a></li> <li><a href="http://yoshiko-pg.github.io/slides/20160916-spa">1px&#x3092;&#x3081;&#x3050;&#x308B;&#x6226;&#x3044; - @yoshiko_pg</a></li> <li><a href="http://yoshiko-pg.github.io/slides/20161112-nodefes">Tasting ES2017 - @yoshiko_pg</a></li> </ul> <p>最近はちょっと前で話すことに及び腰になっている感。。<br/> もっと自分の足場を固めなきゃなぁってほうに意識が向いてます。</p> <h2>ブログ</h2> <p>更新頻度が😇 それでも9本書いていたんだ…(記憶にない)</p> <ul> <li><a href="http://yoshiko.hatenablog.jp/entry/2015/12/15/001750">24&#x5E74;&#x3092;&#x632F;&#x308A;&#x8FD4;&#x308B;&#x3002; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a></li> <li><a href="http://yoshiko.hatenablog.jp/entry/2015/12/31/215215">&#x3055;&#x3088;&#x306A;&#x3089;2015&#x5E74; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a></li> <li><a href="http://yoshiko.hatenablog.jp/entry/2016/02/01/083056">&#x30A2;&#x30A4;&#x30B3;&#x30F3;&#x304B;&#x3048;&#x307E;&#x3057;&#x305F; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a></li> <li><a href="http://yoshiko.hatenablog.jp/entry/2016/03/01/081102">&#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x304C;&#x30C7;&#x30B6;&#x30A4;&#x30F3;&#x5165;&#x9580;&#x66F8;&#x3092;3&#x518A;&#x8CB7;&#x3063;&#x3066;&#x307F;&#x305F;&#x306E;&#x3067;&#x30E1;&#x30E2;&#x3068;&#x96D1;&#x611F; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a></li> <li><a href="http://yoshiko.hatenablog.jp/entry/2016/03/15/082031">&#x304A;&#x77E5;&#x3089;&#x305B;&#x3075;&#x305F;&#x3064; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a></li> <li><a href="http://yoshiko.hatenablog.jp/entry/2016/05/18/082821">&#x30E2;&#x30C0;&#x30F3;&#x30B3;&#x30FC;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x672C;&#x306E;&#x53F0;&#x6E7E;&#x7248;&#x304C;&#x51FA;&#x307E;&#x3059;&#xFF01;&#xFF01;&#xFF01; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a></li> <li><a href="http://yoshiko.hatenablog.jp/entry/2016/07/04/234128">&#x6C17;&#x304C;&#x3064;&#x3044;&#x305F;&#x3089;&#x534A;&#x6708;&#x3067;&#x5F15;&#x3063;&#x8D8A;&#x3057;&#x3066;&#x3044;&#x305F; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a></li> <li><a href="http://yoshiko.hatenablog.jp/entry/es2017">&#x4ECA;&#x5E74;&#x306E;&#x3046;&#x3061;&#x306B;&#x77E5;&#x3063;&#x3066;&#x304A;&#x304D;&#x305F;&#x3044;&#xFF01;ES2017&#x306B;&#x5165;&#x308B;5&#x3064;&#x306E;&#x65B0;&#x4ED5;&#x69D8; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a></li> <li><a href="http://yoshiko.hatenablog.jp/entry/pict">PICT&#x3067;&#x30C6;&#x30B9;&#x30C8;&#x30B1;&#x30FC;&#x30B9;&#x306E;&#x7D44;&#x307F;&#x5408;&#x308F;&#x305B;&#x7206;&#x767A;&#x306B;&#x3055;&#x3088;&#x306A;&#x3089;&#x3092; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a></li> </ul> <p>12月は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%C9%A5%D9%A5%F3%A5%C8%A5%AB%A5%EC%A5%F3%A5%C0%A1%BC">アドベントカレンダー</a>でリストの最後の2本書いたのですが、どちらも結構見てもらえたようです。</p> <p>そして上から3番目の記事!そうそう、わたしが今のアイコンになったのって今年の2月からなのですよ。<br/> 今となっては馴染みすぎて、もうこれなしでどうやっていたのか全然思い出せない・・・</p> <p><iframe src="http://yoshiko.hatenablog.jp/embed/2016/02/01/083056" title="アイコンかえました - エンジニアをリングする" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://yoshiko.hatenablog.jp/entry/2016/02/01/083056">yoshiko.hatenablog.jp</a></cite></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/SNS">SNS</a>用のオリジナルイラストを描いてもらうの、最近<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%E9%A5%A6%A5%C9">クラウド</a>ソーシングでもよくあるようですね。<br/> 使える幅が広くて便利だし、この絵の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%D1%A5%AF">インパク</a>トで覚えてもらえることも多くなりましたw <br/> おすすめです!</p> <h2>私生活</h2> <p>去年の誕生日のブログにはこんなことを書いてました。</p> <blockquote cite="http://yoshiko.hatenablog.jp/entry/2015/12/15/001750" data-uuid="10328749687199216653"><p>24歳でやりたいこと<br>23歳はほぼ執筆に捧げてたので、そのぶんこの1年プログラミングと私生活にはあまりリソースさけなかったなぁ・・・という実感がすごくあります。 なのでそのぶんを取り返していきたい!!</p><cite><a href="http://yoshiko.hatenablog.jp/entry/2015/12/15/001750">24年を振り返る。 - エンジニアをリングする</a></cite></blockquote> <p>これ結構意識していて、執筆に燃え尽きてから迎えた24歳の1年はそれなりに私生活にも時間を割けたなぁと思います。<br/> 最近は料理が楽しくなってきたり、家電にいろいろ手を出したりして、家の住み心地がどんどん上がっています。最高。(残高が反比例😇 )<br/> <a href="https://prota.info/">microbot Push</a>で遠隔追い焚きを実現したり、<a href="http://mornin.jp/">mornin'</a>で冬の朝に打ち勝とうとしてみたり。。<br/> そして今日新しい家族をお迎えしました!</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20161216/20161216003844.png" alt="f:id:yoshiko_pg:20161216003844p:plain" title="f:id:yoshiko_pg:20161216003844p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>ブラーバ!!!<br/> 今日走らせてみたところ、想像以上に静かで、想像以上に動きが愛らしい!!!<br/> 姿が見えないと「どこいったんだろ?」ってベッドの下覗き込むことになったりして、ちょっと猫飼ってる気分になりましたw<br/> 昼間家をあけてるときに動かせばいいかな〜と思ってたんですが、逆に部屋に一人でいるとき動かしたい可愛さ!!</p> <h2>結論としては?</h2> <p>なんか今年何やったっけ…?何もやってなくない…?って漠然と思ってたけど、書き出してみると意外と色々やってたな、って思えたのでよかったです。</p> <p>24歳、とてもよい1年だったなと思います。<br/> もちろんここには書けないような辛いことやしんどいこともたくさんあったし、心が重い現在進行系の悩みもいろいろあるのですが、それでもなんだかんだやってこれているので、もうちょっと良い方にピントを合わせようかなってやっと思えるようになってきました。本当にやっと最近。<br/> 元々かなりネガティブで辛いことや悲しいことばっかり反芻してしまうほうなのですが(人間ってだいたいそうかな?)、この1年でそれが少し改善された気がします。こんな私にも優しくしてくれる周りの方々のおかげだと思います。ありがとうございます。</p> <p>25歳はもっと楽観的に、笑顔で生きていけたらいいなぁ。</p> <p>最後に恒例のやつ!<br/> 引っ越ししたあといろいろ揃えて以来、モノをあまり増やさないようにしているので、かわりに夢を詰め込んでみました。好きなんだけど普段なかなか手にできないので・・・(さっそく誕生日当日にケーキの代わりにもらってたべた😋)</p> <p><iframe src="//hatenablog-parts.com/embed?url=http%3A%2F%2Famzn.asia%2FhIriD9y" title="Amazon.co.jp" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://amzn.asia/hIriD9y">amzn.asia</a></cite></p> <p>20代半ば、やっていく💪</p> yoshiko_pg PICTでテストケースの組み合わせ爆発にさよならを hatenablog://entry/10328749687198630376 2016-12-13T08:30:00+09:00 2016-12-13T08:21:10+09:00 Goodpatch Advent Calendar 2016 13日目の記事です! わたしはGoodpatchでProttというプロトタイピングツールのWebフロントエンドの開発を担当しています。 Prottでは、プロトタイプの再生に関する修正をしたあとは必ず全動作を網羅したテスト用プロジェクトでの動作確認を行っています。 ただ、すべての環境や条件を揃えた上でのテストにはなかなかの工数がかかってしまっていました。 この記事では、オールペア法という手法とPICTというCLIツールを使用してテスト工数を半分以下に削減した方法を紹介します。 <p><a href="http://qiita.com/advent-calendar/2016/goodpatch">Goodpatch Advent Calendar 2016</a> 13日目の記事です!</p> <p>わたしはGoodpatchで<a href="https://prottapp.com/ja/">Prott</a>というプロトタイピングツールのWebフロントエンドの開発を担当しています。 <br/> Prottでは、プロトタイプの再生に関する修正をしたあとは必ず全動作を網羅したテスト用プロジェクトでの動作確認を行っています。 ただ、すべての環境や条件を揃えた上でのテストにはなかなかの工数がかかってしまっていました。</p> <p>この記事では、オールペア法という手法とPICTという<a class="keyword" href="http://d.hatena.ne.jp/keyword/CLI">CLI</a>ツールを使用してテスト工数を半分以下に削減した方法を紹介します。</p> <h2>単純に全組み合わせ</h2> <p>推奨環境としているOSやブラウザと3種類の再生モードを組み合わせると、テストすべき組み合わせは全部で20パターンになります。<br/> (プレビューモードとプレゼンテーションモードは対PC、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%BF%A5%F3%A5%C9%A5%A2%A5%ED%A5%F3">スタンドアロン</a>モードは対モ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%A4">バイ</a>ルのモードです。)</p> <pre class="code" data-lang="" data-unlink>- Mac - Chrome - モバイル向けプロジェクト - プレビューモード - プレゼンテーションモード - PC向けプロジェクト - プレビューモード - プレゼンテーションモード - Firefox - モバイル向けプロジェクト - プレビューモード - プレゼンテーションモード - PC向けプロジェクト - プレビューモード - プレゼンテーションモード - Safari(プレゼンテーションモードのみ) - モバイル向けプロジェクト - プレゼンテーションモード - PC向けプロジェクト - プレゼンテーションモード - Windows - Chrome - モバイル向けプロジェクト - プレビューモード - プレゼンテーションモード - PC向けプロジェクト - プレビューモード - プレゼンテーションモード - Firefox - モバイル向けプロジェクト - プレビューモード - プレゼンテーションモード - PC向けプロジェクト - プレビューモード - プレゼンテーションモード - iOS - Safari - モバイル向けプロジェクト - スタンドアロンモード - Android - Chrome - モバイル向けプロジェクト - スタンドアロンモード</pre> <p>環境の準備+実行でひとつ2分かかるとすると、40分です。<br/> 加えてこれをそれぞれプレ本番環境と実際の本番環境でおこなうため、だいたい80分ほどになります。きつい。</p> <h1>オールペア(ペアワイズ)法ってなに?</h1> <blockquote><p>組み合わせテスト技法の1つであるオールペア(ペアワイズ)法では、すべてのパラメータについて少なくとも、2パラメータ間での値の組み合わせが網羅されるようにテストパターンを作成する。 2パラメータ間で値の組み合わせが網羅されるようにテストパターンを作成する理由は、統計的に2パラメータ間までで発生する不具合が7~9割を占めるためである。</p></blockquote> <p>引用元: <a href="http://d.hatena.ne.jp/kgu/20120219/1329635956">&#x30AA;&#x30FC;&#x30EB;&#x30DA;&#x30A2;(&#x30DA;&#x30A2;&#x30EF;&#x30A4;&#x30BA;)&#x6CD5; - kgu&#x306E;&#x65E5;&#x8A18;</a></p> <p>具体的な例を挙げると、 「<code>Chrome</code>で<code>モバイルプロジェクト</code>の<code>プレゼンテーションモード</code>を見たとき<strong>にだけ</strong>」起きるようなバグの数は少ない、ということです。<br/> モ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%A4">バイ</a>ルプロジェクトが原因ならプレビューモードでも起こりうるし、モ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%A4">バイ</a>ルプロジェクト×プレゼンテーションモードが原因なら<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>で見ても起きる。<br/> そういう2つ以下のパラメータによるバグが全体の不具合の大半を占めるので、2つの組み合わせの種類だけ網羅すればバグ検出確率はさほど落とさずに組み合わせの数をぐっと減らせるよ、というのがこの方法です。</p> <h1>どうやって2つの組み合わせを網羅するの?</h1> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Microsoft">Microsoft</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/OSS">OSS</a>である、PICTという<a class="keyword" href="http://d.hatena.ne.jp/keyword/CLI">CLI</a>ツールを使うと簡単にリストアップできます。<br/> <a href="https://github.com/Microsoft/pict">https://github.com/Microsoft/pict</a></p> <p>(<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>だと他にもオールペア法の<a class="keyword" href="http://d.hatena.ne.jp/keyword/GUI">GUI</a>ツールや<a class="keyword" href="http://d.hatena.ne.jp/keyword/Excel">Excel</a>のマクロがあるようですが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a>では↑だけのようです。)</p> <h2>インストール</h2> <pre class="code lang-zsh" data-lang="zsh" data-unlink><span class="synComment"># リポジトリをクローン</span> $ git <span class="synStatement">clone</span> https://github.com/Microsoft/pict.git $ <span class="synStatement">cd</span> pict/ $ make <span class="synComment"># 成功したらpictコマンドのパスを通す</span> $ sudo install -m <span class="synConstant">0755</span> pict /usr/<span class="synType">local</span>/bin/pict </pre> <p>引用元: <a href="http://qiita.com/greymd/items/ad18aa44d4159067a627">&#x30C6;&#x30B9;&#x30C8;&#x306E;&#x6570;&#x3092;&#x6E1B;&#x3089;&#x305D;&#x3046;&#xFF01;&#x30D7;&#x30EA;&#x30AD;&#x30E5;&#x30A2;&#x3067;&#x5B66;&#x3076;PICT - Qiita</a> (後ほど紹介します)</p> <h2>組み合わせるパラメータを定義するtxtファイルの作成</h2> <h3>基本的なパラメータのリストアップ</h3> <p>まずは基本的なパラメータを分解してリストアップします。<br/> さっき書いた全組み合わせのリストでは、OS/Browser/Project/Modeの順に階層が深くなっていました。<br/> それをそのまま使いましょう。</p> <p>以下の内容で <code>test.txt</code> というテキストファイルを作成します。</p> <pre class="code" data-lang="" data-unlink>os: mac, win, ios, android browser: chrome, firefox, safari project: mobile, web mode: preview, presentation, standalone</pre> <p>これを単純に全て組み合わせると、 <code>4 * 3 * 2 * 3 = 72</code> で72パターンです。<br/> さっきの20パターンよりだいぶ多いですね。追加条件がなく、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>×<a class="keyword" href="http://d.hatena.ne.jp/keyword/Safari">Safari</a>のような存在しない組み合わせも含まれてしまっているためです。</p> <h3>不要なパターンの除外</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>×<a class="keyword" href="http://d.hatena.ne.jp/keyword/Safari">Safari</a>の条件を除外してみましょう。最後の行を追加します。</p> <pre class="code" data-lang="" data-unlink>os: mac, win, ios, android browser: chrome, firefox, safari project: mobile, web mode: preview, presentation, standalone if [os] = &#34;win&#34; then [browser] &lt;&gt; &#34;safari&#34;;</pre> <p><code>&lt;&gt;</code>は否定です。かんたん!<br/> 次に、<a class="keyword" href="http://d.hatena.ne.jp/keyword/iOS">iOS</a>のBrowserを<a class="keyword" href="http://d.hatena.ne.jp/keyword/Safari">Safari</a>に限定する条件を追加してみます。</p> <pre class="code" data-lang="" data-unlink>os: mac, win, ios, android browser: chrome, firefox, safari project: mobile, web mode: preview, presentation, standalone if [os] = &#34;win&#34; then [browser] &lt;&gt; &#34;safari&#34;; if [os] = &#34;ios&#34; then [browser] = &#34;safari&#34;;</pre> <p>こちらも簡単ですね。<br/> さっき書いた全組み合わせのリストで加味していた条件をすべて追加してみましょう。</p> <pre class="code" data-lang="" data-unlink>os: mac, win, ios, android browser: chrome, firefox, safari project: mobile, web mode: preview, presentation, standalone if [mode] = &#34;preview&#34; then [browser] &lt;&gt; &#34;safari&#34;; if [os] = &#34;mac&#34; then [mode] &lt;&gt; &#34;standalone&#34;; if [os] = &#34;win&#34; then [mode] &lt;&gt; &#34;standalone&#34;; if [os] = &#34;win&#34; then [browser] &lt;&gt; &#34;safari&#34;; if [os] = &#34;ios&#34; then [browser] = &#34;safari&#34;; if [os] = &#34;ios&#34; then [project] = &#34;mobile&#34;; if [os] = &#34;ios&#34; then [mode] = &#34;standalone&#34;; if [os] = &#34;android&#34; then [browser] = &#34;chrome&#34;; if [os] = &#34;android&#34; then [project] = &#34;mobile&#34;; if [os] = &#34;android&#34; then [mode] = &#34;standalone&#34;;</pre> <p>結果を出力してみます。</p> <pre class="code" data-lang="" data-unlink>$ pict test.txt os browser project mode win firefox web preview mac safari mobile presentation android chrome mobile standalone win chrome web presentation mac chrome web preview ios safari mobile standalone win firefox mobile presentation mac firefox mobile preview mac safari web presentation</pre> <p>並べてみます。</p> <pre class="code" data-lang="" data-unlink>os browser project mode ------------------------------------ mac chrome web preview mac firefox mobile preview mac safari web presentation mac safari mobile presentation win chrome web presentation win firefox web preview win firefox mobile presentation ios safari mobile standalone android chrome mobile standalone</pre> <p>2種類の組み合わせが網羅された9パターンが出力されました!<br/> 横方向に見た組み合わせでテストすればOKです。これならがんばれる気がしてきますね。</p> <p>もっと詳しく知りたい方はこちらの記事がおすすめです。</p> <p><iframe src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fqiita.com%2Fgreymd%2Fitems%2Fad18aa44d4159067a627" title="テストの数を減らそう!プリキュアで学ぶPICT - Qiita" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://qiita.com/greymd/items/ad18aa44d4159067a627">qiita.com</a></cite></p> <p>長めですが、わかりやすく面白くてとてもいい記事でした。</p> <h1>おわりに</h1> <p>もしも今後上記の組み合わせで検出できない3つ以上の組み合わせによるバグが発見されたら見直したいと思いますが、今のところは問題ないです。<br/> 本当は表示・アニメーション崩れも検出できる自動e2eテストができたなら理想的なのですが、自動テストだとしても事前にオールペア法で絞り込んだテストケースを実行したほうが待ち時間が減るので、どちらにしろ使えるなと思っています。</p> <p>テキストベースのデータから<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%DE%A5%F3%A5%C9%A5%E9%A5%A4%A5%F3">コマンドライン</a>でさくっと組み合わせを出せるのは助かりました。<br/> おすすめです!</p> <p>明日はGoodpatchの若きエース <a href="https://github.com/inoinojp">@inoino</a> です ٩(ˊᗜˋ*)و</p> yoshiko_pg 今年のうちに知っておきたい!ES2017に入る5つの新仕様 hatenablog://entry/10328749687197340422 2016-12-05T08:30:00+09:00 2016-12-05T08:30:10+09:00 はいっ Goodpatch Advent Calendar 2016 5日目です! 2016年もまもなく終わりますね。 あと半年もすればES2017のリリースですね! というわけで先月Node学園祭でご紹介したES2017の新仕様をブログにおこしておさらいしてみようと思います! <p>はいっ<br/> <a href="http://qiita.com/advent-calendar/2016/goodpatch">Goodpatch Advent Calendar 2016</a> 5日目です!</p> <p>2016年もまもなく終わりますね。<br/> あと半年もすればES2017のリリースですね! <br/> というわけで先月Node学園祭でご紹介したES2017の新仕様をブログにおこしておさらいしてみようと思います!</p> <h2>ES2017に入る5つの新仕様</h2> <ul> <li>Object.values / Object.entries</li> <li>String padding</li> <li>Object.getOwnPropertyDescriptors</li> <li>Trailing commas in function parameter lists and calls</li> <li>Async Functions</li> </ul> <p><em><a href="https://github.com/tc39/proposals/blob/master/finished-proposals.md">https://github.com/tc39/proposals/blob/master/finished-proposals.md</a></em></p> <h2>1. <a href="https://github.com/tc39/proposal-object-values-entries">Object.values / Object.entries</a></h2> <p>既にお馴染みのObject.keys の仲間です。<br/> Object.values は値の配列を返し、Object.entries はキーと値が配列になった配列を返します。</p> <pre class="code" data-lang="" data-unlink>const test = {a: 1, b: &#39;hoge&#39;}; Object.keys(test); // [&#34;a&#34;, &#34;b&#34;] Object.values(test); // [1, &#34;hoge&#34;] Object.entries(test); // [[&#34;a&#34;, 1], [&#34;b&#34;, &#34;hoge&#34;]]</pre> <p>3つのメソッドとも、列挙されるのは「与えられたオブジェクト自身に存在する列挙可能なプロパティ」です。<br/> コードでいうと、<code>hasOwnProperty(prop)</code>と<code>propertyIsEnumerable(prop)</code>が両方<code>true</code>になるプロパティが列挙されます。</p> <h2>2. <a href="https://github.com/tc39/proposal-string-pad-start-end">String padding</a></h2> <p>String.prototypeに文字埋めのための2つのメソッド(padStart, padEnd)が追加されます。<br/> 第一引数が文字長で、第二引数が埋める文字列になります。(デフォルトは<code>" "</code>)</p> <pre class="code" data-lang="" data-unlink>&#39;abc&#39;.padStart(10); // &#34; abc&#34; &#39;abc&#39;.padStart(10, &#34;foo&#34;); // &#34;foofoofabc&#34; &#39;abc&#39;.padStart(6,&#34;123465&#34;); // &#34;123abc&#34; &#39;abc&#39;.padEnd(10); // &#34;abc &#34; &#39;abc&#39;.padEnd(10, &#34;foo&#34;); // &#34;abcfoofoof&#34; &#39;abc&#39;.padEnd(6,&#34;123465&#34;); // &#34;abc123&#34;</pre> <p><em>Code from <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/padStart">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/padStart</a></em></p> <h2>3. <a href="https://github.com/tc39/proposal-object-getownpropertydescriptors">Object.getOwnPropertyDescriptors</a></h2> <p>あるオブジェクト自身に存在するプロパティ群のDescriptor群を取得します。</p> <h3>Descriptorってなに?</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> ObjectのPropertyについての設定値のセットです。6つのフィールドを持っています。</p> <ul> <li><code>Enumerable</code> ... 列挙可能か(for-inで現れるか)</li> <li><code>Configurable</code> ... Descriptorを編集可能か</li> <li><code>Writable</code> ... 値を書き換え可能か</li> <li><code>Value</code> ... 値</li> <li><code>Get</code> ... Getter</li> <li><code>Set</code> ... Setter</li> </ul> <p><a href="http://constellation.hatenablog.com/entry/20101205/1291564928">ES5, Property Descriptor解説</a></p> <p>今まではObject.getOwnPropertyDescriptorに対象とプロパティ名を渡してひとつのDescriptorを取得していたので、別途プロパティの列挙が必要でしたが、今回追加されたObject.getOwnPropertyDescriptorsはそれらをまとめて行える便利メソッドです!<br/> <a href="https://github.com/tc39/proposal-object-getownpropertydescriptors">Polyfill</a>から関数部分を抜粋すると以下のようになっています。</p> <pre class="code" data-lang="" data-unlink>function getOwnPropertyDescriptors(object) { return Reflect.ownKeys(object).reduce((descriptors, key) =&gt; { return Object.defineProperty( descriptors, key, { configurable: true, enumerable: true, writable: true, value: Object.getOwnPropertyDescriptor(object, key) } ); }, {}); }</pre> <h2>4. <a href="https://github.com/tc39/proposal-trailing-function-commas">Trailing commas in function parameter lists and calls</a></h2> <p>引数を複数行で書いたときのケツカンマを許容してくれるようになります。<br/> 追加/削除時の余分なdiffを回避できるのが嬉しいですね!</p> <pre class="code" data-lang="" data-unlink>function clownPuppiesEverywhere( param1, param2, // &lt;- ここ ) { } clownPuppiesEverywhere( &#39;foo&#39;, &#39;bar&#39;, // &lt;- ここ );</pre> <h2>5. <a href="https://github.com/tc39/ecmascript-asyncawait">Async Functions</a></h2> <p>ES2017の目玉!<br/> 非同期処理を同期的に書くことができるようになります。</p> <pre class="code" data-lang="" data-unlink>(async () =&gt; { console.log(&#39;async start&#39;); await new Promise((resolve) =&gt; setTimeout(resolve, 1000)); console.log(&#39;async end&#39;); // 1秒後に実行される })().catch((error) =&gt; console.log(error));</pre> <p>async functionはPromiseを返すのでthen/catchを繋げられます。</p> <p>例:ステータスの取得を繰り返して、特定のレスポンスがあったら止める(雑に表すと↓) <a href="https://goo.gl/AZgzn1">demo</a></p> <pre class="code" data-lang="" data-unlink>(async () =&gt; { let result = true; while (result){ result = await checkStatus(); // 0 or 1 } console.log(&#39;end&#39;); })(); function checkStatus() { return new Promise((resolve) =&gt; { setTimeout(()=&gt;{ resolve(parseInt(Math.random() * 2, 10)); }, 1000) }); }</pre> <p>実案件で使ってみて、動的に条件が変わる直列の非同期処理で非常に助かりました。<br/> Node.jsだとDBまわりの処理で嬉しいという声も!</p> <p>例外処理のしやすさも良いのですが、ハマりどころでもあります。<br/> 私の場合は以下の記事が理解の助けになりました。</p> <ul> <li><a href="http://qiita.com/gaogao_9/items/5417d01b4641357900c7">JavaScriptは如何にしてAsync/Awaitを獲得したのか </a></li> <li><a href="http://qiita.com/gaogao_9/items/40babdf63c73a491acbb">Promiseとasync-awaitの例外処理を完全に理解しよう</a></li> </ul> <h2>おわりに</h2> <p>ES2016に比べるとボリュームがありますね。個人的にはasync/awaitの実装が進んでいくのが嬉しいです!<br/> Stage 3以下のproposalでは<a href="https://github.com/tc39/proposal-promise-finally">Promise.prototype.finally</a>に期待していますっ</p> <p>Node学園祭で話したスライドには提案の進み方やおまけもあるのでよければ見てみてください!<br/> <a href="http://yoshiko-pg.github.io/slides/20161112-nodefes/">Tasting ES2017</a></p> <p>明日はProttチームのServer-side Tech Lead、 <a href="https://nownabe.github.io/">@nownabe</a> さんです 🤗</p> yoshiko_pg 気がついたら半月で引っ越していた hatenablog://entry/6653812171403973067 2016-07-04T23:41:28+09:00 2016-07-05T08:34:31+09:00 tl;dr 日用品ください あとはいい不動産屋さんといい引っ越し屋さんを知りたい方は読むといいかも。 <h2>tl;dr</h2> <p><a href="http://www.amazon.co.jp/registry/wishlist/96NK35HT1DGQ/ref=cm_sw_r_tw_ws_lTLExb72CJBWC">日用品ください</a></p> <p>あとはいい不動産屋さんといい引っ越し屋さんを知りたい方は読むといいかも。</p> <h2>ながれ</h2> <p>今年中に会社の近くに引っ越したいな〜と思っていたらもう6月。 <br/> 8月ぐらいになると引っ越し需要が増加してきてしまうのでその前に決めれたらいいな〜どうかな〜と6月頭ぐらいからぼちぼち探しはじめたところ、2件目でメッチャいい不動産屋さんに当たり、メッチャいい物件紹介してもらい、あれよあれよと気がついたら半月で引っ越しが完了してました。</p> <h2>不動産屋さん</h2> <p>ポータルでよさそうな物件があって、連絡先になってた渋谷の<a href="http://www.alphahomes.co.jp/shops/show/7">アルファホームズ</a>さんに内見予約。<br/> この不動産屋さんがめっちゃよくて感動したので感動ポイントを書いておきます。<br/> ちなみにこれきっかけでお店に行った人がいてもわたしには1円も入りません。<br/> (そもそもブログ書くとか言ってないし読まれたら恥ずかしい。。)</p> <h3>しらみつぶしてくれる</h3> <p>内見行く前にお店に行って希望を伝えながら別の物件もいくつか出してもらうんですけど、その出し方がすごい。</p> <p>今まで行った不動産屋さんだと伝えた希望の中でなんとなーく2、3個よさそうなところピックアップされて、でも私はポータルで条件の該当物件全部チェックするタイプなので「もうそれ知ってるわ」みたいな感じであんま刺さんない、みたいなことが多かったのですが。<br/> ココではまず条件伝えたら大元の物件ポータルで条件絞り込んでくれて、それで出てきた物件全部チェックしてくれる。ほんとに全部。</p> <p>全部チェックするときには条件入力できないような条件でふるってくれます。<br/> 「フローリングは白系がいいです」とか「窓の向かいに他の家の窓がない部屋がいいです」とか条件で絞れないようなわがまま言いまくったのですが、部屋情報に画像ついてなくても物件名で画像検索してくれたり、GoogleMapの立体表示駆使して方角と窓の外の視界アタリつけてくれたりでかなりの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%B7%A5%A7%A5%EB%A5%B8%A5%E5">コンシェルジュ</a>感。</p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">まじこのお兄さんの対応感動するわ<br>あとツール使いこなしてると安心感あるよね、GoogleMapで距離図るメジャーとか出せるの知らなかった<br>ずっとこの仕事してるはずなのにキーボード入力たどたどしい人とか不安だからな…</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/739356936806617088">2016年6月5日</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>そんなこんなで希望の最寄り駅の希望の条件の物件は全部見て、最終的に3件に絞り込みました。<br/> 条件にペット可をいれてて全体件数が少なかったからできたのかもしれないけど、わたしはとにかく全部照合したくて漏れあると嫌なタイプなので、これはめっちゃ嬉しかったです。<br/> あとそんな曖昧な条件で絞り込む中でかなり理想の物件像を共有できたので、いい感じのやつがでてくると二人して「これこれ!この感じですよね!」みたいになってました。</p> <h3>せかさない</h3> <p>なんか不動産屋さんってちょっとでも物件気に入ったそぶり見せると「今決めないと入っちゃう」とか「別でもこの物件検討してる方がいて」みたいな感じですごい決断を急かされるイメージありませんか?<br/> わたしは急かされるのが嫌いなのでその感じがすごく苦手でした。</p> <p>ただここの担当の方と物件まわっているときに「更新まで1年あるから、いいのがあったらすぐでもいいけど微妙だったら急ぎたくない」って伝えたら「じゃあ夏ぐらいまでに決まらなかったら繁忙期避けて年末とか年明けぐらいがいいかもしれないですね」っていわれて、(あっまじでこっちのペースにあわせてくれるんだ、もうこの人についていこう)って思いました。<br/> ゆっくり決めたいもん。<br/> まぁそのあと紹介してくれた物件がめっちゃよくて即決して半月で引っ越したのですが。</p> <h3>感動のようす</h3> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">今日の不動産屋さんめっちゃいい</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/739340001700282368">2016年6月5日</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">不動産屋さん基本警戒しちゃうんだけど今日のお兄さんめっちゃ親切だ</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/739340169124274176">2016年6月5日</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">今日の不動産屋のお兄さん100点満点中1250点って感じだ<br>しかも紹介してくれた物件もどんぴしゃ</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/739399500138041344">2016年6月5日</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>というわけでだいぶ感動してました。渋谷近辺で部屋探してる人にはぜひおすすめしたい。</p> <p><iframe src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fwww.alphahomes.co.jp%2Fshops%2Fshow%2F7" title="渋谷支店 - 新しい不動産賃貸情報メディア - アルファホームズ" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://www.alphahomes.co.jp/shops/show/7">www.alphahomes.co.jp</a></cite></p> <p>私を担当してくれたのは佐藤さんというかたです。でも他のスタッフの方も親切でした。</p> <p>最終的にはわたしが下調べで辿り着いていなかった、佐藤さんが紹介してくれた物件に一目惚れして決めました。<br/> なんか内見にもかかわらず、入った時のくつろぎ感がすごかったので。<br/> びびっときたってやつです。</p> <h2>引越し屋さん</h2> <p>一人暮らしで荷物も少ないのでレンタカーという選択肢も踏まえつつ、どれぐらいになるのかなぁと引越し侍ってサービスで相見積もりとってみた。</p> <p>これ注意なんですが、これ系のサービス簡単にあいみつとれるのはいいんですが、真面目に電話番号入力しちゃうとめちゃくちゃ電話きます。<br/> 10社に相見積もりとるんだけど各社電話かけてくるので10本、加えて本部?からも2、3回電話きます。電話嫌いだから困った。<br/> 電話番号は連番とか入れて、備考でメールベースのやりとりをお願いするといいかも。</p> <p>で、10社から相見積もりきてみたら最安と最高でかなり違ってびっくり。 <br/> 1人暮らしの引っ越し相場、シーズンオフなら3万円ぐらいかなって肌感で、実際大手にはやっぱり3万円〜っていわれたりしたけど、一番安かったところに連絡して見積もってもらったら半額ぐらいになりました。<br/> シーズンオフだったせいもあると思うけど、保険つきの2tトラックで2人きて搬入出全部やってもらえて不要品の大型家具引き取りもあって全部込みで17000円ってめっちゃ安いと思います。レンタカーでも色々で1万円ぐらいはするから、全然いいかなって感じ。</p> <p>で、それだけだったら安い引っ越し屋さん見つけてラッキーで終わるんだけど、ここのお兄さんもめっちゃいい人で、梱包がとにかく上手い。モニターとか照明器具とか、変な形のものも段ボールやぶってはテキパキ梱包していく。素人目にもうまいなってわかる感じ。<br/> 運び終わったあとに解こうと思ったら、段ボール巻いてあるだけなのにきっちり固定されててすごかった。<br/> しかもしゃべりも上手で面白かったです。</p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">引っ越し屋のお兄さんめちゃめちゃ感じよくていい人だった…手際いいし喋るのうまいし…感動するわ…<br>自販機でジュースあげた</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/744062510123323392">2016年6月18日</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>私は大型家電が洗濯機しかなかったりしたし値段は時期とか内容によって変わると思うけど、たぶんたいがい相場より安いと思います。</p> <p><a href="http://www.hikkoshi-toyoda.com/">&#x95A2;&#x6771;&#x306E;&#x5F15;&#x8D8A;&#x3057;&#x30FB;&#x898B;&#x7A4D;&#x306A;&#x3089;&#x8C4A;&#x7530;&#x5F15;&#x8D8A;&#x30BB;&#x30F3;&#x30BF;&#x30FC;</a></p> <p>こちらも紹介してもわたしには1円も入りませんが・・・<br/> お兄さんの名前は名刺なくして忘れてしまった!なんか若くて人懐っこいお兄さんでした。<br/> 他のスタッフの人が梱包うまいかはわからないなぁ。。</p> <h2>その他便利ツール</h2> <p>引っ越し、とにかく手続きがめんどくさいけど、一部はWebベースでわりと便利になってた。</p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">郵便局の転居届、ネットと<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%CA%A5%D3%A5%C0%A5%A4%A5%E4%A5%EB">ナビダイヤル</a>で完結してて最高<br>っていうかすべてのサービスがこうなってほしい<a href="https://t.co/cIetrWXQna">https://t.co/cIetrWXQna</a></p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/741408704663150592">2016年6月10日</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>郵便はほんと簡単だった。 あと電気/水道/ガスその他はこんなサービスがある。</p> <p><iframe src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fwww.hikkoshi-line.jp%2F" title="引越し 手続き&amp;公共料金の住所変更サービス | 引越れんらく帳" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://www.hikkoshi-line.jp/">www.hikkoshi-line.jp</a></cite></p> <p>安定のいらすとや。</p> <p>最初このサービス見たとき、えっこれやばくね?って思ったんだけど、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%EC%B5%FE%C5%C5%CE%CF">東京電力</a>がやってるサービスみたいなのでなんかどこがやってるかわかんない怪しいサービスとかではないっぽいと判断し使ってみた。<br/> 私が使ったのは電気/水道/ガスだけだけど、このサイトから飛んで登録し終わったらまたここに戻ってくるリンクがあって、この立ち会いは何時とか一覧で見れるのでそれなりに便利だった。リダイレクトで情報飛ばすのとか実装めんどくさそうだなぁとか思った。</p> <h2>まとめ</h2> <p>いい業者さんに会えたことで、めっちゃいい体験ができました。</p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">不動産屋のお兄さんも引っ越し屋のお兄さんも<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%EC%B5%FE%A5%AC%A5%B9">東京ガス</a>のお兄さんもメッチャいいひとだった。世界は優しさにあふれていたのか</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/744095780194029569">2016年6月18日</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">今カスタマーがサクセスしている</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/744095266983182337">2016年6月18日</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">これがカスタマーサクセス…</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/744096502776107010">2016年6月18日</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>新居もかなりイイカンジです。<br/> 写真載せたいけど最近は怖い時代だから家の周りの写真とか載せられないのが残念。<br/> とにかく引っ越してから<a class="keyword" href="http://d.hatena.ne.jp/keyword/QoL">QoL</a>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%F3%A5%B2%A5%EB%B7%B8%BF%F4">エンゲル係数</a>と外食回数がうなぎのぼりでちょっとヤバミを感じているところです。</p> <h2>というわけで</h2> <p>せっかくだから<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A3%A5%C3%A5%B7%A5%E5%A5%EA%A5%B9%A5%C8">ウィッシュリスト</a>をつくってみたけどモノ減らしてるから日用品ばっかになった・・・<br/> 引っ越したりちょうど入社1年になったりしたのでなんかください!</p> <p><a href="http://www.amazon.co.jp/registry/wishlist/96NK35HT1DGQ/ref=cm_sw_r_tw_ws_lTLExb72CJBWC">http://www.amazon.co.jp/registry/wishlist/96NK35HT1DGQ/ref=cm_sw_r_tw_ws_lTLExb72CJBWC</a></p> yoshiko_pg モダンコーディング本の台湾版が出ます!!! hatenablog://entry/6653812171396622165 2016-05-18T08:28:21+09:00 2016-05-18T08:28:21+09:00 3月にモダンコーディング本の編集者さんからこんなメッセージをいただきました。 な、なんだってーーー!!!! というわけですぐにご報告したかったのですが、契約締結までにすこし時間がかかるとのことだったので代わりにこんなツイートをしていました。 モダンコーディング本、もうひとつ嬉しいお知らせをいただいていて、まだ言えないんだけど数ヶ月後ぐらいにお知らせできると思います😊— よしこ (@yoshiko_pg) March 6, 2016 そして先週ついに契約締結&情報解禁になったので、今ご報告しています😊 モダンコーディング本、海越えちゃうのか・・・ 感慨深い。。 台湾版は中国語繁体字での翻訳になり… <p>3月に<a href="http://yoshiko.hatenablog.jp/entry/2015/11/02/081237">モダンコーディング本</a>の編集者さんからこんなメッセージをいただきました。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20160518/20160518000713.png" alt="f:id:yoshiko_pg:20160518000713p:plain" title="f:id:yoshiko_pg:20160518000713p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>な、なんだってーーー!!!!</p> <p>というわけですぐにご報告したかったのですが、契約締結までにすこし時間がかかるとのことだったので代わりにこんなツイートをしていました。</p> <p><blockquote class="twitter-tweet" data-lang="HASH(0xb640010)"><p lang="ja" dir="ltr">モダンコーディング本、もうひとつ嬉しいお知らせをいただいていて、まだ言えないんだけど数ヶ月後ぐらいにお知らせできると思います😊</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/706437495043411968">March 6, 2016</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>そして先週ついに契約締結&情報解禁になったので、今ご報告しています😊<br/> モダンコーディング本、海越えちゃうのか・・・<br/> 感慨深い。。</p> <p>台湾版は中国語<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C8%CB%C2%CE%BB%FA">繁体字</a>での翻訳になります。<br/> どんなふうになるのかな・・・どきどき!!<br/> 献本いただいたら写真を載せたいと思います!!</p> <p>台湾のブラウザ状況ってどんな感じなんだろうなー。韓国は<a class="keyword" href="http://d.hatena.ne.jp/keyword/IE">IE</a>率高いようだけど・・・<br/> 出版時には他の言語に訳されるとか想像していなかったので、だいぶテンション上がってます。<br/> 特に台湾は個人的にも行ってみたいなーと思ってた国なので嬉しいですね。<br/> 店頭に並んだら見に行きたいな!食べもの美味しいらしいし!!</p> <p>そうそう、今ちょうどモダンコーディング本の紹介サイトも作っているので、こちらもComing soon!!</p> <p>あと最近また新しく感想ブログを発見して嬉しかったです😊<br/> ありがとうございます!</p> <p><iframe src="http://www.tortoise-shell.net/embed/2016/05/08/153302" title="『HTML5/CSS3モダンコーディング』を買って取り組んでみた - Tortoise Shell" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe></p> <h2>ついでに最近話した資料とか</h2> <p>5月は喋る機会が重なったので外部で登壇した資料を貼っておきます。<br/> 両方JSの話!</p> <p><a href="http://yoshiko-pg.github.io/slides/20160512-frontend-biz/">Prott Front-end in 2016</a><br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/CoffeeScript">CoffeeScript</a>からES2015+への移行の話です。<br/> 私が普段業務で開発している<a href="https://prottapp.com">Prott</a>というWebアプリケーションは<a class="keyword" href="http://d.hatena.ne.jp/keyword/CoffeeScript">CoffeeScript</a>で書かれているんですが、去年はES2015もでてきたしやっぱJS書きてー!ってなったので今ぐいぐいと移行を進めています。そのあたりの具体的な内容をまとめてみました。<br/> 座談会もあって楽しい3社合同イベントでした! <a href="http://blog.cybozu.io/entry/2016/05/16/103000">イベントレポート</a> <a href="http://togetter.com/li/974629">togetterまとめ</a></p> <p><a href="http://yoshiko-pg.github.io/slides/20160517-ngmtg/">Angular 2&#x3067;&#x7D10;&#x89E3;&#x304F;Decorators</a><br/> TypeScript/ES.nextのDecoratorsの話です。<br/> 私がAngular2&amp;TypeScript触りだして一番最初に引っかかったのがDecoratorだったんですよね。<br/> この@何だ?って感じで、でもDecoratorっていう名前がわかるまで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B0%A5%B0%A4%EB">ググる</a>にググれなくてもどかしかった・・・<br/> 今回はTSとESを横断して種類と仕様を総まとめしてみました。登壇駆動勉強、楽しかったです。</p> <hr /> <p>最近は業務でES2015+書けてて超たのしい〜ってなってます。<br/> とびきりの新機能を丹精込めて作ってますよー。いいものお届けできるようにがんばります!</p> yoshiko_pg お知らせふたつ hatenablog://entry/10328537792367063604 2016-03-15T08:20:31+09:00 2016-03-15T08:20:31+09:00 モダンコーディング本が増刷になりました! モダンコーディング本、おかげさまで増刷かかりました!!3ヶ月半で増刷、嬉しすぎる😭🙏😭🙏😭ありがとうございます!!!https://t.co/R29UVzUklx pic.twitter.com/Hu0udL8O2h— よしこ (@yoshiko_pg) February 24, 2016 Twitterなどでお知らせさせていただいたとおりなのですが、モダンコーディング本が増刷になりました! 2刷が本日3/15に発行となります。ありがとうございます🙏🙏🙏 (モダンコーディング本って何?という方はこちら) 増刷確定日ではなく発行日で計算すると正確には4ヶ… <h2>モダンコーディング本が増刷になりました!</h2> <p><blockquote class="twitter-tweet" data-lang="HASH(0xa993fa8)"><p lang="ja" dir="ltr">モダンコーディング本、おかげさまで増刷かかりました!!<br>3ヶ月半で増刷、嬉しすぎる😭🙏😭🙏😭<br>ありがとうございます!!!<a href="https://t.co/R29UVzUklx">https://t.co/R29UVzUklx</a> <a href="https://t.co/Hu0udL8O2h">pic.twitter.com/Hu0udL8O2h</a></p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/702293079655522304">February 24, 2016</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>などでお知らせさせていただいたとおりなのですが、モダンコーディング本が増刷になりました!<br/> 2刷が本日3/15に発行となります。ありがとうございます🙏🙏🙏 (モダンコーディング本って何?という方は<a href="http://yoshiko.hatenablog.jp/entry/2015/11/02/081237">こちら</a>) <br/> 増刷確定日ではなく発行日で計算すると正確には4ヶ月半ですね。それでもはやい!</p> <p>2刷の発行にあたって、いただいたご質問やご指摘に対応していくつか修正を加えておりますので(主に正誤表にある内容です)、ひっかかりどころは減っているかと思います。</p> <p>手にしていただいた方々からブログや<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>や口頭などで嬉しい感想をいただいていて、とても励みになっています。 <br/> というわけで<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>で流れてきた感想ブログを一部ご紹介!(どれもお願いをしたわけではなく、エゴサでみつけました)</p> <p><a href="http://jugedred.net/2015/12/29/161352">HTML5/CSS3&#x30E2;&#x30C0;&#x30F3;&#x30B3;&#x30FC;&#x30C7;&#x30A3;&#x30F3;&#x30B0; &#x30D5;&#x30ED;&#x30F3;&#x30C8;&#x30A8;&#x30F3;&#x30C9;&#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x304C;&#x6559;&#x3048;&#x308B;3&#x3064;&#x306E;&#x672C;&#x683C;&#x30EC;&#x30A4;&#x30A2;&#x30A6;&#x30C8; &#x30B9;&#x30BF;&#x30F3;&#x30C0;&#x30FC;&#x30C9;&#x30FB;&#x30B0;&#x30EA;&#x30C3;&#x30C9;&#x30FB;&#x30B7;&#x30F3;&#x30B0;&#x30EB;&#x30DA;&#x30FC;&#x30B8;&#x30EC;&#x30A4;&#x30A2;&#x30A6;&#x30C8;&#x306E;&#x4F5C;&#x308A;&#x65B9; | Web&#x5236;&#x4F5C;&#x306E;&#x73FE;&#x5834;&#x304B;&#x3089;</a></p> <p><a href="http://www.designmap.info/tobewebdesigner/bookguide/html5_css3_modern_coding/">&#x300E;HTML5/CSS3&#x30E2;&#x30C0;&#x30F3;&#x30B3;&#x30FC;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x300F; - DESIGNMAP</a></p> <p><a href="http://weblog-masaya.hatenablog.jp/entry/2016/01/30/211847">&#x300C;HTML5/CSS3&#x30E2;&#x30C0;&#x30F3;&#x30B3;&#x30FC;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x300D;&#x306E;&#x611F;&#x60F3; - web&#x30D7;&#x30ED;&#x30B0;&#x30E9;&#x30DF;&#x30F3;&#x30B0;&#x899A;&#x3048;&#x66F8;&#x304D;</a></p> <p><a href="http://riatw.me/blog/html5css3_modern_coding.html">&#x300C;HTML5/CSS3&#x30E2;&#x30C0;&#x30F3;&#x30B3;&#x30FC;&#x30C7;&#x30A3;&#x30F3;&#x30B0; &#x30D5;&#x30ED;&#x30F3;&#x30C8;&#x30A8;&#x30F3;&#x30C9;&#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x304C;&#x6559;&#x3048;&#x308B;3&#x3064;&#x306E;&#x672C;&#x683C;&#x30EC;&#x30A4;&#x30A2;&#x30A6;&#x30C8; &#x30B9;&#x30BF;&#x30F3;&#x30C0;&#x30FC;&#x30C9;&#x30FB;&#x30B0;&#x30EA;&#x30C3;&#x30C9;&#x30FB;&#x30B7;&#x30F3;&#x30B0;&#x30EB;&#x30DA;&#x30FC;&#x30B8;&#x30EC;&#x30A4;&#x30A2;&#x30A6;&#x30C8;&#x306E;&#x4F5C;&#x308A;&#x65B9;&#x300D;&#x3092;&#x8AAD;&#x307F;&#x307E;&#x3057;&#x305F; | Blog | riatw.me</a></p> <p><a href="http://rindarinda5.hatenablog.com/entry/2016/03/06/HTML%E3%81%A8CSS%E3%82%92%E5%AD%A6%E3%81%B6%E3%81%AA%E3%82%89%E3%83%A2%E3%83%80%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%8C%E3%81%8A%E3%81%99%E3%81%99%E3%82%81">HTML&#x3068;CSS&#x3092;&#x5B66;&#x3076;&#x306A;&#x3089;&#x30E2;&#x30C0;&#x30F3;&#x30B3;&#x30FC;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x304C;&#x304A;&#x3059;&#x3059;&#x3081; - NOTITIE</a></p> <p>書籍タイトルめちゃ長くてすみません!「<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>/CSS3 モダンコーディング」までで大丈夫です!<br/> 感想どれもほんとうに嬉しい 😭<br/> 追加コードの色ルールがわかりづらかったのと途中経過の図が少なかったのは反省点ですね。。図についてはページ数との兼ね合いもあり・・・><。<br/> 実際にサイトを作ってみていただいた方からの「HTML/<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>コーディング楽しい!」というご感想を見かけると、「狙い通り・・・!!」とニヤニヤします。</p> <p>それからこちらもおたのしみに!</p> <p><blockquote class="twitter-tweet" data-lang="HASH(0xa993fa8)"><p lang="ja" dir="ltr">モダンコーディング本、もうひとつ嬉しいお知らせをいただいていて、まだ言えないんだけど数ヶ月後ぐらいにお知らせできると思います😊</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/706437495043411968">March 6, 2016</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>そしてふたつめはというと、、、</p> <h2>Women Techmakers @ <a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> にて登壇します</h2> <p><blockquote class="twitter-tweet" data-lang="HASH(0xa993fa8)"><p lang="ja" dir="ltr">僭越ながら<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a>さまの女性向けイベントのトークセッションでお話しさせていただきます!どきどき…<br>よろしくお願いします🙏<br><br>テクノロジー業界で活躍する女性のキャリア、どう築く? Women Techmakers 開催のお知らせ<a href="https://t.co/TjMZ1rPWa8">https://t.co/TjMZ1rPWa8</a></p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/703154983093440512">February 26, 2016</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>なんとなんと!</p> <blockquote><p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> は 3 月 8 日 国際女性デーに合わせて、テクノロジー業界で活躍する女性が、情報交換したり学び合ったりするためのイベント Women Techmakers を世界各地で開催します。<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> 東京オフィスでも、3 月 19 日(土)に開催します(本イベントは主に日本語で行われます)。</p></blockquote> <p>(<a href="http://googledevjp.blogspot.jp/2016/02/women-techmakers.html">テクノロジー業界で活躍する女性のキャリア、どう築く? Women Techmakers 開催のお知らせ</a> 本文より引用)</p> <p>こちらのイベントのトークセッションのメンバーのひとりとして登壇させていただくことになりました。<br/> 貴重な機会をありがとうございます・・・!!</p> <p>(名前表記が「よしこ」でひとりだけゆるい感じになってるのはそれが一番通ってる表記だからあえてですよ!本名で載っていてもピンとこない方のほうが多いと思うので。。。)</p> <p>トークセッション形式でお話しするのは初めてなのでドキドキです。</p> <p>午後のProgressive Web Apps Codelabも楽しそう〜😊<br/> 同時にDesign Sprintもありますね!迷う!!</p> <p>ブログでは申し込み締め切り終わったあとでのご報告になってしまい恐縮です><<br/> 当日いらっしゃるみなさまよろしくお願いします!</p> <hr /> <p>というわけで嬉しいお知らせふたつでしたー!<br/> 3月も残り半月!がんばっていこーっ</p> yoshiko_pg エンジニアがデザイン入門書を3冊買ってみたのでメモと雑感 hatenablog://entry/10328537792365302180 2016-03-01T08:11:02+09:00 2016-03-01T08:11:02+09:00 自分で何かWebアプリを作るときにデザインも自分である程度満足いくレベルのものをできるようになりたくて、今年に入ってからいくつかデザインの本を買いました。 感想と勉強になったことをまとめてみます。 <p>自分で何かWebアプリを作るときにデザインも自分である程度満足いくレベルのものをできるようになりたくて、今年に入ってからいくつかデザインの本を買いました。<br/> 感想と勉強になったことをまとめてみます。</p> <h2>ノンデザイナーズ・デザインブック</h2> <p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4839928401/hatena-blog-22/"><img src="http://ecx.images-amazon.com/images/I/41nvddaG9BL._SL160_.jpg" class="hatena-asin-detail-image" alt="ノンデザイナーズ・デザインブック [フルカラー新装増補版]" title="ノンデザイナーズ・デザインブック [フルカラー新装増補版]"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4839928401/hatena-blog-22/">ノンデザイナーズ・デザインブック [フルカラー新装増補版]</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> Robin Williams,吉川典秀</li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%CB%E8%C6%FC%A5%B3%A5%DF%A5%E5%A5%CB%A5%B1%A1%BC%A5%B7%A5%E7%A5%F3%A5%BA">毎日コミュニケーションズ</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2008/11/19</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本(ソフトカバー)</li><li><span class="hatena-asin-detail-label">購入</span>: 58人 <span class="hatena-asin-detail-label">クリック</span>: 1,019回</li><li><a href="http://d.hatena.ne.jp/asin/4839928401/hatena-blog-22" target="_blank">この商品を含むブログ (107件) を見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>定番・・・なんですかね。どこかでデザイン初学者向けにオススメされていたのをみて買ってみました。 <br/> とても教科書っぽいです。ただ文章は程よく砕けていて読みやすく、理論をベースに実際の例をたくさん挙げて説明されているのでとっつきやすいです。</p> <p>特に参考になった章:7章 Using color, 10章 Categories of Type</p> <h3>Using color -カラーを使う-</h3> <p>色について。<br/> どのデザイン入門本でも必ず扱っていると思います。あとに紹介する2つの本でももちろん扱っていました。<br/> ただ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BF%A7%C1%EA%B4%C4">色相環</a>についてはこの本が一番掘り下げていたように思います。</p> <ul> <li>カラーホイールの成り立ち <ul> <li>赤・青・黄色が原色</li> <li>それらの間にできる色(緑・紫・オレンジ)が2次色(等和色)</li> <li>原色と2次色の間にできる6つの色が3次色 <ul> <li>3次色でカラーパレット作る例が可愛かった。</li> </ul> </li> </ul> </li> <li>補色 <ul> <li>カラーホイールで真向かいにある色</li> <li>反対の色なのでアクセントとして有効</li> </ul> </li> <li>トライアド <ul> <li>プライマリー・トライアド → 原色(赤・青・黄色)</li> <li>セコンダリー・トライアド → 2次色(緑・紫・オレンジ)</li> <li>スプリット・コンプリメント・トライアド → ある1色と、その補色の両隣にある2色</li> </ul> </li> <li>類似色 <ul> <li>隣り合う3色</li> </ul> </li> <li>明度と呼び名 <ul> <li>ヒュー → 純粋な色</li> <li>シェード → ヒューに黒が加わった暗い色</li> <li>チント → ヒュー白が加わった明るい色</li> </ul> </li> </ul> <h3>Categories of Type -活字のカテゴリー-</h3> <p>フォントの種類について。フォントを6つのカテゴリにわけて、それらの特徴と見分け方を解説しています。<br/> あーこの分類、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> fontのサイドメニューで絞り込むやつ!!ってなりました。<br/> 実は私フォント音痴で、セリフと<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B5%A5%F3%A5%BB%A5%EA%A5%D5">サンセリフ</a>の区別がギリつく、ぐらいのレベル。。。なのでこの章は大変助かりました。<br/> このフォント好き!っていうこだわりはあるけどそれがどのカテゴリに属すとかは全然わからない感じだったのですが、この章読んだあとなら多少見分けられるかもって思いました。</p> <h4>フォント用語</h4> <ul> <li>セリフ <ul> <li>線の両端の出っ張り</li> </ul> </li> <li>ストレス <ul> <li>フォント内の曲線のもっとも細い部分同士を結んだライン</li> </ul> </li> </ul> <h4>フォントのカテゴリ</h4> <ul> <li>Oldstyle <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%BC%EA%BD%F1%A4%AD">手書き</a>文字を手本にした書体(フリーハンド風という意味ではない)</li> <li>セリフがある</li> <li>小文字のセリフは必ず斜め</li> <li>太い部分から細い部分への推移は穏やか</li> <li>ストレスが斜め</li> <li>多量の文字に最適</li> <li>代表フォント: <a href="https://www.myfonts.com/fonts/bitstream/goudy-old-style/">Goudy old style</a></li> </ul> </li> <li>Modern <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%BC%EA%BD%F1%A4%AD">手書き</a>文字の模倣ではないメカニカルな書体</li> <li>細く水平なセリフ</li> <li>太い部分と細い部分の推移が極端</li> <li>ストレスが垂直</li> <li>冷たくエレガントな印象</li> <li>多量の文字にあてるには向かない</li> <li>代表フォント: <a href="https://www.myfonts.com/fonts/linotype/poster-bodoni/bodoni-poster-compressed/">Bodoni Poster Compressed</a></li> </ul> </li> <li>Slab serif <ul> <li>Modernの細い部分を太くした</li> <li>太く水平なセリフ</li> <li>太い部分と細い部分の推移がほとんどない</li> <li>ストレスが垂直</li> <li>多量の文字に使えるけど、太いので全体的に(文字の色が黒ければ)暗くなる</li> <li>代表フォント: <a href="http://www.myfonts.com/fonts/bitstream/clarendon/">Clarendon</a></li> </ul> </li> <li>Sans serif <ul> <li>セリフがない(Sans = フランス語で"〜がない")</li> <li>太い部分と細い部分の推移がない</li> <li>太さが一定なのでストレスもない</li> <li>代表フォント: <a href="http://www.myfonts.com/fonts/urw/franklin-gothic/">Franklin Gothic</a> <ul> <li>例外的にストレスをもつ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B5%A5%F3%A5%BB%A5%EA%A5%D5">サンセリフ</a>書体もある(例:<a href="http://www.myfonts.com/fonts/linotype/optima/">Optima</a>)</li> <li>セリフにも<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B5%A5%F3%A5%BB%A5%EA%A5%D5">サンセリフ</a>にも似ているので扱いに注意が必要</li> </ul> </li> </ul> </li> <li>Script <ul> <li>装飾書体、手で書いた文字のように見える書体 <ul> <li>続け字のもの</li> <li>続け字でないもの</li> <li>普通の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BC%EA%BD%F1%A4%AD">手書き</a>文字のようなもの</li> <li>伝統的なカリグラフィー書体を真似たもの</li> </ul> </li> <li>本文などではなくアクセントで控えめに使うこと</li> <li>大きなサイズで飾りのように使うと効果的</li> <li>代表フォント: <a href="https://www.myfonts.com/fonts/adobe/linoscript/medium/">Linoscript Medium</a></li> </ul> </li> <li>Decorative <ul> <li>上記のどれにも属さない特徴的な形のフォント</li> <li>楽しくて、目立って、使いやすくて、値段が安いことが多い</li> <li>第一印象とあえて逆の用途に使ってみると意外性を引き出せる</li> <li>例: <a href="http://www.myfonts.com/fonts/typodermic/flyswim/">FlySwim</a></li> </ul> </li> </ul> <p>Slab serifがいわゆるセリフ体ってことでいいのかなぁ。</p> <p>この本、個人的には1点ちょっと大きな難があって、例として出ているデザインが・・・なんというか正直・・・うーん・・・・・・・・ださい。。。<br/> というか、時代を感じるかんじです。フォントとか色使いとか。<br/> でも解説されている理論は間違いなく基礎になる部分なので、洋書特有の小気味いい語り口調でデザインの基礎を学べるのはよかったです。</p> <h2>ゼロからはじめるデザイン</h2> <p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4797376961/hatena-blog-22/"><img src="http://ecx.images-amazon.com/images/I/41gX5xB4ouL._SL160_.jpg" class="hatena-asin-detail-image" alt="ゼロからはじめるデザイン" title="ゼロからはじめるデザイン"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4797376961/hatena-blog-22/">ゼロからはじめるデザイン</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> 北村崇</li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> SBクリエイティブ</li><li><span class="hatena-asin-detail-label">発売日:</span> 2015/07/29</li><li><span class="hatena-asin-detail-label">メディア:</span> 大型本</li><li><a href="http://d.hatena.ne.jp/asin/4797376961/hatena-blog-22" target="_blank">この商品を含むブログ (3件) を見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>おすすめしていただいて買った本。帯にでっかく「センス不要」って書いてあって心強かった。感覚的なことが苦手なので。。<br/> 表紙と帯のデザインがとても素敵です。</p> <p>こちらもわりと教科書みたい。ただノンデザイナーズ・デザインブックよりはモダンな感じで、内容もさらにブレイクダウンしてある感じです。実用的。<br/> 「ゼロからはじめる」とあるように、基本からきちんと理論と実践を解説してくれている感じで、とてもよかったです。幅広く解説してあります。<br/> ただほんと教科書っぽく淡々と解説していく感じなので、学ぶぞ!という意気で読まないと文体には飽きちゃうかも。<br/> でも発見は多いので面白いです。</p> <p>特に参考になった章: 2章 レイアウト, 3章 造形</p> <h3>レイアウト</h3> <h4>[TIPS] <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%A4%A5%AD%A5%E3%A5%C3%A5%C1">アイキャッチ</a></h4> <p>注目させたい要素を<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%A4%A5%AD%A5%E3%A5%C3%A5%C1">アイキャッチ</a>(目に留まるもの)へと加工する方法いくつか。</p> <ul> <li>文字の場合 <ul> <li>太くする</li> <li>大きくする</li> <li>色を変える</li> <li>書体を変える</li> </ul> </li> <li>図形の場合 <ul> <li>大きくする</li> <li>色を変える</li> <li>動きを加える(ななめに傾けるとか)</li> <li>形を変える</li> </ul> </li> </ul> <p>重要なのは、「一度に適用するのは2つまで」と「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%A4%A5%AD%A5%E3%A5%C3%A5%C1">アイキャッチ</a>を<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%A3%BF%F4">複数</a>作らない」。<br/> 一度に適用するのは2つまでというのは、色を変える+大きくする はアリだけど、色を変える+大きくする+形を変える はゴチャついてしまうという感じ。</p> <h4>[実用] <a class="keyword" href="http://d.hatena.ne.jp/keyword/%B2%AB%B6%E2%C8%E6">黄金比</a>や<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C7%F2%B6%E4%C8%E6">白銀比</a>の使い方</h4> <p>図形や画像への<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B2%AB%B6%E2%C8%E6">黄金比</a>の適用とかはよく見かけてたんですが、フォントサイズにも<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B2%AB%B6%E2%C8%E6">黄金比</a>を使う例が出ていて、そちらのほうが確かに綺麗で文字の大きさにも使えるのかーとびっくりした。 5pt・10pt・15pt・20ptより、5pt・8pt・12.8pt・20.48ptのほうが大きくなっていく段階がなめらかで自然。 特定の数刻みで上げていくと、その数のフォントサイズに対する割合がどんどん小さくなっていってしまうから、比率でジャンプさせていったほうがなめらかになるんですね。なるほどでした。</p> <h3>造形</h3> <h4>[基礎] 記号の用途で分類する</h4> <p>似たような言葉である「マーク」「サイン」「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D4%A5%AF%A5%C8%A5%B0%A5%E9%A5%E0">ピクトグラム</a>」「アイコン」の意味合いの違いについて。</p> <ul> <li>マーク <ul> <li>概念をあらわすもの</li> <li>会社などの団体や、個人を象徴するためのもの</li> <li>商品の認証などを示すJISマークなど</li> <li>オリジナル性に重点を置くのが一般的</li> <li>例:会社のロゴマーク、DVDのマーク</li> </ul> </li> <li>サイン <ul> <li>標識</li> <li>注意を促す図案</li> <li>間違いがないよう、国際基準のものや世間一般に共通認識のあるものを使うのが一般的</li> <li>例:⚠️、⛔️</li> </ul> </li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D4%A5%AF%A5%C8%A5%B0%A5%E9%A5%E0">ピクトグラム</a> <ul> <li>サインのひとつといえる</li> <li>動きや注意以外にも「本」や「コンセント」など、対象物自体をあらわす</li> <li>言葉の代わりとして表現するものが多い</li> <li>アイコンと比べるとメッセージ性が高い</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D4%A5%AF%A5%C8%A5%B0%A5%E9%A5%E0">ピクトグラム</a>単体で強い意味を持つ</li> <li>例:エレベーターの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D4%A5%AF%A5%C8%A5%B0%A5%E9%A5%E0">ピクトグラム</a>、非常口の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D4%A5%AF%A5%C8%A5%B0%A5%E9%A5%E0">ピクトグラム</a></li> </ul> </li> <li>アイコン <ul> <li>ウェブサイトやコンピューター上で、言葉ではなく図形で意味を伝えるもの</li> <li>小さな画面で扱われることを前提としている</li> <li>いかに文字を少なく、小さな表示範囲で意味を伝えられるかが鍵</li> <li>絵だけでメッセージを伝える<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D4%A5%AF%A5%C8%A5%B0%A5%E9%A5%E0">ピクトグラム</a>と違い、表現の補助的な役割が大きい</li> <li>言葉だけで伝わりにくかった単語や機能を直感的に伝える(例:ゴミ箱、フォルダ)</li> <li>例:検索の虫眼鏡アイコン、時計のアイコン</li> </ul> </li> </ul> <p>これらの違いの具体的な例として、踊る人の絵を用いた以下の解説がとてもわかりやすかったです。</p> <blockquote><p>一つの記号をそれぞれの用途で言い換えてみるとわかりやすく、面白いです。たとえば下の絵は、マークなら「踊る団体です」、サインや<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D4%A5%AF%A5%C8%A5%B0%A5%E9%A5%E0">ピクトグラム</a>なら「踊ってください」「踊る場所です」、アイコンなら「これをクリックすると踊ります」という意味になるのではないでしょうか。</p></blockquote> <p>なるほど!!!!<br/> それぞれ用途が違うから、それぞれの用途で置き換えるだけで指すことも当然異なってきますね。<br/> 面白いと思いました。</p> <p>幅広く体系的にまとまっていてとてもいいのですが、こちらも若干、本の中のサンプルが・・・<br/> ダサいとまではいかないのですが、カッコいい!!ともならないです。それが余計に教科書感を出してるかも。<br/> とはいえノンデザイナーズ・デザインブックよりはかなり現代感あります。</p> <h2>なるほどデザイン</h2> <p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4844365177/hatena-blog-22/"><img src="http://ecx.images-amazon.com/images/I/411WMIihdKL._SL160_.jpg" class="hatena-asin-detail-image" alt="なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉" title="なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4844365177/hatena-blog-22/">なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> 筒井美希</li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%E0%A5%C7%A5%A3%A5%A8%A5%CC%A5%B3%A1%BC%A5%DD%A5%EC%A1%BC%A5%B7%A5%E7%A5%F3">エムディエヌコーポレーション</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2015/07/31</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本</li><li><a href="http://d.hatena.ne.jp/asin/4844365177/hatena-blog-22" target="_blank">この商品を含むブログ (3件) を見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p>出版されたときすごい評判でしたよね。読んでみて、たしかにこれはすごいなと思いました。<br/> 「目で見て楽しむデザインの本」とあるように、とにかくおしゃれ。かっこいい。<br/> デザインの理論が紹介されているのですが、どのページもビジュアルに凝っているので、同時に参考にできるデザイン事例集でもあり、見て楽しむ写真集でもあるような。<br/> 読んでいて一番楽しかったです。</p> <p>ただ理論的な掘り下げでいうとやっぱり先の2冊の方が情報量は多いです(文字数が全然違うと思います)。<br/> こちらは直感的においしいところをつまめる感じ。デザイナーさんが好きそう。<br/> 先の2冊の半分ほどのサイズなので持ち歩くのも楽です。</p> <p>特に参考になった章: 1章 編集×デザイン</p> <h3>編集×デザイン</h3> <p>デザインは「なんのためにデザインするのか」が一番大事。<br/> その具体例として、「朝ごはんを紹介する雑誌のページ」を作っていくのですが、異なるターゲット・切り口・目的・接点がすべて異なる3パターンそれぞれに適切なデザインが例に挙げられています。<br/> ひとつめは「料理初心者が朝食の作り方を知るための書籍」、ふたつめは「料理好きが朝食のバリエーションを楽しむための雑誌」、みっつめは「生活にこだわる人が憧れるような上質な朝の風景が載ったムック本」。<br/> それぞれに対してロジカルに組み立てられた適切なデザインが載っていて、全然違う仕上がりになっているし明らかにそれぞれ適切なのでめちゃくちゃ説得力があります。<br/> Whyから考えるというのは私のいる会社の文化でもあるので考え方がスッと入ってきました。</p> <p>次に、実際のページデザインの過程を追っていく内容があります。</p> <ul> <li>図解とラフ <ul> <li>載せる必要のある情報を洗い出す</li> <li>情報の階層構造を確認する</li> <li>ラフで大まかなレイアウトを描いて階層構造を反映させる</li> </ul> </li> <li>方向性を決める <ul> <li>配置</li> <li>色使い</li> <li>画像の使い方(トリミングするかとか)</li> <li>これらで全体のテイストを決める(にぎやかとか静かとか)</li> </ul> </li> <li>骨格をつくる <ul> <li>タイトル、写真、コラムなどそれぞれの位置や段組みを決める</li> <li>画像をバランスよく配置する</li> <li>情報ごとに固まり感を出す</li> </ul> </li> <li>キャラを立たせる <ul> <li>行揃え、書体の変更、字間の調整、罫線の追加など</li> <li>あれこれ飾り付けるのではなく、上記を調整してひとつひとつの要素に個性を持たせる</li> </ul> </li> <li>足し算と引き算 <ul> <li>狙った印象に届いていない部分にあしらいを足す <ul> <li>シェイプ、色、テクスチャなど</li> </ul> </li> <li>なくても問題ない要素は引く(なくす)</li> </ul> </li> <li>ブラッシュアップ</li> </ul> <p>↑これは本見ないとわからないな。。<br/> この段階ごとに変わっていくデザインが本当にすごくて、ここだけでも何度も読み込む価値があると思いました。<br/> あと、自分がどの段階が苦手なのかがわかるのもいい。</p> <p>私は前半はわりと今までもやってきたりしたし感覚はあるんですが、後半の足し算引き算やブラッシュアップの引き出しがないんだと気付きました。<br/> その辺りを重点的に学べる本があったらどなたか教えてください・・・(もちろんこの本もそのひとつだと思います)</p> <p>理論だけではなく、最初に挙げた「なんのためにデザインするのか」のようなそもそもの考え方をきちんとおさえているのが素晴らしいと思いました。<br/> 目的が違えば実現方法が変わるのは当たり前ですよね。<br/> あともうほんとデザインがとにかくかっこいいです。ただそれだけに、するすると読んでしまってわかった気になっていざやろうとしたら「あれ?どうすれば・・・」みたいになりがちかもって思いました。</p> <h2>オススメ度</h2> <ul> <li>かっこいいサンプルじゃないと燃えないタイプ</li> <li>感覚的なタイプ</li> <li>とりあえずモチベーションを上げたいタイプ</li> </ul> <p>→なるほどデザイン</p> <ul> <li>教科書的な雰囲気に抵抗がないタイプ</li> <li>理論的なタイプ</li> <li>広くしっかり体系的に学びたいタイプ</li> </ul> <p>→ゼロからはじめるデザイン</p> <p>かなぁと思いました。<br/> ノンデザイナーズ・デザインブックは個人的にやっぱどうしてもサンプルが・・・><</p> <p>あとはやっぱ既存のデザイン観察するのと実際作っていくしかないんでしょうね。それはコード書くのと一緒ですね。<br/> 目に見える部分を作れるのが楽しくてフロントエンドの方に進んだので、デザインもできるようになったら延々自家発電できて最高です。がんばりたい。</p> <p>他にもおすすめの本があったら教えてください。</p> yoshiko_pg アイコンかえました hatenablog://entry/6653586347155426021 2016-02-01T08:30:56+09:00 2016-02-01T08:30:56+09:00 わたしTwitter始めた頃からずっとメガネのアイコンだったのですが、実は普段メガネしてないんですよね。。 コード書く時だけブルーライトカットのこのメガネ(度なし)かけてるので、エンジニアな自分のモチーフな感じでアイコンにしてたのですが、そろそろ飽きてきました。 たまに見かけるような、かわいいイラストの似顔絵アイコンとかいいなー・・・ってずっと思ってたりしたので、今後ずっと使えるお気に入りのアイコンがほしい!ということで、弊社Goodpatchが誇るクソアプリエンジニアまさおさんにお願いしてみました。 アイコン変えたいしまさおさんにイラスト発注わりと本気で検討してる— よしこ@アイコンかえた … <p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20160131/20160131234934.png" alt="f:id:yoshiko_pg:20160131234934p:plain" title="f:id:yoshiko_pg:20160131234934p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>わたし<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>始めた頃からずっとメガネのアイコンだったのですが、実は普段メガネしてないんですよね。。<br/> コード書く時だけ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%EB%A1%BC%A5%E9%A5%A4%A5%C8">ブルーライト</a>カットのこのメガネ(度なし)かけてるので、エンジニアな自分のモチーフな感じでアイコンにしてたのですが、そろそろ飽きてきました。</p> <p>たまに見かけるような、かわいいイラストの似顔絵アイコンとかいいなー・・・ってずっと思ってたりしたので、今後ずっと使えるお気に入りのアイコンがほしい!ということで、弊社Goodpatchが誇る<a href="http://hanamiju.hatenablog.com/entry/kusoapp">クソアプリエンジニア</a>まさおさんにお願いしてみました。</p> <p><blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">アイコン変えたいしまさおさんにイラスト発注わりと本気で検討してる</p>&mdash; よしこ@アイコンかえた (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/687979205313757184">2016, 1月 15</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>そして数日後にイラストが。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20160201/20160201000638.png" alt="f:id:yoshiko_pg:20160201000638p:plain" title="f:id:yoshiko_pg:20160201000638p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>怒らないでね・・・?</p> <p>(いやな予感)</p> <p>zipあけてみる</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20160201/20160201001003.png" alt="f:id:yoshiko_pg:20160201001003p:plain" title="f:id:yoshiko_pg:20160201001003p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>か・・・</p> <p>か  わ  い  く  な  い  !  !  !</p> <p>コレジャナイ!!なんかもっと!ゆるふわあざとかわいい感じがよかった!!!</p> <p>というのをオブラートに包みつつディスカッションした結果</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20160201/20160201001702.png" alt="f:id:yoshiko_pg:20160201001702p:plain" title="f:id:yoshiko_pg:20160201001702p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>おっwwwww</p> <p>ちょっと近付いた気がするけど・・・いやでも根本的に・・・根本的な問題が・・・・</p> <p>だってせめてアイコンぐらい詐欺りたくないか・・・??</p> <p>ってことでもうちょっとかわいくならないかリテイクをお願いしたのですが、それを待っている間に8回ぐらい見てたら不思議と可愛く見えてきた&すさまじい勢いで愛着がわいてきてしまい、やっぱりこれでいくことにしました。<br/> なんかツボに入ってしまってずっと爆笑してました。</p> <p><blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr"><a href="https://t.co/dyExSmRZEg">https://t.co/dyExSmRZEg</a><br>これさっきもらってクソかわいくなすぎて爆笑して今めっちゃ気に入ってるんだけど明日起きたらどう思うかわかんない</p>&mdash; よしこ@アイコンかえた (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/688729478093082624">2016, 1月 17</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>今ではすっかりお気に入りです。<br/> これも計算のうちだったのだろうか・・・<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%B2%A4%ED%A4%B7%A4%A4%BB%D2">恐ろしい子</a>。</p> <p>ちなみにこの画風がお気に召した方は、LINEスタンプもあるので買ってあげてください。</p> <p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fstore.line.me%2Fstickershop%2Fproduct%2F1121907%2Fja" title="真顔くん - LINE クリエイターズスタンプ" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://store.line.me/stickershop/product/1121907/ja">store.line.me</a></cite></p> <p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fstore.line.me%2Fstickershop%2Fproduct%2F1233720%2Fja" title="ユルすぎうさぎさん - LINE クリエイターズスタンプ" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://store.line.me/stickershop/product/1233720/ja">store.line.me</a></cite></p> <p>真顔くんの「お前が悪い」が好きです。</p> <h2>1月のこと</h2> <p>ついでに近況報告でも。</p> <h3>しゃべりました</h3> <p>都内某所でのクローズド勉強会で技術書の執筆についてLTしてきました。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%CF%A5%C3%A5%B7%A5%E5%A5%BF%A5%B0">ハッシュタグ</a>はまだない。<br/> LT大会楽しかったです!</p> <p><a href="http://yoshiko-pg.github.io/slides/20160120-tech-for-writing/">&#x57F7;&#x7B46;&#x3092;&#x652F;&#x3048;&#x308B;&#x6280;&#x8853; - @yoshiko_pg</a></p> <h3>生放送出ました</h3> <p>スクーさんで<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>についての授業をさせていただきました。</p> <p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fschoo.jp%2Fcourse%2F354" title="実践JavaScript(全3回) - schoo WEB-campus(スクー)" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://schoo.jp/course/354">schoo.jp</a></cite></p> <p>3週連続生放送で緊張しました>< <br/> 最後の授業がちょうど1/31でした!<br/> 2月からは個人のお仕事は少しお休みしてインプットを増やそうと思っていたので、よい仕事納めでした。<br/> 貴重な機会をいただきありがとうございました!!</p> <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="6" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BAo9qvEgCtS/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">初回授業終わったーー!!! ありがとうございました🙏 壁にサインさせてもらいました!</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Maasa Yoshidaさん(@yoshiko_pg)が投稿した写真 - <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2016-01-17T12:24:44+00:00">2016 1月 17 4:24午前 PST</time></p></div></blockquote> <script async defer src="//platform.instagram.com/en_US/embeds.js"></script> <p></p> <p><br></p> <p>ちなみにスクーさんの初回授業のときに撮った写真。(時系列的にはちょうどアイコンが完成して送られてきた直後)</p> <p><br></p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20160131/20160131234940.jpg" alt="f:id:yoshiko_pg:20160131234940j:plain" title="f:id:yoshiko_pg:20160131234940j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>_人人人人人人人_<br/> > 完全に一致 <<br/>  ̄Y^Y^Y^Y^Y^Y ̄</p> <p>実写があとなんだぜ・・・?</p> <p>アイコンかわってもどうぞよろしくお願いします。</p> yoshiko_pg さよなら2015年 hatenablog://entry/6653586347150878718 2015-12-31T21:52:15+09:00 2015-12-31T21:52:15+09:00 このあいだ誕生日エントリ書いたばかりだし、年末の振り返りはあんまり書くつもりなかったけど、いろんなブログみてたら急に書く気になったので書いてみる。 <p>このあいだ<a href="http://yoshiko.hatenablog.jp/entry/2015/12/15/001750">誕生日エントリ</a>書いたばかりだし、年末の振り返りはあんまり書くつもりなかったけど、いろんなブログみてたら急に書く気になったので書いてみる。</p> <h2>1月〜3月</h2> <p>仕事:アシアルにて前年に続きAngularJS案件。かなり大きなシステムの管理画面構築、フロント側をだいたい一人で担当。3月に無事納品。</p> <p>プライベート:前月に<a href="http://yoshiko.hatenablog.jp/entry/2015/11/02/081237">モダンコーディング本</a>の企画が通ったので、土日でPART1を書き進める。<br/> 最初見積もったのより全然筆が遅くて、ヤバイ予感がしてくる。</p> <h3>書いたブログ</h3> <ul> <li><a href="http://yoshiko.hatenablog.jp/entry/2015/01/04/Re%3AVIEW%E5%B0%8E%E5%85%A5_%26_Re%3AVIEW_Live_Reload%E4%BD%9C%E3%81%A3%E3%81%9F">Re:VIEW&#x5C0E;&#x5165; &amp; Re:VIEW Live Reload&#x4F5C;&#x3063;&#x305F; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a><a href="http://b.hatena.ne.jp/entry/http://yoshiko.hatenablog.jp/entry/2015/01/04/Re%3AVIEW%E5%B0%8E%E5%85%A5_%26_Re%3AVIEW_Live_Reload%E4%BD%9C%E3%81%A3%E3%81%9F" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://yoshiko.hatenablog.jp/entry/2015/01/04/Re%3AVIEW%E5%B0%8E%E5%85%A5_%26_Re%3AVIEW_Live_Reload%E4%BD%9C%E3%81%A3%E3%81%9F" alt="" class="http-bookmark" /></a><img src="http://s.st-hatena.com/entry.count.image?uri=http%3A%2F%2Fyoshiko.hatenablog.jp%2Fentry%2F2015%2F01%2F04%2FRe%253AVIEW%25E5%25B0%258E%25E5%2585%25A5_%2526_Re%253AVIEW_Live_Reload%25E4%25BD%259C%25E3%2581%25A3%25E3%2581%259F" alt="" class="http-star" /></li> <li><a href="http://yoshiko.hatenablog.jp/entry/2015/02/26/AngularJS%E3%81%A7%E6%94%B9%E8%A1%8C%E3%82%92%E5%90%AB%E3%82%80%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E8%B6%85%E7%B0%A1%E5%8D%98%E3%81%ABng-bind%E3%81%99%E3%82%8B">AngularJS&#x3067;&#x6539;&#x884C;&#x3092;&#x542B;&#x3080;&#x30C6;&#x30AD;&#x30B9;&#x30C8;&#x3092;&#x8D85;&#x7C21;&#x5358;&#x306B;ng-bind&#x3059;&#x308B; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a><a href="http://b.hatena.ne.jp/entry/http://yoshiko.hatenablog.jp/entry/2015/02/26/AngularJS%E3%81%A7%E6%94%B9%E8%A1%8C%E3%82%92%E5%90%AB%E3%82%80%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E8%B6%85%E7%B0%A1%E5%8D%98%E3%81%ABng-bind%E3%81%99%E3%82%8B" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://yoshiko.hatenablog.jp/entry/2015/02/26/AngularJS%E3%81%A7%E6%94%B9%E8%A1%8C%E3%82%92%E5%90%AB%E3%82%80%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E8%B6%85%E7%B0%A1%E5%8D%98%E3%81%ABng-bind%E3%81%99%E3%82%8B" alt="" class="http-bookmark" /></a><img src="http://s.st-hatena.com/entry.count.image?uri=http%3A%2F%2Fyoshiko.hatenablog.jp%2Fentry%2F2015%2F02%2F26%2FAngularJS%25E3%2581%25A7%25E6%2594%25B9%25E8%25A1%258C%25E3%2582%2592%25E5%2590%25AB%25E3%2582%2580%25E3%2583%2586%25E3%2582%25AD%25E3%2582%25B9%25E3%2583%2588%25E3%2582%2592%25E8%25B6%2585%25E7%25B0%25A1%25E5%258D%2598%25E3%2581%25ABng-bind%25E3%2581%2599%25E3%2582%258B" alt="" class="http-star" /></li> </ul> <h3>参加したイベント</h3> <ul> <li><a href="https://cordova.doorkeeper.jp/events/18225">&#x7B2C;3&#x56DE;Apache Cordova&#x52C9;&#x5F37;&#x4F1A; - &#x65E5;&#x672C;Cordova&#x30E6;&#x30FC;&#x30B6;&#x30FC;&#x4F1A; | Doorkeeper</a></li> <li><a href="http://frontrend.github.io/conference/">Frontrend Conference - A conference for front-end developer&#xFF08;2015&#x5E74;2&#x6708;21&#x65E5;&#x958B;&#x50AC;&#xFF09;</a></li> <li><a href="https://atnd.org/events/62643">&#x7B2C;9&#x56DE;HTML5&#x30D3;&#x30AE;&#x30CA;&#x30FC;&#x30BA; CSS&#x3068;CSS&#x8A2D;&#x8A08;&#x306B;&#x3064;&#x3044;&#x3066;&#x5B66;&#x307C;&#x3046;&#xFF01; : ATND</a></li> <li><a href="http://scripty.connpass.com/event/12374/">SCRIPTY#3 &#x301C;&#x30D5;&#x30ED;&#x30F3;&#x30C8;&#x30A8;&#x30F3;&#x30C9;&#x7D33;&#x58EB;&#x30FB;&#x6DD1;&#x5973;&#x306E;&#x305F;&#x3081;&#x306E;&#x52C9;&#x5F37;&#x4F1A;&#x301C; - connpass</a></li> </ul> <h2>4月</h2> <p>アシアル退職。<br/> 勉強になったことがとても多く、開発分野をフロントエンドに絞るきっかけにもなってよかったです。大変お世話になりました。</p> <p>有給消化しつつ原稿書きつつグッドパッチはじめ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%A3%BF%F4">複数</a>の会社さんとお会いしてました。<br/> このときの転職先はめちゃくちゃ悩んで、自分は働くにあたって何を一番大切にしたいのかを考え詰めていた頃。</p> <p>それと勉強会は今まで参加側オンリーだったのが、やっとこの月に初めて登壇しました。(なぜかいきなり20分枠・・・)<br/> 登壇ドリブンでES6を勉強できたし、スライドも結構いい反響がありました。schooの生中継もあったのでいろんな人に見てもらえたみたいでうれしかった。<br/> 人前に出るの苦手だし喋るのとか無理って思ってたけど、ここからだんだんと免疫がついていく。</p> <h3>書いたブログ</h3> <ul> <li><a href="http://yoshiko.hatenablog.jp/entry/2015/04/25/ES6%E5%85%A5%E9%96%80%E3%81%AE%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%97%E3%81%9F%E8%A9%B1%26Talkie_js%E8%B6%85%E3%82%AA%E3%82%B9%E3%82%B9%E3%83%A1">ES6&#x5165;&#x9580;&#x306E;&#x30BB;&#x30C3;&#x30B7;&#x30E7;&#x30F3;&#x3057;&#x305F;&#x8A71;&amp;Talkie.js&#x8D85;&#x30AA;&#x30B9;&#x30B9;&#x30E1; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a><a href="http://b.hatena.ne.jp/entry/http://yoshiko.hatenablog.jp/entry/2015/04/25/ES6%E5%85%A5%E9%96%80%E3%81%AE%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%97%E3%81%9F%E8%A9%B1%26Talkie_js%E8%B6%85%E3%82%AA%E3%82%B9%E3%82%B9%E3%83%A1" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://yoshiko.hatenablog.jp/entry/2015/04/25/ES6%E5%85%A5%E9%96%80%E3%81%AE%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%97%E3%81%9F%E8%A9%B1%26Talkie_js%E8%B6%85%E3%82%AA%E3%82%B9%E3%82%B9%E3%83%A1" alt="" class="http-bookmark" /></a><img src="http://s.st-hatena.com/entry.count.image?uri=http%3A%2F%2Fyoshiko.hatenablog.jp%2Fentry%2F2015%2F04%2F25%2FES6%25E5%2585%25A5%25E9%2596%2580%25E3%2581%25AE%25E3%2582%25BB%25E3%2583%2583%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%25B3%25E3%2581%2597%25E3%2581%259F%25E8%25A9%25B1%2526Talkie_js%25E8%25B6%2585%25E3%2582%25AA%25E3%2582%25B9%25E3%2582%25B9%25E3%2583%25A1" alt="" class="http-star" /></li> </ul> <h3>参加したイベント</h3> <ul> <li><a href="http://ui-crunch.connpass.com/event/13702/">UI Crunch #4 &#x30ED;&#x30F3;&#x30C9;&#x30F3;&#x304B;&#x3089;ustwo&#x304C;&#x6765;&#x65E5;&#xFF01;&#x300C;&#x30B3;&#x30E9;&#x30DC;&#x30EC;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x6587;&#x5316;&#x306E;&#x4F5C;&#x308A;&#x65B9;&#x300D; - connpass</a></li> <li><a href="http://atom-shell.connpass.com/event/13304/">Electron(&#x65E7;:Atom-Shell)&#x52C9;&#x5F37;&#x4F1A; #1 - connpass</a></li> <li><a href="https://javascript-fes.doorkeeper.jp/events/22834">&#x6625;&#x306E;JavaScript&#x796D; in GMO Yours - Javascript&#x796D;&#x308A; | Doorkeeper</a>(登壇)</li> <li><a href="http://kbkz.connpass.com/event/12597/">&#x6B4C;&#x821E;&#x4F0E;&#x5EA7;.tech#7&#x300C;Reactive Extensions&#x300D; - connpass</a></li> <li><a href="http://eventdots.jp/event/450255">&#x7B2C;56&#x56DE; HTML5&#x3068;&#x304B;&#x52C9;&#x5F37;&#x4F1A;&#xFF08;JavaScript&#x30D5;&#x30EC;&#x30FC;&#x30E0;&#x30EF;&#x30FC;&#x30AF;&#x6700;&#x524D;&#x7DDA; - AngularJS&#x3001;React.js - &#xFF09; - dots. [&#x30C9;&#x30C3;&#x30C4;]</a></li> <li><a href="http://nodejs.connpass.com/event/13363/">isomorphic tokyo meetup - connpass</a></li> </ul> <h3>喋ったスライド</h3> <ul> <li><a href="http://yoshiko-pg.github.io/slides/20150425-jsfes/">Hello, ES6 ~&#x3053;&#x308C;&#x304B;&#x3089;&#x8FCE;&#x3048;&#x308B;JS&#x306E;&#x30DF;&#x30E9;&#x30A4;~ - @yoshiko_pg</a><a href="http://b.hatena.ne.jp/entry/http://yoshiko-pg.github.io/slides/20150425-jsfes/" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://yoshiko-pg.github.io/slides/20150425-jsfes/" alt="" class="http-bookmark" /></a></li> </ul> <p>休み期間だったこともあり、ちょっと元気になってきて色々学びたい欲がでてきたのか勉強会色々行ってた。</p> <h2>5月</h2> <p>いろんな人に相談にのってもらい、最終的に転職先をグッドパッチに決める。<br/> デザインを大切にする理念に共感できたことが大きかった。わたしはエンジニアだけど、きちんとデザインされたものを作るときにモチベーション上がるタイプなので。<br/> 今振り返っても、よい選択だったと思っています。自分の中にある優先順位を限界まで突き詰めたのがよかった。</p> <p><a href="http://yoshiko.hatenablog.jp/entry/2015/11/02/081237">モダンコーディング本</a>は引き続きやっていたものの、執筆のしんどさ+今自分が書いているものが本当に受け入れられるのか?という不安で弱音が出てきてた頃でした。<br/> 5月末になんとか2/3部を書き終わりました。残り1部!(とイントロとチャレンジ問題・・・)</p> <h3>参加</h3> <ul> <li><a href="http://www.zusaar.com/event/7847057">CodeGrid&#x4E09;&#x5468;&#x5E74;&#x8A18;&#x5FF5;&#x30D1;&#x30FC;&#x30C6;&#x30A3;&#x30FC; on Zusaar</a></li> <li><a href="http://peatix.com/event/85352">&#x66F8;&#x7C4D;&#x300E;&#x73FE;&#x5834;&#x306E;&#x30D7;&#x30ED;&#x304C;&#x6559;&#x3048;&#x308B;HTML&#xFF0B;CSS&#x30B3;&#x30FC;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x306E;&#x6700;&#x65B0;&#x5E38;&#x8B58;&#x300F;&#x767A;&#x58F2;&#x8A18;&#x5FF5;&#x30A4;&#x30D9;&#x30F3;&#x30C8; | Peatix</a></li> <li><a href="http://bookevent.peatix.com/">Web&#x30B5;&#x30A4;&#x30C8;&#x8A2D;&#x8A08;&#x30FB;UI&#x5B9F;&#x88C5;&#x30FB;&#x30A2;&#x30AF;&#x30BB;&#x30B7;&#x30D3;&#x30EA;&#x30C6;&#x30A3;&#x306E;&#x30E2;&#x30C0;&#x30F3;&#x30A2;&#x30D7;&#x30ED;&#x30FC;&#x30C1; | Peatix</a></li> <li><a href="http://connpass.com/event/14676/">HTTP2 &#x52C9;&#x5F37;&#x4F1A; #7 - connpass</a></li> <li><a href="http://vuejs-meetup.connpass.com/event/14017/">Data Binding JS Night - connpass</a></li> <li><a href="http://googledevjp.blogspot.jp/2015/04/google-io-extended-2015.html">Google I/O Extended 2015 &#x3092;&#x958B;&#x50AC;&#x3057;&#x307E;&#x3059; - Google Developers Japan</a></li> </ul> <h2>6月〜8月</h2> <p>株式会社グッドパッチにフロントエンドエンジニアとして入社。<br/> <a href="https://prottapp.com">Prott</a>の担当になり、コードを読みながら慣れつつ、初仕事としてAngularと<a class="keyword" href="http://d.hatena.ne.jp/keyword/CoffeeScript">CoffeeScript</a>のバージョンアップ。 <br/> AngularのバージョンアップでOne Time Bindingが使えるようになったので、そのあとはひたすらパフォーマンスチューニング。 <br/> 今まではゼロから作ることが多く既存のプロダクトの改良ってあまり経験がなかったので、慣れるまでは色々大変だったけどいい経験になりました。</p> <p>グッドパッチは入社前に聞いていたとおり残業が少なく、定時ダッシュで帰って執筆、な毎日。<br/> おかげで<a href="http://yoshiko.hatenablog.jp/entry/2015/11/02/081237">モダンコーディング本</a>はなんとか最後の1部+イントロ+チャレンジ問題を書き上げ! <br/> 残るは校正。しかしここからが大変だった・・・</p> <p>8月にLT参加した<a href="http://peatix.com/event/105960">Back to Basics</a>はとてもいいイベントで、HTML/<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>系のいろんな方と知り合えたしセッションの内容もすごくよくて、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BB%C5%CD%CD%BD%F1">仕様書</a>を読むことの大切さを痛感させられました。</p> <p>あと同じく8月にCodeIQ MAGAZINEさんにインタビューを掲載していただきました!うれしはずかし・・・><</p> <p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fcodeiq.jp%2Fmagazine%2F2015%2F08%2F28065%2F" title="Goodpatchのギークガール☆趣味はプログラミング!だから、仕事外でもアウトプットしていたい|CodeIQ MAGAZINE" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://codeiq.jp/magazine/2015/08/28065/">codeiq.jp</a></cite></p> <h3>参加</h3> <ul> <li><a href="http://nodejs.connpass.com/event/16100/">Node&#x5B66;&#x5712; 16&#x6642;&#x9650;&#x76EE; ES2015&#x767A;&#x884C;&#x8A18;&#x5FF5; - connpass</a></li> <li><a href="https://atnd.org/events/67066">&#x3010;&#x6E80;&#x54E1;&#x5FA1;&#x793C;&#xFF01;&#x3011;JS&#x30AA;&#x30B8;&#x30B5;&#x30F3;&#x300C;&#x4FFA;&#x306E;&#x8A71;&#x3092;&#x805E;&#x3051;&#x3001;5&#x5206;&#x3060;&#x3051;&#x3067;&#x3082;&#x3044;&#x3044;&#x300D; #5 : ATND</a>(LT)</li> <li><a href="http://omotesandorb.connpass.com/event/16664/">&#x8868;&#x53C2;&#x9053;.rb #2 - connpass</a></li> <li><a href="https://insidetwitterjp.splashthat.com/">#InsideTwitterJP - Splash</a></li> <li><a href="http://dist.connpass.com/event/17940/">DIST.8 &#x300C;Web&#x5236;&#x4F5C;&#x8005;&#x306E;&#x305F;&#x3081;&#x306E;&#x4F1A;&#x8A08;&#x8853;&#x300D; - connpass</a></li> <li><a href="http://connpass.com/event/17986/">UX&#x306A;&#x307E;&#x30C8;&#x30FC;&#x30AF; vol.2 AWA&#x958B;&#x767A;&#x8005;&#x306E;&#x79D8;&#x8535;&#x30C8;&#x30FC;&#x30AF;&#x6709;&#x308A;&#xFF01; - connpass</a></li> <li><a href="http://peatix.com/event/105960">CSS&#x30A4;&#x30D9;&#x30F3;&#x30C8;&#x300C;Back to Basics&#x300D; | Peatix</a>(LT)</li> <li><a href="http://nodejs.connpass.com/event/18839/">Node&#x5B66;&#x5712; 17&#x6642;&#x9650;&#x76EE; &#x3010;&#x4ECA;&#x56DE;&#x306E;&#x4F1A;&#x5834;&#x306F;eventdots&#x3011; - connpass</a></li> </ul> <h3>喋ったスライド</h3> <ul> <li>JSオジサンでは去年作った<a href="http://yoshiko-pg.github.io/">ポートフォリオサイト</a>について話しました。スライドはあの日限定で><</li> <li><a href="http://yoshiko-pg.github.io/slides/20150830-backtobasics/">CSS&#x3067;&#x56FA;&#x5B9A;&#x6BD4;&#x7387;&#x30EC;&#x30A4;&#x30A2;&#x30A6;&#x30C8; - @yoshiko_pg</a><a href="http://b.hatena.ne.jp/entry/http://yoshiko-pg.github.io/slides/20150830-backtobasics/" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://yoshiko-pg.github.io/slides/20150830-backtobasics/" alt="" class="http-bookmark" /></a></li> </ul> <h2>9月</h2> <p>9月は色々なご縁から、<a href="http://reactjs-meetup.connpass.com/">React.js meetup</a>を主催されているkoba04さんと一緒に<a href="http://reactjs-meetup.connpass.com/event/19504/">React.js meetup #2</a>を開催しました!<br/> 参加者登録開始後、すごい勢いで埋まりすぎてdots.のページがめちゃくちゃ重くなるというハプニングもありつつw<br/> おかげさまで無事終わることができてよかったです!</p> <p>登壇したMilkcocoa Girlsでは、前々から気になっていた<a href="https://mlkcca.com/">Milkcocoa</a>を登壇ドリブンで使ってみました。<br/> Milkcocoaをいつも使っているHTMLスライドに組み込んで、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A5%DB">スマホ</a>をリモコンにして登壇中にリアルタイムにリアクションがとれるような仕掛けをして話してみたら、みんな内容そっちのけで遊びだしてめちゃくちゃ盛り上がりましたw</p> <p>9月は運営寄りで関わったイベントが多かったのと校正が佳境で、一番ハードでした。。<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%CA%A5%B8%A1%BC%A5%C9%A5%EA%A5%F3%A5%AF">エナジードリンク</a>漬けだったし、たぶん寿命が3年ぐらい縮んだ。</p> <h3>書いたブログ</h3> <ul> <li><a href="http://yoshiko.hatenablog.jp/entry/2015/09/04/%E8%BB%A2%E8%81%B7%E5%A0%B1%E5%91%8A%E3%81%A8%E8%BF%91%E6%B3%81%E3%82%82%E3%82%8D%E3%82%82%E3%82%8D">&#x8EE2;&#x8077;&#x5831;&#x544A;&#x3068;&#x8FD1;&#x6CC1;&#x3082;&#x308D;&#x3082;&#x308D; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a><a href="http://b.hatena.ne.jp/entry/http://yoshiko.hatenablog.jp/entry/2015/09/04/%E8%BB%A2%E8%81%B7%E5%A0%B1%E5%91%8A%E3%81%A8%E8%BF%91%E6%B3%81%E3%82%82%E3%82%8D%E3%82%82%E3%82%8D" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://yoshiko.hatenablog.jp/entry/2015/09/04/%E8%BB%A2%E8%81%B7%E5%A0%B1%E5%91%8A%E3%81%A8%E8%BF%91%E6%B3%81%E3%82%82%E3%82%8D%E3%82%82%E3%82%8D" alt="" class="http-bookmark" /></a><img src="http://s.st-hatena.com/entry.count.image?uri=http%3A%2F%2Fyoshiko.hatenablog.jp%2Fentry%2F2015%2F09%2F04%2F%25E8%25BB%25A2%25E8%2581%25B7%25E5%25A0%25B1%25E5%2591%258A%25E3%2581%25A8%25E8%25BF%2591%25E6%25B3%2581%25E3%2582%2582%25E3%2582%258D%25E3%2582%2582%25E3%2582%258D" alt="" class="http-star" /></li> </ul> <h3>参加</h3> <ul> <li><a href="http://reactjs-meetup.connpass.com/event/19504/">React.js meetup #2 - connpass</a>(半分主催)</li> <li><a href="https://railsgirls-tokyo.doorkeeper.jp/events/28815">RailsGirls Tokyo 5th - railsgirls-tokyo | Doorkeeper</a>(メンター)</li> <li><a href="http://mlkcca.connpass.com/event/19582/">&#x767B;&#x58C7;&#x8005;&#x5973;&#x5B50;&#x9650;&#x5B9A; Milkcocoa Girls ! Milkcocoa Meetup vol4 - connpass</a>(登壇)</li> </ul> <h3>喋ったスライド</h3> <ul> <li><a href="https://yoshiko-pg.github.io/slides/20150929-milkcocoa-girls/">Milkcocoa&#x3067;&#x30A8;&#x30AF;&#x30B9;&#x30C8;&#x30EA;&#x30FC;&#x30E0;&#x30E9;&#x30A4;&#x30C8;&#x30CB;&#x30F3;&#x30B0;&#x30C8;&#x30FC;&#x30AF; - @yoshiko_pg</a><a href="http://b.hatena.ne.jp/entry/https://yoshiko-pg.github.io/slides/20150929-milkcocoa-girls/" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/https://yoshiko-pg.github.io/slides/20150929-milkcocoa-girls/" alt="" class="http-bookmark" /></a></li> </ul> <h2>10月</h2> <p><a href="http://yoshiko.hatenablog.jp/entry/2015/11/02/081237">モダンコーディング本</a>の原稿がついに脱稿!!!<br/> やっと落ち着くかと思いきや、登壇が2回あったので準備とかでそれなりに忙しかったです。。<br/> でもだいぶ肩の荷は降りました。ただまだ発売されてなくて反響もわからない状態だったので戦々恐々。。</p> <p>Goodpatchでは<a href="http://goodpatch.connpass.com/event/20857/">初のEngineer meetup</a>を開催して、わたしは入社してから取り組んでいたAngularJSのパフォーマンスチューニングについてかいつまんで話しました。</p> <p>次世代Webカンファレンスはすごいイベントでしたね。参加できてよかったです。</p> <h3>書いたブログ</h3> <ul> <li><a href="http://yoshiko.hatenablog.jp/entry/2015/10/10/Stack_Overflow_DevDays%E3%81%AB%E5%8F%82%E5%8A%A0%E3%81%97%E3%81%A6%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F">Stack Overflow DevDays&#x306B;&#x53C2;&#x52A0;&#x3057;&#x3066;&#x304D;&#x307E;&#x3057;&#x305F; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a><a href="http://b.hatena.ne.jp/entry/http://yoshiko.hatenablog.jp/entry/2015/10/10/Stack_Overflow_DevDays%E3%81%AB%E5%8F%82%E5%8A%A0%E3%81%97%E3%81%A6%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://yoshiko.hatenablog.jp/entry/2015/10/10/Stack_Overflow_DevDays%E3%81%AB%E5%8F%82%E5%8A%A0%E3%81%97%E3%81%A6%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F" alt="" class="http-bookmark" /></a><img src="http://s.st-hatena.com/entry.count.image?uri=http%3A%2F%2Fyoshiko.hatenablog.jp%2Fentry%2F2015%2F10%2F10%2FStack_Overflow_DevDays%25E3%2581%25AB%25E5%258F%2582%25E5%258A%25A0%25E3%2581%2597%25E3%2581%25A6%25E3%2581%258D%25E3%2581%25BE%25E3%2581%2597%25E3%2581%259F" alt="" class="http-star" /></li> <li><a href="http://yoshiko.hatenablog.jp/entry/2015/10/22/014347">position: absolute; + display: table;&#x306E;&#x8B0E;&#x3092;&#x89E3;&#x304D;&#x305F;&#x3044; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a><a href="http://b.hatena.ne.jp/entry/http://yoshiko.hatenablog.jp/entry/2015/10/22/014347" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://yoshiko.hatenablog.jp/entry/2015/10/22/014347" alt="" class="http-bookmark" /></a><img src="http://s.st-hatena.com/entry.count.image?uri=http%3A%2F%2Fyoshiko.hatenablog.jp%2Fentry%2F2015%2F10%2F22%2F014347" alt="" class="http-star" /></li> <li><a href="http://yoshiko.hatenablog.jp/entry/2015/10/23/222455">absolute + table&#x306E;&#x8B0E;&#x304C;&#x89E3;&#x3051;&#x305F;&#xFF01;&#xFF01;&#xFF01;&#xFF01; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a><a href="http://b.hatena.ne.jp/entry/http://yoshiko.hatenablog.jp/entry/2015/10/23/222455" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://yoshiko.hatenablog.jp/entry/2015/10/23/222455" alt="" class="http-bookmark" /></a><img src="http://s.st-hatena.com/entry.count.image?uri=http%3A%2F%2Fyoshiko.hatenablog.jp%2Fentry%2F2015%2F10%2F23%2F222455" alt="" class="http-star" /></li> </ul> <h3>参加</h3> <ul> <li><a href="http://devdays.peatix.com/">Stack Overflow 10&#x6708;&#x300C;DevDays&#x300D; | Peatix</a></li> <li><a href="http://goodpatch.connpass.com/event/20857/">Goodpatch Engineer Meetup Vol.1 - connpass</a>(登壇)</li> <li><a href="http://nextwebconf.connpass.com/event/19699/">&#x6B21;&#x4E16;&#x4EE3; Web &#x30AB;&#x30F3;&#x30D5;&#x30A1;&#x30EC;&#x30F3;&#x30B9; - connpass</a></li> <li><a href="http://tokyo-css-module-specs.connpass.com/event/21413/">&#x7B2C;2&#x56DE; W3C CSS Module &#x4ED5;&#x69D8;&#x66F8;&#x3082;&#x304F;&#x3082;&#x304F;&#x4F1A;@&#x6771;&#x4EAC; - connpass</a>(会場提供)</li> <li><a href="http://eventdots.jp/event/571557">&#x300C;ECMAScript6&#x52C9;&#x5F37;&#x4F1A;&#x300D;HappyHalloween JS &#x796D;&#xFF01;&#xFF01; &#x300A;&#x4EEE;&#x88C5;&#x30DE;&#x30B9;&#x30C8;&#x3058;&#x3083;&#x306A;&#x3044;&#x3088;&#x300B; - dots. [&#x30C9;&#x30C3;&#x30C4;]</a>(登壇)</li> </ul> <h3>喋ったスライド</h3> <ul> <li><a href="http://yoshiko-pg.github.io/slides/20151015-gp-meetup/">AngularJS&#x306E;$watch&#x767B;&#x9332;&#x6570;&#x304C;60,000&#x3060;&#x3063;&#x305F; - @yoshiko_pg</a><a href="http://b.hatena.ne.jp/entry/http://yoshiko-pg.github.io/slides/20151015-gp-meetup/" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://yoshiko-pg.github.io/slides/20151015-gp-meetup/" alt="" class="http-bookmark" /></a></li> <li><a href="http://yoshiko-pg.github.io/slides/20151031-es6-halloween/">Good afternoon, ES6 - @yoshiko_pg</a><a href="http://b.hatena.ne.jp/entry/http://yoshiko-pg.github.io/slides/20151031-es6-halloween/" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://yoshiko-pg.github.io/slides/20151031-es6-halloween/" alt="" class="http-bookmark" /></a></li> </ul> <h2>11月</h2> <p>11/2、ついに<a href="http://yoshiko.hatenablog.jp/entry/2015/11/02/081237">モダンコーディング本</a>発売!!!<br/> いやー長かった・・・<br/> ここまで書いてきたとおり、今年はプライベートのほとんどをこの本の執筆にあててました。。</p> <p>おかげさまで評判もよく、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Amazon">Amazon</a>でも発売後しばらくWebプログラミングカテゴリで1位になっていたりと色々と報われました。。<br/> 嬉しい感想も<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%A3%BF%F4">複数</a>いただいて、縮んだ寿命を取り戻しましたw<br/> ターゲットとなるレベル層をかなり絞って書いた本でしたが、きちんと刺さったようでよかったです。</p> <p>レビュアーさんがたと打ち上げも終え、やっと一段落。。</p> <p>そして11月はVimConfでしたね!<a href="http://vimconf.vim-jp.org/2015/">VimConf2015のサイト</a>を制作させていただきました。</p> <h3>書いたブログ</h3> <ul> <li><a href="http://yoshiko.hatenablog.jp/entry/2015/11/02/081237">HTML5/CSS3 &#x30E2;&#x30C0;&#x30F3;&#x30B3;&#x30FC;&#x30C7;&#x30A3;&#x30F3;&#x30B0; &#x3092;&#x57F7;&#x7B46;&#x3057;&#x307E;&#x3057;&#x305F; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a><a href="http://b.hatena.ne.jp/entry/http://yoshiko.hatenablog.jp/entry/2015/11/02/081237" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://yoshiko.hatenablog.jp/entry/2015/11/02/081237" alt="" class="http-bookmark" /></a><img src="http://s.st-hatena.com/entry.count.image?uri=http%3A%2F%2Fyoshiko.hatenablog.jp%2Fentry%2F2015%2F11%2F02%2F081237" alt="" class="http-star" /></li> </ul> <h3>参加</h3> <ul> <li><a href="http://nodejs.connpass.com/event/20741/">&#x6771;&#x4EAC;Node&#x5B66;&#x5712;&#x796D;2015 - connpass</a></li> <li><a href="http://tokyo-css-module-specs.connpass.com/event/22639/">&#x7B2C;3&#x56DE; W3C CSS Module &#x4ED5;&#x69D8;&#x66F8;&#x3082;&#x304F;&#x3082;&#x304F;&#x4F1A;@&#x6771;&#x4EAC; - connpass</a>(会場提供)</li> <li><a href="http://ui-crunch.connpass.com/event/22197/">UI Crunch World Edition / &#x4E16;&#x754C;&#x3067;&#x6311;&#x6226;&#x3059;&#x308B;&#x30B5;&#x30FC;&#x30D3;&#x30B9;&#x306E;&#x4ECA; - connpass</a>(スタッフ)</li> <li><a href="http://vimconf.connpass.com/event/20574/">VimConf 2015 - connpass</a>(スタッフ)</li> <li><a href="http://html5j.connpass.com/event/22897/">&#x7B2C;61&#x56DE; HTML5&#x3068;&#x304B;&#x52C9;&#x5F37;&#x4F1A;&#x300E;CSS&#x300F; - connpass</a></li> <li><a href="http://connpass.com/event/22694/">&#x30AF;&#x30C3;&#x30AF;&#x30D1;&#x30C3;&#x30C9;&#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x306E;&#x30C8;&#x30FC;&#x30AF;&#x30CA;&#x30A4;&#x30C8;&#x301C;&#x30C6;&#x30B9;&#x30C8;&#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;vol.2 Testing&#x7DE8;&#x301C; - connpass</a></li> </ul> <h2>12月</h2> <p><a href="http://qiita.com/advent-calendar/2015/goodpatch">Goodpatchエンジニアアドベントカレンダー</a>にトップバッターで参加したら<a href="http://memo.goodpatch.co/2015/12/goodpatch-advent-calendar-2015-ranking/">最後の集計で反響1位</a>をいただきましたっ!<br/> (しかし集計後に最終日の<a href="http://sadah.hatenablog.com/entry/prott-performance-tuning-2015">CTOさださんの記事</a>に抜かれるw)</p> <p>RubyKaigiにも初参加できました。会社に参加させていただけてとても<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CD%AD%B0%D5">有意</a>義でした!</p> <p>SCRIPTYで喋った<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>での中央寄せについてのスライド、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%CF%A4%C6%A5%D6">はてブ</a>めっちゃついたと思ったらスライドのめくりかたがわかんないって燃え上がってました。。。左右矢印キーでどうぞ!!!!!!</p> <p>あと誕生日に<a href="https://www.amazon.co.jp/gp/registry/wishlist/1HHVGJ56A7APG/">ウィッシュリスト</a>を初めて公開してみたら色々いただき・・・感動しました!<br/> プレゼントいただくのってあんなにうれしいんですね><。ありがとうございます!!</p> <h3>書いたブログ</h3> <ul> <li><a href="http://yoshiko.hatenablog.jp/entry/2015/12/01/085000">Prott&#x306E;&#x30C6;&#x30B9;&#x30C8;&#x3092;&#x652F;&#x3048;&#x308B;3&#x3064;&#x306E;&#x65BD;&#x7B56;&#xFF08;power-assert&#x5C0E;&#x5165; &amp; Protected branches &amp; CI&#x9AD8;&#x901F;&#x5316;&#xFF09; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a><a href="http://b.hatena.ne.jp/entry/http://yoshiko.hatenablog.jp/entry/2015/12/01/085000" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://yoshiko.hatenablog.jp/entry/2015/12/01/085000" alt="" class="http-bookmark" /></a><img src="http://s.st-hatena.com/entry.count.image?uri=http%3A%2F%2Fyoshiko.hatenablog.jp%2Fentry%2F2015%2F12%2F01%2F085000" alt="" class="http-star" /></li> <li><a href="http://yoshiko.hatenablog.jp/entry/2015/12/15/001750">24&#x5E74;&#x3092;&#x632F;&#x308A;&#x8FD4;&#x308B;&#x3002; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a><a href="http://b.hatena.ne.jp/entry/http://yoshiko.hatenablog.jp/entry/2015/12/15/001750" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://yoshiko.hatenablog.jp/entry/2015/12/15/001750" alt="" class="http-bookmark" /></a><img src="http://s.st-hatena.com/entry.count.image?uri=http%3A%2F%2Fyoshiko.hatenablog.jp%2Fentry%2F2015%2F12%2F15%2F001750" alt="" class="http-star" /></li> </ul> <h3>参加</h3> <ul> <li><a href="http://rubykaigi.org/2015">RubyKaigi 2015</a></li> <li><a href="http://scripty.connpass.com/event/22663/">SCRIPTY#4 &#x301C;&#x30D5;&#x30ED;&#x30F3;&#x30C8;&#x30A8;&#x30F3;&#x30C9;&#x7D33;&#x58EB;&#x30FB;&#x6DD1;&#x5973;&#x306E;&#x305F;&#x3081;&#x306E;&#x52C9;&#x5F37;&#x4F1A;&#x301C; - connpass</a>(登壇)</li> <li><a href="http://cssnite.jp/lp/shift9/">&#x300C;Shift9&#xFF1A;Web&#x30C7;&#x30B6;&#x30A4;&#x30F3;&#x884C;&#x304F;&#x5E74;&#x6765;&#x308B;&#x5E74;&#xFF08;CSS Nite LP43&#xFF09;&#x300D;&#xFF08;2015&#x5E74;12&#x6708;26&#x65E5;&#x958B;&#x50AC;&#xFF09;</a></li> </ul> <h3>喋ったスライド</h3> <ul> <li><a href="http://yoshiko-pg.github.io/slides/20151215-scripty/">&#x307E;&#x3060;&#x4E2D;&#x592E;&#x5BC4;&#x305B;&#x3067;&#x6D88;&#x8017;&#x3057;&#x3066;&#x308B;&#x306E;&#xFF1F; - @yoshiko_pg</a><a href="http://b.hatena.ne.jp/entry/http://yoshiko-pg.github.io/slides/20151215-scripty/" class="http-bookmark"><img src="//b.hatena.ne.jp/entry/image/http://yoshiko-pg.github.io/slides/20151215-scripty/" alt="" class="http-bookmark" /></a></li> </ul> <h2>総括</h2> <p>振り返ってみるといろいろやったなーって感じですね・・・ <br/> 本の出版や登壇など、アウトプット面で奔走していた気がします。<br/> いろいろ詰め込み過ぎ感あるけど、アウトプットすることでできる成長がたくさんありました。あとそれをきっかけに知り合うことができた方もたくさんいるので、結果的にはよかったかなぁと思っています。</p> <h2>きたる2016年</h2> <p>今年はちょっと慌ただしすぎたという反省も(すごく)あるので、来年は落ち着いて自分の時間を確保して、エンジニアとしての基礎的な部分や長く使える技術、また今まで触れたことのなかった<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D1%A5%E9%A5%C0%A5%A4%A5%E0">パラダイム</a>について腰を据えて勉強したいなと思っています。<br/> あとデザインを勉強したい!そして今や、パララックス(笑)になってしまった<a href="http://yoshiko-pg.github.io">個人サイト</a>をリニューアルするぞ・・・!!</p> <p>ちなみに来月となる1月には、schooさんで<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>についての全3回の授業をさせていただくことが決まっています。</p> <p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fschoo.jp%2Fcourse%2F354" title="実践JavaScript(全3回) - schoo WEB-campus(スクー)" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://schoo.jp/course/354">schoo.jp</a></cite></p> <p>レベル感的には、これもモダンコーディング本と似た感じになりそう。。<br/> 基本的な文法はわかるけど、いざ実践となるとなかなか・・・みたいな方向けです! <br/> 特にJS触り始めだと<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a>ないと何もできない!みたいになりがちだと思うので(私もそうでした)、生JSの<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>を覚えてみるいい機会にもなると思います!</p> <p><blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">私がJS始めたときは<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a>と一緒に覚えちゃったから何がJSで何が<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a>なのかよくわかってなくて、そのときこういうのあったらいいなーって思ったようなのをやります&#10;先に知っとくとあーJSだとこう書くのを<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a>だとこう書けるのね!みたいな覚え方ができるのでいいと思う</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/678048112770846720">2015, 12月 19</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p><blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">入門なので深くまではできないけど、最低限のDOM <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>・非同期通信と、おーなんかこんなのできる!たのしい!っていうのが伝わればよいなぁと思っています</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/678048707082776576">2015, 12月 19</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>生放送なので緊張ですが、ぜひぜひよろしくお願いします><</p> <p>あと必死で書き上げた<a href="http://yoshiko.hatenablog.jp/entry/2015/11/02/081237">モダンコーディング本</a>、いま<a class="keyword" href="http://d.hatena.ne.jp/keyword/Kindle">Kindle</a>版のほうが<a class="keyword" href="http://d.hatena.ne.jp/keyword/Amazon">Amazon</a>でセールになっているようです!</p> <p><blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">いま<a class="keyword" href="http://d.hatena.ne.jp/keyword/Kindle">Kindle</a>だと半額以下になってるのでコーディング勉強中な方はこの機会にぜひっ!(いつまで割引なのかはよくわからない)&#10;<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>/CSS3モダンコーディング&#10;<a href="https://t.co/h63k7gA7Md">https://t.co/h63k7gA7Md</a></p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/681799731249455104">2015, 12月 29</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>こちらもぜひぜひー!<br/> 技術書のアピールはうざいぐらいがちょうどいいって先輩方からうかがっているので、これからもちょいちょいプッシュしていくと思いますw</p> <p>この1年でいろいろな人と知り合うことができて、人と会うことが好きになりました。<br/> 2016年もよろしくお願いします!</p> yoshiko_pg 24年を振り返る。 hatenablog://entry/6653586347148593183 2015-12-15T00:17:50+09:00 2015-12-31T16:28:41+09:00 yoshiko_pg.age++— よしこ (@yoshiko_pg) December 14, 2015 ってことで24歳になっちゃいました。早いものですね。 この1年はたしてどんな歳になるのでしょうか。 正直去年ぐらいからいろいろと激動で、1ヶ月後のことも予想できない感じで毎日生きています。 数日前に思いついたんですが、ちょうど24年なので、生まれてから今までの流れを1日(24h)に換算して振り返ってみようと思います。 時間はそのまま年齢で、分数は1ヶ月が5分です。12*5=60でぴったり。 <p><blockquote class="twitter-tweet" lang="HASH(0x88760a0)"><p lang="tl" dir="ltr">yoshiko_pg.age++</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/676417689787633664">December 14, 2015</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>ってことで24歳になっちゃいました。早いものですね。<br/> この1年はたしてどんな歳になるのでしょうか。<br/> 正直去年ぐらいからいろいろと激動で、1ヶ月後のことも予想できない感じで毎日生きています。</p> <p>数日前に思いついたんですが、ちょうど24年なので、生まれてから今までの流れを1日(24h)に換算して振り返ってみようと思います。<br/> 時間はそのまま年齢で、分数は1ヶ月が5分です。12*5=60でぴったり。</p> <h2>よしこの24h</h2> <hr /> <p>あなたが今これを読んでいるということは、もうここによしこの24hはないでしょう。<br/> (恥ずかしくなったので24時間後に消しました)</p> <hr /> <p>こうしてみると働き出したのって夜からなんですね。っていうか学生時代長いなぁ・・・<br/> 小学校とか中学校とか正直あまり楽しくなかったのですが、社会人になってからは楽しいので、紆余曲折あったけどなんとか生きてきてエンジニアになれてよかったなぁと思います。本当によかった。<br/> あと1日生きたら、48歳ですね。人生も折り返しです。<br/> そう考えると人生ってたった4日ぐらいなんだなぁ。</p> <h2>23歳のハイライト</h2> <p>やっぱりグッドパッチに入社したことと、本をだせたことでしょうか。</p> <p>グッドパッチには今年の6月に入社して、今ちょうど半年経ったのですが、とてもいい会社だと思います。<br/> まずみんな若い!!<br/> いままではだいたいどこいってもほぼ最年少だったのに、グッドパッチでは同い年や年下がごろごろいて、しかもみんな優秀。。。<br/> 文化としても歳を気にするような感じじゃなく、その人は何ができるのか?どんな価値を生み出せるのか?という視点でやりとりをしている気がするので、年齢に甘えるということがなくなります。あと優秀な女性の方もすごく多いので刺激になります。<br/> 開発環境も快適だし、みんな新しいことが好きだし、プロダクトのデザインにこだわる姿勢があるし(デザインの会社としては当たり前かもだけどエンジニア目線だと決して当たり前ではなかった)、いい会社だなーと思います。まだまだこれからの部分もたくさんあるけど、グッドパッチに入ってよかったと思っています。<br/> (ちなみにエンジニア絶賛募集中なので、気になる方は<a href="https://www.wantedly.com/projects/16402">Wantedly</a>をポチるか、わたしに声をかけてくださいねー!)</p> <p><a href="http://yoshiko.hatenablog.jp/entry/2015/11/02/081237">モダンコーディング本</a>については今年の1月から10月まで作業していて、その間の後悔の数も、消費した<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%CA%A5%B8%A1%BC%A5%C9%A5%EA%A5%F3%A5%AF">エナジードリンク</a>の数も数えきれないですね・・・普段コードを書くことに比べたら、文章書くのってびっくりするほど大変でした。<br/> でも本当にやってよかったです。それは出してから良い評判をいただけていることもありますが、なにより本を書く前と書いたあとの自分が書くHTMLと<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>が変わりました。最近仕事でコーディングしていて露骨に感じます。<br/> 10ヶ月間めちゃくちゃ調べてめちゃくちゃ悩んだことはちゃんと血となり肉となっているんだな、という感じですね。<br/> あの本で一番勉強できたのは自分自身だと思っています。</p> <p>ただ書きたかったのに書けなかったTipsもあるし、もうちょっとこう進めればよかったなという反省もいろいろあります><<br/> でも、おそらく人生で一番頑張りました!やったぜ!</p> <h2>24歳でやりたいこと</h2> <p>23歳はほぼ執筆に捧げてたので、そのぶんこの1年プログラミングと私生活にはあまりリソースさけなかったなぁ・・・という実感がすごくあります。<br/> なのでそのぶんを取り返していきたい!!<br/> わたしはHTML/<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>コーディングも好きですがやっぱり<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%ED%A5%B0%A5%E9%A5%DE%A1%BC">プログラマー</a>だしプログラミングが一番好きです。 <br/> 特に全体の設計の部分をあれこれ考えるのが楽しいし、もっと考えたい。<br/> アウトプットはすこしゆるめて、その辺りを考えられるだけのインプットをたくさんいれたいなと思っています。 <br/> 今やりたいのはReactとTypeScriptかなぁ。静的型付け言語をやったことがないのでそろそろ触ってみたい。(AltJSでかよって感じだけど・・・)<br/> SPAだと設計もプログラミングも<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>もスタイリングも楽しめて最高なんだもん。</p> <h2>というわけで</h2> <p>はじめての<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A3%A5%C3%A5%B7%A5%E5%A5%EA%A5%B9%A5%C8">ウィッシュリスト</a>おいときますね!</p> <p><iframe src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fwww.amazon.co.jp%2Fregistry%2Fwishlist%2F1HHVGJ56A7APG%2Fref%3Dcm_sw_r_tw_ws_jTTBwbKB7B5M3" title="Amazon.co.jp" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://www.amazon.co.jp/registry/wishlist/1HHVGJ56A7APG/ref=cm_sw_r_tw_ws_jTTBwbKB7B5M3">www.amazon.co.jp</a></cite></p> <p>今夜は<a href="http://scripty.connpass.com/event/22663/">SCRIPTY#4</a>で登壇だーー!!</p> yoshiko_pg Prottのテストを支える3つの施策(power-assert導入 & Protected branches & CI高速化) hatenablog://entry/6653586347147016293 2015-12-01T08:50:00+09:00 2016-05-12T00:11:14+09:00 この記事はGoodpatch Advent Calendar 2015の1日目の記事です!最近おこなったテスト推進施策である、フロントエンドテスト環境構築・GitHubでProtected branchesの導入・TravisCIの実行時間短縮について書いています。 <p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20151201/20151201005303.png" alt="f:id:yoshiko_pg:20151201005303p:plain" title="f:id:yoshiko_pg:20151201005303p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>この記事はGoodpatchのエンジニアがお送りする<a href="http://qiita.com/advent-calendar/2015/goodpatch">Goodpatch Advent Calendar 2015</a>の1日目の記事です!</p> <p>1日目は最近Prottチームでおこなったテスト推進施策について書いてみようと思います!</p> <p>私は<a href="https://prottapp.com/">Prott</a>というプロトタイピング<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C4%A1%BC%A5%EB">ツール</a>の開発を担当しているのですが、Prottには今までサーバーサイドのコードにしか自動テストがありませんでした。<br/> 変化のサイクルが速く長期的な運用になる自社サービスは常にコードの形を変えていく必要がありますが、自動テストがないと気軽な<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%D5%A5%A1%A5%AF%A5%BF%A5%EA%A5%F3%A5%B0">リファクタリング</a>をしていくことが難しくなってしまいます。<br/> 今回はテスト推進施策ということで、フロントエンド側のテスト環境構築とテストに関連する取り組みを行ったので、その内容をまとめたいと思います。</p> <p>ポイントは以下の3点です!</p> <ul> <li>フロントエンドのテスト環境を作る <ul> <li>→ Karma + mocha + power-assert + babel でのテスト環境構築</li> </ul> </li> <li>masterにマージされるコードは必ずテストが通っていることを保証する <ul> <li>→ Protected branchesの導入</li> </ul> </li> <li>テストの実行コストを減らす <ul> <li>→ キャッシュの設定でCIを高速化</li> </ul> </li> </ul> <h2>フロントエンドテスト環境構築</h2> <h3>構成</h3> <ul> <li>テストランナー:Karma</li> <li>テスト<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%EC%A1%BC%A5%E0%A5%EF%A1%BC%A5%AF">フレームワーク</a>:mocha</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%B5%A1%BC%A5%B7%A5%E7%A5%F3">アサーション</a>ライブラリ:power-assert</li> <li>テストコード言語:ES2015(babel使用)</li> <li>テスト対象コード言語:<a class="keyword" href="http://d.hatena.ne.jp/keyword/CoffeeScript">CoffeeScript</a></li> </ul> <p>Prottのコードは<a class="keyword" href="http://d.hatena.ne.jp/keyword/CoffeeScript">CoffeeScript</a>で書かれていますが、テストコードはES2015で書こう!ということになりました!<br/> テストコードからでも新しい記法に少しずつ慣れていけるのは嬉しいですね。</p> <h3>テスト環境のセットアップ</h3> <pre class="code lang-zsh" data-lang="zsh" data-unlink>$ npm install --save-dev karma karma-browserify babelify power-assert babel-plugin-espower babel-preset-es2015 karma-coffee-preprocessor coffee-script <span class="synComment"># Karma設定ファイル生成(今回はCoffeeScriptを使用)</span> $ ./node_modules/.bin/karma init karma.conf.coffee <span class="synComment"># 対話式でconfigファイルを生成できるので、テストフレームワークでmocha, ブラウザでPhantomJSを選択</span> <span class="synComment"># → 該当パッケージ(karma-mocha karma-phantomjs-launcher)がインストールされる</span> </pre> <p>生成されたkarma.conf.coffeeを開いて少し編集します。</p> <pre class="code lang-coffee" data-lang="coffee" data-unlink>module<span class="synStatement">.</span>exports <span class="synStatement">=</span> <span class="synSpecial">(</span>config<span class="synSpecial">)</span> <span class="synStatement">-&gt;</span> config<span class="synStatement">.</span>set <span class="synIdentifier">basePath</span><span class="synStatement">:</span> <span class="synConstant">''</span> <span class="synIdentifier">frameworks</span><span class="synStatement">:</span> <span class="synSpecial">[</span><span class="synConstant">'mocha'</span><span class="synSpecial">,</span> <span class="synConstant">'browserify'</span><span class="synSpecial">]</span> <span class="synComment"># browserify追加</span> <span class="synIdentifier">files</span><span class="synStatement">:</span> <span class="synSpecial">[</span> <span class="synComment"># 追加</span> <span class="synConstant">'app/bower_components/angular/angular.js'</span> <span class="synComment"># テスト対象コードに必要なライブラリ類</span> <span class="synConstant">'app/bower_components/angular-mocks/angular-mocks.js'</span> <span class="synComment"># ...省略...</span> <span class="synConstant">'app/scripts/**/*.coffee'</span> <span class="synComment"># テスト対象コード</span> <span class="synConstant">'test/spec/**/*.js'</span> <span class="synComment"># テストコード</span> <span class="synSpecial">]</span> <span class="synIdentifier">exclude</span><span class="synStatement">:</span> <span class="synSpecial">[]</span> <span class="synIdentifier">preprocessors</span><span class="synStatement">:</span> <span class="synComment"># 追加</span> <span class="synConstant">'app/scripts/**/*.coffee'</span><span class="synStatement">:</span> <span class="synConstant">'coffee'</span> <span class="synConstant">'test/spec/**/*.js'</span><span class="synStatement">:</span> <span class="synConstant">'browserify'</span> <span class="synComment"># 追加</span> <span class="synIdentifier">browserify</span><span class="synStatement">:</span> <span class="synIdentifier">debug</span><span class="synStatement">:</span> <span class="synConstant">true</span> <span class="synIdentifier">transform</span><span class="synStatement">:</span> <span class="synSpecial">[</span> <span class="synSpecial">[</span><span class="synConstant">&quot;babelify&quot;</span><span class="synSpecial">,</span> <span class="synIdentifier">plugins</span><span class="synStatement">:</span> <span class="synSpecial">[</span><span class="synConstant">&quot;babel-plugin-espower&quot;</span><span class="synSpecial">]]</span> <span class="synSpecial">]</span> <span class="synIdentifier">reporters</span><span class="synStatement">:</span> <span class="synSpecial">[</span><span class="synConstant">'progress'</span><span class="synSpecial">]</span> <span class="synIdentifier">port</span><span class="synStatement">:</span> <span class="synConstant">9876</span> <span class="synIdentifier">colors</span><span class="synStatement">:</span> <span class="synConstant">true</span> <span class="synIdentifier">logLevel</span><span class="synStatement">:</span> config<span class="synStatement">.</span><span class="synConstant">LOG_INFO</span> <span class="synIdentifier">autoWatch</span><span class="synStatement">:</span> <span class="synConstant">true</span> <span class="synIdentifier">browsers</span><span class="synStatement">:</span> <span class="synSpecial">[</span><span class="synConstant">'PhantomJS'</span><span class="synSpecial">]</span> <span class="synIdentifier">singleRun</span><span class="synStatement">:</span> <span class="synConstant">false</span> <span class="synIdentifier">concurrency</span><span class="synStatement">:</span> <span class="synType">Infinity</span> </pre> <p>これでkarmaの設定ができました。</p> <p>続いてbabelです。ES2015を今すぐ使えるJSに変換してくれるbabelは、バージョン6から変換機能が<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3">プラグイン</a>形式になりました。<br/> ES2015を変換したい場合は、<code>babel-preset-es2015</code> をインストールした上でプロジェクトルートの<code>.babelrc</code>に使用する<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3">プラグイン</a>を記述する必要があります。</p> <pre class="code" data-lang="" data-unlink>{ &#34;presets&#34;: [&#34;es2015&#34;] }</pre> <p>最後に <code>test/spec/</code> 以下にES2015で簡単なサンプルテストを作成します。</p> <pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synStatement">import</span> assert from <span class="synConstant">&quot;power-assert&quot;</span>; describe(<span class="synConstant">'sample test'</span>, () =&gt; <span class="synIdentifier">{</span> it(<span class="synConstant">'1 + 1'</span>, () =&gt; <span class="synIdentifier">{</span> assert(1 + 1 === 3); <span class="synIdentifier">}</span>); <span class="synIdentifier">}</span>); </pre> <p>これで <code>./node_modules/.bin/karma start</code> (グローバルにkarma-<a class="keyword" href="http://d.hatena.ne.jp/keyword/cli">cli</a>を入れている場合は<code>karma start</code>)でテストが実行されます!</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20151201/20151201021242.png" alt="f:id:yoshiko_pg:20151201021242p:plain" title="f:id:yoshiko_pg:20151201021242p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>見やすい表示でエラーが表示されました。</p> <p>ちなみに、私が開発に使用しているRubyMineではバージョン7だとES2015の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%F3%A5%BF%A5%C3%A5%AF%A5%B9">シンタックス</a>がエラー表示になってしまいました。<br/> 8にバージョンアップの上、<code>Preferences</code>→<code>Languages &amp; Frameworks</code>→<code>JavaScript</code> で <code>JavaScript language version</code> を <code>ECMAScript 6</code> にするとエラーが表示されなくなります!</p> <h2>Protected branchesの導入</h2> <p>2015年9月4日から<a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a>に「<a href="https://github.com/blog/2051-protected-branches-and-required-status-checks">Protected branches</a>」という機能が追加され、任意のブランチを保護することができるようになりました。<br/> Protected branchに指定されたブランチには以下の操作が禁止されます。</p> <ul> <li>ブランチの削除</li> <li>force push(コミット履歴を上書きできる強制プッシュ。<code>push -f</code>)</li> <li>テストが通る前のコードのマージ(オプション) <ul> <li>テストステータスを確認できないため、ローカルからの直接プッシュも禁止される → 大事なブランチへのうっかりプッシュを防げて嬉しい!</li> </ul> </li> </ul> <h3>設定方法</h3> <p>設定したい<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>のSettingsタブ <span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20151201/20151201005849.png" alt="f:id:yoshiko_pg:20151201005849p:plain" title="f:id:yoshiko_pg:20151201005849p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>Branchesを選択 <span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20151201/20151201005901.png" alt="f:id:yoshiko_pg:20151201005901p:plain" title="f:id:yoshiko_pg:20151201005901p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>Protected branchesから対象にしたいブランチを選択 <span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20151201/20151201005915.png" alt="f:id:yoshiko_pg:20151201005915p:plain" title="f:id:yoshiko_pg:20151201005915p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>テスト周りのオプションを選んで確定 <span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20151201/20151201005937.png" alt="f:id:yoshiko_pg:20151201005937p:plain" title="f:id:yoshiko_pg:20151201005937p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h3>注意点</h3> <p>たとえばmasterに対してPull Request AとBがあった場合、今まではそのまま両方をぽちぽちとmasterにマージすることができましたが、masterがProtected branchである場合にはマージ後のコードがテストに通過することを保証しなければならないため、Aをmasterへマージしたあとに逆に一度Bに対してmaster(Aの差分)をマージしてBのテストを通過させる必要があります。<br/> 少しテスト待ちの時間がかかってしまいますが、AとBそれぞれ単体ではテストに通っていたのに両方をmasterにマージしたらmasterでテストが落ちた、というような事態を防ぐことができます。</p> <h2>キャッシュの設定でCIを高速化</h2> <p>.<a class="keyword" href="http://d.hatena.ne.jp/keyword/travis">travis</a>.ymlに以下の指定を追加します。</p> <pre class="code" data-lang="" data-unlink>sudo: false cache: directories: - node_modules - vendor/bundle</pre> <p>cacheのdirectoriesにnpm installとbundle install先のディレクトリを指定することでキャッシュが効き、インストール時間を大幅に短縮できます。<br/> (bundle installのディレクトリ指定は、<code>bundler_args</code>の値もしくは<code>before_script</code>内の<code>bundle install</code>に <code>--path vendor/bundle</code> を追加してください)<br/> 加えて、<code>sudo: false</code>を指定することでコンテナベースの環境を使用することができ、テストの開始が速くなります。<br/> これで1回に7~9分ぐらいかかっていた実行時間が2分40秒程度に短縮されました。</p> <p>参考:<a href="http://teppeis.hatenablog.com/entry/2015/04/recent-travis-yml">いまどきの.travis.yml - teppeis blog</a></p> <hr /> <p>以上3つ、最近Prottチームに取り入れたテスト推進施策をご紹介しました。</p> <p>フロントエンドのテストは実行環境を構築したばかりなのでまだ数がありませんが、ES2015で書けるということもテストを書くモチベーションに加担してくれています。<br/> コストとのバランスをとりながら、積極的にテストコードを充実させていきたいと思います!</p> <p>2日目はGoodpatchが誇るサーバーサイドエンジニア、itoさんの<a href="http://t.snkz.org/source-code-naming/">今日からはじめる命名戦略</a>です!</p> yoshiko_pg HTML5/CSS3 モダンコーディング を執筆しました hatenablog://entry/6653458415126626182 2015-11-02T08:12:37+09:00 2016-11-16T23:09:26+09:00 HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)作者: 吉田真麻出版社/メーカー: 翔泳社発売日: 2015/11/03メディア: 大型本この商品を含むブログを見る どんな本なの? HTMLとCSSの初心者〜中級者向けの本です。HTML・CSSの基本的な文法と一般的なタグ・プロパティ(a要素とかmarginプロパティとか)を多少知っている方であれば読めます。 イメージ的には、超初心者本の次に読むような感じ。既にHTML/CSSの最低限の知識はあって… <p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798141577/hatena-blog-22/"><img src="http://ecx.images-amazon.com/images/I/51R4sqEpwAL._SL160_.jpg" class="hatena-asin-detail-image" alt="HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)" title="HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798141577/hatena-blog-22/">HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> 吉田真麻</li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%E6%C6%B1%CB%BC%D2">翔泳社</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2015/11/03</li><li><span class="hatena-asin-detail-label">メディア:</span> 大型本</li><li><a href="http://d.hatena.ne.jp/asin/4798141577/hatena-blog-22" target="_blank">この商品を含むブログを見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20151101/20151101132944.jpg" alt="f:id:yoshiko_pg:20151101132944j:plain" title="f:id:yoshiko_pg:20151101132944j:plain" class="hatena-fotolife" itemprop="image"></span></p> <h2>どんな本なの?</h2> <p>HTMLと<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>の初心者〜中級者向けの本です。HTML・<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>の基本的な文法と一般的なタグ・プロパティ(a要素とかmarginプロパティとか)を多少知っている方であれば読めます。<br/> イメージ的には、超初心者本の次に読むような感じ。既にHTML/<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>の最低限の知識はあって既存コードの修正やコピペはできる、けどまだいちから何か作るようなコーディングは難しい・・・というようなレベル感の方が、いちからサイトを作る経験をしながらもっと知識や理解を深めていく、というような内容です。<br/> 技術書って読んだだけではすぐに知識を忘れてしまったり実践に活かせなかったりするので、この本は手を動かすことを重視したハンズオン形式になっています。コーディングしながら、新しいプロパティが出てきたらそのとき初めてそのプロパティの深い解説を挟むようなかたちです。<br/> 3部構成になっていて、1部につき1つのサイトを作るので、1冊を通して3つのサイト(のトップページ)を作ることができます。<br/> タイトルの「モ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C0%A5%F3">ダン</a>」の意味合いについては後述します。</p> <h2>どんなサイトが作れるの?</h2> <p>次の3つのサイトを作ります。</p> <ul> <li><a href="http://www.shoeisha.com/book/hp/mcoding/1/">スタンダードレイアウト</a></li> <li><a href="http://www.shoeisha.com/book/hp/mcoding/2/">グリッドレイアウト</a></li> <li><a href="http://www.shoeisha.com/book/hp/mcoding/3/">シングルページレイアウト</a> (レスポンシブで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A5%DB">スマホ</a>対応)</li> </ul> <p>HTML/<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>の本ってサンプルサイトがあるものも多いんですが、入門寄りだとわりとデザインが簡素なサンプルが多くて、デザイナーさんとかはあんまりテンション上がらないんじゃないかなぁ・・・って思ったりしていました。<br/> なのでデザインにはこだわってみました。私自身もきれいなデザインをコーディングするとき一番テンションが上がるので、できるだけ「本物っぽい」デザインをサンプルにしたいと思いました。<br/> かといって見た目にこだわるあまり画像を使いまくると、表現力の高いCSS3の出番がなくなってしまう。<br/> ということで見栄えはしつつも画像は最小限にして<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>での表現を学べるようなかたちにしています。</p> <p>対象ブラウザは<a class="keyword" href="http://d.hatena.ne.jp/keyword/IE9">IE9</a>~11, <a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a>, <a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>, <a class="keyword" href="http://d.hatena.ne.jp/keyword/Safari">Safari</a>です。<br/> そう、IE8は対象外です。<br/> キレッキレのWeb系<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D9%A5%F3%A5%C1%A5%E3%A1%BC">ベンチャー</a>とかはとっくにIE8対応なんてしてないと思いますが、ふつうのWeb制作会社や、大多数の方に見てもらう必要のある公的なサイトはまだまだIE8を切れていないところも多いと思います。<br/> 実際<a class="keyword" href="http://d.hatena.ne.jp/keyword/Flex">Flex</a>なんて夢のまた夢で、未だに角丸すら画像で書き出してるよ・・・って会社さんだってあってもおかしくないです。<br/> しかし!!2016年1月のIE8サポート切れが目前となった今こそ、脱IE8なコーディングを覚えるとき!!<br/> というわけでレガシーブラウザ(IE8以下)を切り捨てたモ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C0%A5%F3">ダン</a>なコーディングを覚えようよ!というのがタイトルの「モ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C0%A5%F3">ダン</a>」の意味するところです。ちょっとレガシーな環境から見たモ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C0%A5%F3">ダン</a>。<br/> 決して「今まさに生まれつつある最新仕様」らへんを意味したモ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C0%A5%F3">ダン</a>ではないので、そのあたりだけお間違えのないよう。<br/> 実際は既に<a class="keyword" href="http://d.hatena.ne.jp/keyword/IE9">IE9</a>/10のシェアも多くないですが、公式のサポートが切れていない以上は大義名分がなくて対象から外せないという状況もたくさんあると思うので、そんな場所でも充分に使っていただければいいなと思って前述の対象ブラウザにしています。</p> <h2>こんな人にオススメ</h2> <ul> <li>HTMLや<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>のコードはなんとなく読めるけれど、自分で書こうとすると固まってしまう</li> <li>Webの記事などで知識をつけてもどう実践したらいいかわからない</li> <li>自分なりにコーディングしているけれど、これが正しいのか不安</li> <li>仕様や理論の説明ばかりの本は飽きがち</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>やCSS3で新しく入った機能を具体例と共に知りたい</li> <li>普段レガシーブラウザ(IE8以下)の対応をしているけれど、そろそろレガシーブラウザ抜きでの効率的なコーディングスキルを身に着けたい</li> <li>かっこいいサイトを作ってみたい</li> </ul> <p>やっぱりコーディングの楽しさは自分の力で何かを形にできることだと思います。でもそこに辿り着くまでは、何がわからないのかもわからないみたいな感じで苦手意識を持ちがちなんですよね。<br/> 本書ではいちから作り上げるフローを1冊で3回も体験できるので、だんだんと「イメージをコードに落としこむ」感覚が掴めていくはずです。</p> <h2>書籍紹介</h2> <p>書籍のカバー袖部分に載っている書籍紹介をご紹介します。</p> <h3>フロントエンドエンジニアから学ぶ 制作現場の実践的なテクニック</h3> <p>本書は、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ書籍です。<br/> 現在主流なWebページのデザインスタイル、「スタンダードレイアウト」「グリッドレイアウト」「シングルページレイアウト」を適用した3つのサイトを作りながら、各スタイルの特徴や使い分け、コーディングテクニックを学びます。<br/> 実際のWeb制作の現場と同様に、サイトのデザインを基にして骨格を見極め、枠組みから中身までひと通りコーディングするというフローをなぞることで、<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>/CSS3の実用的なコーディングスキルやテクニックを無理なく身につけることができます。<br/> 3つのサイトを作成することで、「本格的なレイアウトのサイトを作れた」「こういったレイアウトの場合こうコーディングすればいいという具体的なテクニックがわかった」というような手応えを得やすく、学ぶことへのモチベーションが下がらずに高まる構成にしています。<br/> 駆け出しのフロントエンドエンジニアや、HTML/<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>コーディングに興味はあっても実践の機会がないデザイナー、バックエンドエンジニアなどが、実際にサイトを作ることを通してスキルアップすることを目標とした一冊です。</p> <h2>内容チラ見せ</h2> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20151102/20151102033425.jpg" alt="f:id:yoshiko_pg:20151102033425j:plain" title="f:id:yoshiko_pg:20151102033425j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>↑PART2より。コードを見せてからその内容をテキストと図で解説していきます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20151102/20151102033439.jpg" alt="f:id:yoshiko_pg:20151102033439j:plain" title="f:id:yoshiko_pg:20151102033439j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>↑PART1より。初めて扱う要素やプロパティが出てきたら、ONE POINTで深く掘り下げて知識をつけます。</p> <p>途中の部分を抜き出しましたが、序盤はもうちょっと簡単です。ベーシックなmarginプロパティやbackgroundプロパティなんかもONE POINTで改めて解説しています。</p> <p>こんな感じで進んでいきます。<br/> HTML/<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>にもっと慣れたい!という方や、周りにそんな人がいるなぁという方は是非手にとってみてください!</p> <h2>余談</h2> <p>今年の1月から9月頃まで執筆・校正していました。長いようで今思うとあっという間だった気もします。いやでもやっぱり長かったな・・・オフの時間にひたすらやってました。<br/> 今年のプライベートは8割この本に捧げました。人生で一番頑張ったかもしれない。<br/> 初めて&単著だったこともあり大変ではありましたが、普段業務や趣味でつくっているのは質量のないものなので、こうして物理的な形のあるものをアウトプットできたことはとても良い経験になりました。</p> <p>執筆のきっかけをくださった前職のアシアル株式会社、書籍の編集をしてくださった株式会社<a class="keyword" href="http://d.hatena.ne.jp/keyword/%E6%C6%B1%CB%BC%D2">翔泳社</a>の片岡さん、またレビューを引き受けてくださったみなさま、本当にありがとうございました。感謝しかありません。<br/> あとは買ってくださった方に少しでも初めて得る知識や、ものを作る楽しさを伝えることができればなによりです。</p> <blockquote><p>HTML/<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> コーディングでイメージを形にする力がつけば、そこからできることは無限に広がります。一緒にコーディングを楽しみましょう!<br/> <em>「まえがき」より</em></p></blockquote> <p><a href="http://www.amazon.co.jp/dp/4798141577/">HTML5/CSS3 モダンコーディング - Amazon</a></p> <p>(当記事シェアよろしくおねがいしますーっ!)</p> yoshiko_pg absolute + tableの謎が解けた!!!! hatenablog://entry/6653458415125614405 2015-10-23T22:24:55+09:00 2015-10-23T22:24:55+09:00 一昨日こんな記事を書きました。 yoshiko.hatenablog.jp そして今日「WWW WATCH」さんからこんなアンサーエントリを頂きました。 hyper-text.org ありがとうございます!!!感謝です🙏 エントリの中で、テーブルの視覚整形モデルについての仕様にリンクがはられていました。 その中に答えと思われる仕様の記述を見つけて「なるほど!!」って思ったので書いてみます! Tables in the visual formatting model 日本語訳: 視覚整形モデルにおけるテーブルの扱い この参照すべき仕様の場所が見つけられなかったので教えていただけてとてもありがたい… <p>一昨日こんな記事を書きました。</p> <p><iframe src="http://yoshiko.hatenablog.jp/embed/2015/10/22/014347" title="position: absolute; + display: table;の謎を解きたい - エンジニアをリングする" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://yoshiko.hatenablog.jp/entry/2015/10/22/014347">yoshiko.hatenablog.jp</a></cite></p> <p>そして今日「<a href="https://hyper-text.org/">WWW WATCH</a>」さんからこんなアンサーエントリを頂きました。</p> <p><iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fhyper-text.org%2Farchives%2F2015%2F10%2Fcss_table_height_algorithms.shtml" title="Re: 「position: absolute; + display: table;の謎を解きたい」" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://hyper-text.org/archives/2015/10/css_table_height_algorithms.shtml">hyper-text.org</a></cite></p> <p>ありがとうございます!!!感謝です🙏</p> <p>エントリの中で、テーブルの視覚整形モデルについての仕様にリンクがはられていました。<br/> その中に答えと思われる仕様の記述を見つけて「なるほど!!」って思ったので書いてみます!</p> <p><a href="http://www.w3.org/TR/CSS2/tables.html#model:title">Tables in the visual formatting model</a><br/> 日本語訳: <a href="http://momdo.github.io/css2/tables.html#model">視覚整形モデルにおけるテーブルの扱い</a></p> <p>この参照すべき仕様の場所が見つけられなかったので教えていただけてとてもありがたいです><</p> <p>WWW WATCHさんでは、</p> <blockquote><blockquote><p>「table の 'width' と 'height' にパーセンテージ値が指定された場合は、"table wrapper box" 自身ではなく、"table wrapper box" の包含ブロックを基準にする。」</p></blockquote> <p>となっていますので、display: table; した要素の包含ブロックに高さ指定がなければ height: auto と同じ扱いになるのが仕様ということで、想定された挙動ではないかと思います。</p></blockquote> <p>とありました。</p> <p>たしかにそれは通常フローのheightと同じ動作で、通常はそうなのだと思います。<br/> ただ、その仕様に対する例外が「絶対配置の要素は包含ブロックに高さ指定がなくてもheightを%指定できる」(以降"絶対配置の例外ルール"と呼びます)という仕様なので、通常フローのheightの仕様よりも絶対配置の例外ルールが優先されるように、やっぱりtableでも絶対配置の例外ルールが優先されるのが自然ではないかな?と思いました。</p> <p>で、気になったのが "table wrapper box" です。これは初めて聞きました。 <br/> WWW WATCHさんのエントリの中でも解説がありますが、テーブルは「キャプションボックス」と「テーブ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A5%DC%A5%C3%A5%AF%A5%B9">ルボックス</a>」、そしてその2つを包含する「テーブルラッパーボックス」から成るようです。</p> <p>そして、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BB%C5%CD%CD%BD%F1">仕様書</a>の中のこの1文。</p> <blockquote><p>テーブル要素のプロパティー'position'、'float'、'margin-*'、'top'、'right'、'bottom'、'left'の算出値は、テーブ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A5%DC%A5%C3%A5%AF%A5%B9">ルボックス</a>ではなく、テーブルラッパーボックスで使用される。非継承プロパティーのその他の値は、テーブルラッパーボックスではなく、テーブ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A5%DC%A5%C3%A5%AF%A5%B9">ルボックス</a>で使用される。</p></blockquote> <p>ほう!!! <br/> テーブルに指定した<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>は、プロパティによって適用される要素がわけられるんですね!! <br/> <code>position</code>、<code>float</code>、<code>margin-*</code>、<code>top</code>、<code>right</code>、<code>bottom</code>、<code>left</code>はテーブルラッパーボックスに、それ以外のプロパティはテーブ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A5%DC%A5%C3%A5%AF%A5%B9">ルボックス</a>に適用されると書いてあります。</p> <p>つまり、前述した絶対配置の例外ルールは「positionで絶対配置を指定した要素はheightを%指定できる」でしたが、テーブルにその2つのプロパティを指定した場合には実際に適用される要素がpositionとheightでバラけてしまうんですね。 <br/> positionはテーブルラッパーボックスに適用され、heightはテーブ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A5%DC%A5%C3%A5%AF%A5%B9">ルボックス</a>に適用されていたので、絶対配置になっていないテーブ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A5%DC%A5%C3%A5%AF%A5%B9">ルボックス</a>のheightの%指定は効かないというわけです。</p> <p>ここでまだわかっていないのが、<code>display: table;</code>を指定した要素は「テーブ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A5%DC%A5%C3%A5%AF%A5%B9">ルボックス</a>」になるのか「テーブルラッパーボックス」になるのかというところです。 <br/> もし<code>display: table;</code>を指定した要素が「テーブ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A5%DC%A5%C3%A5%AF%A5%B9">ルボックス</a>」を指すなら、「テーブルラッパーボックス」はその外側に暗黙的に生成される要素ということになるのでしょう。 <br/> 逆に<code>display: table;</code>を指定した要素が「テーブルラッパーボックス」を指すなら、「テーブ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A5%DC%A5%C3%A5%AF%A5%B9">ルボックス</a>」はその中のtbodyなどにあたる要素(無ければ暗黙的に生成される?)になるのでしょう。 <br/> 個人的には前者のほうが理解しやすいです。</p> <p>どちらにしろテーブルラッパーボックスとテーブ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A5%DC%A5%C3%A5%AF%A5%B9">ルボックス</a>は違う要素を指しており、<code>display: table;</code>を指定した要素にpositionとheightを指定するとpositionはテーブルラッパーボックスに適用され、heightはテーブ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A5%DC%A5%C3%A5%AF%A5%B9">ルボックス</a>に適用されるので、合わせ技となる絶対配置の例外ルールは効かないということで自分の中で納得できました。</p> <p>最初の問題提起ブログには書いてなかったのですが、height指定は無しで<code>top: 0;</code>と<code>bottom: 0;</code>を指定した場合にも<code>display: block;</code>なら包含ブロックと同じ高さに伸びるのに<code>display: table;</code>にすると伸びない、という挙動も確認していてこれも謎でした。これも↑の仕様を踏まえると説明がつきますね。 positionとtopとbottomはテーブルラッパーボックスに指定されているので伸びているけど、それ以外のプロパティが適用されるテーブ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A5%DC%A5%C3%A5%AF%A5%B9">ルボックス</a>は伸びないということですね。</p> <p>すっきり!!<br/> インターネットって素晴らしいですね。</p> <p><a href="https://hyper-text.org/">WWW WATCH</a>さん、ありがとうございました!</p> yoshiko_pg position: absolute; + display: table;の謎を解きたい hatenablog://entry/6653458415125405364 2015-10-22T01:43:47+09:00 2015-10-24T04:57:21+09:00 10/23 追記: absolute + tableの謎が解けた!!!! - エンジニアをリングする CSSでちょっと前から悩んでいる挙動があります。 heightプロパティを%指定するときには、包含ブロックにheightの値が指定されている必要がある しかし、絶対配置(positionがabsoluteかfixed)されている要素は包含ブロックにheightの値がなくてもheightを%指定できる。 該当の仕様: Visual formatting model details (緑色のNoteのところ) 仕様日本語:視覚整形モデル詳細 ある要素の高さがcssではなく内包物によって保たれている… <p>10/23 追記: <a href="http://yoshiko.hatenablog.jp/entry/2015/10/23/222455">absolute + table&#x306E;&#x8B0E;&#x304C;&#x89E3;&#x3051;&#x305F;&#xFF01;&#xFF01;&#xFF01;&#xFF01; - &#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3092;&#x30EA;&#x30F3;&#x30B0;&#x3059;&#x308B;</a></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>でちょっと前から悩んでいる挙動があります。</p> <ul> <li>heightプロパティを%指定するときには、包含ブロックにheightの値が指定されている必要がある</li> <li>しかし、絶対配置(positionがabsoluteかfixed)されている要素は包含ブロックにheightの値がなくてもheightを%指定できる。 <ul> <li>該当の仕様: <a href="http://www.w3.org/TR/CSS2/visudet.html#the-height-property">Visual formatting model details</a> (緑色のNoteのところ)</li> <li>仕様日本語:<a href="http://momdo.github.io/css2/visudet.html#the-height-property">&#x8996;&#x899A;&#x6574;&#x5F62;&#x30E2;&#x30C7;&#x30EB;&#x8A73;&#x7D30;</a></li> </ul> </li> </ul> <p>ある要素の高さが<a class="keyword" href="http://d.hatena.ne.jp/keyword/css">css</a>ではなく内包物によって保たれているような場合、その子要素にheightを%指定しようとしてもできなくてautoの扱いになるよ、 でもその子要素がposition: absolute;だったら特別にheightを%指定してもいいよ、親要素(包含ブロック)の内側の高さを基準にして計算してあげるよ、みたいな感じです。</p> <p>実際に挙動をみてみましょう。</p> <iframe width="100%" height="250" src="//jsfiddle.net/maasa/84zubLy5/6/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <p><code>.wrapper</code>(赤)が外側の要素。縦横200px。 その中に<code>.inner</code>(黄)と<code>.spacer</code>(見えない)があります。 <br/> <code>.wrapper</code>の高さが200pxなのは、子となる<code>.spacer</code>のheightに200pxを指定しているためなので、<code>.wrapper</code>にはheightの指定がありません。<br/> この場合、子となる<code>.inner</code>にheight: 50%;を指定しても効きません。<br/> でも、<code>.inner</code>のpositionがabsoluteであれば、height: 50%;が効いて<code>.inner</code>の高さは100pxになります。<br/> 上のfiddleがその状態です。</p> <p>ここまでは仕様通りです。<br/> ではここで<code>.inner</code>のdisplayをblockからtableに変更してみましょう。</p> <iframe width="100%" height="250" src="//jsfiddle.net/maasa/84zubLy5/7/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <p>height効いてないよ!!なんで!!!</p> <p>※ この状態で<code>.wrapper</code>に<code>height: 200px;</code>を指定すると<code>.inner</code>のheightもちゃんと効きます。</p> <p>この挙動の元となる仕様はどこで定義されてるんでしょうか・・・?<br/> どなたかご存知でしたら教えてください><</p> <p>今日<a href="http://tokyo-css-module-specs.connpass.com/event/21413/">CSS仕様書もくもく会</a>に参加してきたので <a href="http://blog.hatena.ne.jp/nxdebiru/">id:nxdebiru</a> さんに質問してみたのですが、検証しているうちにさらに恐ろしいことが・・・</p> <p><blockquote class="twitter-tweet" lang="HASH(0x8574e10)"><p lang="ja" dir="ltr">とりあえず恐ろしい挙動を共有しておきますね <a href="https://t.co/EH1ZoTYR7w">https://t.co/EH1ZoTYR7w</a></p>&mdash; debiru (@debiru) <a href="https://twitter.com/debiru/status/656853210431295489">October 21, 2015</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>謎い!!!!!!!</p> <p>ちなみに<a href="http://tokyo-css-module-specs.connpass.com/">CSS仕様書もくもく会</a>は毎月第三週開催、場所は<a href="http://goodpatch.com/jp">Goodpatch</a>ですので是非!</p> <p><iframe src="//hatenablog-parts.com/embed?url=http%3A%2F%2Ftogetter.com%2Fli%2F889862" title="第二回 W3C CSS Module 仕様書もくもく会@東京 - Color Module Level 3 を読む" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://togetter.com/li/889862">togetter.com</a></cite></p> <p>そして前述の謎挙動(absoluteで効くはずのheightの%指定がtableにすると効かなくなる)、どなたかおしえてくださいっ!!</p> yoshiko_pg Stack Overflow DevDaysに参加してきました hatenablog://entry/6653458415124096444 2015-10-10T16:49:13+09:00 2015-10-10T16:49:13+09:00 10/9(金)に行われたStack Overflow 10月「DevDays」 | Peatixに参加してきました! 平日朝9時半からというマッチョなスケジュールでしたが、いつもお世話になりすぎているStack Overflowのイベントとあって、とても楽しみにしていました。 でもこの平日の日中という開催日時のために、行きたくても行けなかった人も多かったんじゃないかな・・・と。 内容としては最初にジョエル・スポルスキさんのセッションがあったあと、有志によるセッション大会といった感じでした。 それと、お昼のあとには日本で一番ポピュラーな技術情報共有サービスであるQiitaを開発しているIncre… <p>10/9(金)に行われた<a href="http://devdays.peatix.com/">Stack Overflow 10&#x6708;&#x300C;DevDays&#x300D; | Peatix</a>に参加してきました!<br/> 平日朝9時半からというマッチョなスケジュールでしたが、いつもお世話になりすぎている<a href="http://stackoverflow.com/">Stack Overflow</a>のイベントとあって、とても楽しみにしていました。<br/> でもこの平日の日中という開催日時のために、行きたくても行けなかった人も多かったんじゃないかな・・・と。</p> <p>内容としては最初にジョエル・スポルスキさんのセッションがあったあと、有志によるセッション大会といった感じでした。<br/> それと、お昼のあとには日本で一番ポピュラーな技術情報共有サービスである<a href="http://qiita.com/">Qiita</a>を開発している<a href="http://increments.co.jp/">Increments</a>のCEOである海野さん<a href="https://twitter.com/yaotti">@yaotti</a>とジョエルさんが二人で壇上に並んでのQ&amp;Aコーナーもありました。<br/> ジョエルさんの発表もQ&amp;Aもその場でしか聞けない内容でしたが、とても良い内容だったので自分なりに概要をまとめてみます。</p> <h2>大きなオンラインコミュニティを継続的に維持する方法 - Stack Overflow<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BA%C7%B9%E2%B7%D0%B1%C4%C0%D5%C7%A4%BC%D4">最高経営責任者</a> Joel Spolsky <a href="https://twitter.com/spolsky">@spolsky</a></h2> <p>ジョエルさんによる発表。<br/> 大きなオンラインコミュニティである<a class="keyword" href="http://d.hatena.ne.jp/keyword/Wikipedia">Wikipedia</a>の例を挙げながら、大規模なオンラインコミュニティがはらみがちな問題点とStack Overflowの掲げる思想が語られました。</p> <ul> <li>インターネットにテキストボックスを見つけると、人は何を書いてもいいと思ってしまうらしい <ul> <li>一般人に「匿名性」と「観客」が与えられると、一般人は不良になる</li> </ul> </li> <li>そのためにオンラインコミュニティにはルールが必要</li> <li>しかし、ルールが有益に働かない例もある。例えば、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Wikipedia">Wikipedia</a> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Wikipedia">Wikipedia</a>には「確認できる情報」しか載せることができない</li> <li>ある作家が、自分の著作に関した間違った情報が<a class="keyword" href="http://d.hatena.ne.jp/keyword/Wikipedia">Wikipedia</a>に載っているのを見て、内容の修正を申し立てた</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Wikipedia">Wikipedia</a>側からの回答は「No」だった <ul> <li>「著者が著作について一番詳しいということは理解するが、修正の内容が事実であることを確認できるリソースがない」とのこと</li> </ul> </li> <li>これは実に馬鹿らしい</li> <li>「真実」と「確認できる情報」は一部しか重ならない。確認できない真実も多いし、確認できる嘘の情報もまた多い</li> </ul> </li> <li>良いコミュニティを維持するためにルールは必要だが、このようにルールのせいで人が驚いたり納得できないことも起きうる</li> <li>ではStack Overflowが大切にしているルール・思想は何か? <ul> <li>目指しているのは「会話より結果」 <ul> <li>Stack Overflowの代表的な質問は、一人が質問し、数人が答え、数百〜数千人が閲覧する</li> </ul> </li> <li>ポリシーは "We Hate Fun" <ul> <li>Stack Overflowはソーシャルコミュニティではなく、掲示板でもなく、談笑する場所でもなく、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%ED%A5%B0%A5%E9%A5%DE%A1%BC">プログラマー</a>のリソースとなるべき場所である</li> <li>"厳しさ"やドライな雰囲気が感じられるとしたら狙い通り</li> </ul> </li> </ul> </li> <li>良いコミュニティを維持するためには良くないものを取り除く必要がある</li> <li>しかし、殺伐としすぎていると、将来コミュニティに貢献してくれそうな有望な人が一度の失敗でコミュニティから離れてしまうことにも繋がる <ul> <li>その対策のひとつとして、良くない質問につけるタグの表現を変更した <ul> <li><code>Closed</code>→<code>On Hold</code>(<code>終了</code>→<code>編集待ち</code>)</li> <li><code>Too localized</code>→<code>Off topic</code>(<code>局所的すぎる質問</code>→<code>トピック外の質問</code>)</li> <li><code>Not constructive</code>→<code>Primary opinion-based</code>(<code>建設的でない質問</code>→<code>主観的な意見の質問</code>)</li> <li><code>Not a real question</code>→<code>Unclear what you're asking</code>(<code>質問ではない</code>→<code>質問したい内容が明瞭でない</code>)</li> </ul> </li> <li>これには絶大な効果があって、タグ付けされた質問の再編集率が2倍以上になり、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%EA%C9%BC%CE%A8">投票率</a>も増した</li> <li>言葉遣いは大切である <ul> <li>できるかぎりポジティブで、見た人がどう行動すればいいのかわかる言葉を使うこと</li> </ul> </li> </ul> </li> <li>良いコミュニティを維持するために、適切な説明や言葉でルールを伝えていく</li> </ul> <h2>Stack Overflow &amp; QiitaのCEOにQ&amp;Aタイム</h2> <p>※ 記憶が曖昧な部分は<a href="http://togetter.com/li/884407">togetter</a>のツイートを参考にさせていただきました</p> <h3>Q. ユーザーのフォローやDMなどの<a class="keyword" href="http://d.hatena.ne.jp/keyword/SNS">SNS</a>的機能について自分のサービスにおいてはどういった考えを持っているか?</h3> <h4>Stack Overflow(ジョエルさん)</h4> <p>Stack Overflowが大切にしているのは「会話より結果」なので、質問の投稿者や回答者が誰なのか?といったことは重要ではない。<br/> そのため意図的にアンチソーシャルな厳しい作りにしている。<br/> 当時新しいサービスとして盛り上がっていた<a class="keyword" href="http://d.hatena.ne.jp/keyword/Facebook">Facebook</a>とは逆の方向に進みたかった。</p> <h4>Qiita(海野さん)</h4> <p>QiitaはStack Overflowと違って「質問→回答」という形式ではないので、投稿された記事を求めている人に届けるためにフォローなどの<a class="keyword" href="http://d.hatena.ne.jp/keyword/SNS">SNS</a>的な要素を利用している。</p> <h3>Q. サービス開設〜ユーザーが集まってサービスが回り出すまでの間、どうやってユーザーを集め根付かせたか?</h3> <h4>Stack Overflow(ジョエルさん)</h4> <p>Stack Overflowを開設したのは2008年だが、その時には2000年から個人でやっていたブログが一日に3万ビューほどあるぐらいに読者がとても多かった。<br/> なので2008年のStack Overflow開設時には当日だけで3万人の利用者が集まり、1週間で9万人〜12万人の利用者に達した。</p> <h4>Qiita(海野さん)</h4> <p>自分の周りの技術者が使ってくれたのと、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%CF%A4%C6%A4%CA%A5%D6%A5%C3%A5%AF%A5%DE%A1%BC%A5%AF">はてなブックマーク</a>や<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>などで広まっていった。<br/> ある程度記事が集まると徐々に<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a>検索でも引っかかるようになってきて、認知度が上がっていった。</p> <h3>Q. 自分のサービスに対して何か印象的なエピソードはありますか?</h3> <h4>Stack Overflow(ジョエルさん)</h4> <p>Stack Overflowを公開したすぐあとに、文中のURLをリンクにする改善をしようとしたら<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C0%B5%B5%AC%C9%BD%B8%BD">正規表現</a>でのマッチングがうまくいかず、Stack Overflowに自分で質問を投稿してみた。<br/> 答えを得るまでには時間がかかるだろうと思ったら、同じ質問が既にあるよとサジェストされた上、そこに適切な答えも投稿されていて、公開当初からサービスが有用に機能していることに感動した。</p> <h4>Qiita(海野さん)</h4> <p>バグによってQiitaのサーバーを落としてしまったとき、解決策を検索したら検索結果一覧にQiitaの記事が見つかったので見ようとしたらサーバーが落ちていて見られなかった(会場笑)<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a>のキャッシュで見ることができ、解決できた。</p> <h3>Q. Down voteの機能について</h3> <h4>Stack Overflow(ジョエルさん)</h4> <p>Stack Overflowが大切にしているのは「真実」なので、そのためにDown voteは必要。<br/> ただそれによってユーザーが傷つくこともあるので、気持ちは大切にしてほしい</p> <h4>Qiita(海野さん)</h4> <p>(※QiitaにはDown voteの機能がない)<br/> 善意で投稿された記事に対してネガティブなリアクションをさせる機能はとてもセンシティブな問題だと考えている。<br/> かわりに編集リクエストの機能でコンテンツの良さを保とうとしている。ただ、(Down voteのような機能も)検討はしている。</p> <h3>Q. 類似サービスと比較しての強みはどこだと思いますか?</h3> <h4>Stack Overflow(ジョエルさん)</h4> <p>ユーザー数。Stack Overflowに投稿するのが一番多くのユーザーに見られ、一番多くの回答がつく。</p> <h4>Qiita(海野さん)</h4> <p>ジョエルさんの回答と同じ。<br/> Qiitaでは記事投稿のためのデスクトップアプリの提供や<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>の公開など、記事を共有してもらう施策に取り組んでいる。</p> <h3>Q. サービスに対するユーザーからのフィードバックをどう受け止めていますか?</h3> <h4>Stack Overflow(ジョエルさん)</h4> <p>すべてのフィードバックに感謝するが、すべてのフィードバックを採用するわけではない。<br/> すべての意見に共感して取り入れてしまえば、インターネットはトイレに落ちた猫の写真だらけになる(←米国ではこの写真が人気?)</p> <h4>Qiita(海野さん)</h4> <p>毎月ユーザーミートアップを開催するなど、ユーザーの意見を吸い上げられる取り組みを行なっている。<br/> ただ、たとえばユーザーから「こういう機能がほしい」というフィードバックがあったときは、「その機能を実装すべきか?」よりも「その機能によって、ユーザーはどんな問題を解決したいのか?」を考え、「その問題に対する最適解は何か?」という視点で考えなおしている</p> <hr> <p>以上です。</p> <p><blockquote class="twitter-tweet" lang="ja"><p lang="zh" dir="ltr">日米2大巨頭 <a href="https://twitter.com/hashtag/devdays?src=hash">#devdays</a> <a href="http://t.co/5Sggo8moEF">pic.twitter.com/5Sggo8moEF</a></p>&mdash; sho otani (@ozu_syo) <a href="https://twitter.com/ozu_syo/status/652346329755074560">2015, 10月 9</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>個人的にはStack Overflowがここまでコンセプトを尖らせ、「厳しさ」を意識して作られたサービスだとは知らなかったので衝撃でした。<br/> そこまでしてはじめて、純度の高いあの価値ができあがるんですね。<br/> ジョエルさんのセッションの中で語られていた、Stack Overflowが掲げるこのポリシーにしびれました。</p> <p><blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">&quot;We Hate Fun&quot;&#10;stackoverflowはソーシャルコミュニティではなく、掲示板でもなく、談笑する場所でもなく、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%ED%A5%B0%A5%E9%A5%DE%A1%BC">プログラマー</a>のリソースとなるべき場所である</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/652290917269790720">2015, 10月 9</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>他のセッションも面白かったです。長くなってしまうので資料へリンクだけさせていただきます。</p> <h2>その他のセッションのスライド</h2> <p><a href="http://www.slideshare.net/okdt/dev-days-2015-tokyo-riotaro-okada">&#x30D3;&#x30EB;&#x30C8;&#x30A4;&#x30F3;&#x30FB;&#x30BB;&#x30AD;&#x30E5;&#x30EA;&#x30C6;&#x30A3;&#x306E;&#x30B9;&#x30B9;&#x30E1; Dev Days 2015 Tokyo - Riotaro OKADA</a> by <a href="https://twitter.com/okdt">@okdt</a><br/> プロダクトのセキュリティについてや、必要なセキュリティをレベル分けしたOWASP ASVSという指標について。</p> <p><a href="https://speakerdeck.com/onigra/toaruye-wu-operesiyonzi-dong-hua-falsehua">&#x3068;&#x3042;&#x308B;&#x696D;&#x52D9;&#x30AA;&#x30DA;&#x30EC;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x81EA;&#x52D5;&#x5316;&#x306E;&#x8A71; // Speaker Deck</a> by <a href="https://twitter.com/onigra_">@onigra_</a><br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a>で業務を自動化した具体的なノウハウのお話。</p> <p><a href="https://speakerdeck.com/kenchan/1-year-retrospective-how-to-increase-developer-productivity">1 Year Retrospective: how to increase developer productivity // Speaker Deck</a> by <a href="https://twitter.com/kenchan">@kenchan</a><br/> チームビルディングやプロジェクトマネジメントについてのお話。</p> <p><a href="https://docs.google.com/presentation/d/1ItwsckjFuPwvkakogdrEN8v18sS6uMKZbV-jWAr4yWI/edit#slide=id.p">3D Printer as a welfare program - Google &#x30B9;&#x30E9;&#x30A4;&#x30C9;</a> by <a href="https://twitter.com/technohippy">@technohippy</a><br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/3D%A5%D7%A5%EA%A5%F3%A5%BF">3Dプリンタ</a>の種類や、<a class="keyword" href="http://d.hatena.ne.jp/keyword/3D%A5%D7%A5%EA%A5%F3%A5%BF">3Dプリンタ</a>が会社にあることで得られる恩恵などw</p> <p><a href="http://www.slideshare.net/storywriterjp/uxrunning-lean-lean-customer-development2015109-stack-overflow-devdays">UX&#x5C02;&#x9580;&#x5BB6;&#x304B;&#x3089;&#x898B;&#x305F;&#x300C;Running Lean&#x300D;&#x306E;&#x6539;&#x5584;&#x30DD;&#x30A4;&#x30F3;&#x30C8; &#x301C;&#x300C;Lean Customer Development&#x300D;&#x3068;&#x8AAD;&#x307F;&#x6BD4;&#x3079;&#x301C;&#xFF1A;201&hellip;</a> by <a href="https://twitter.com/storywriter">@storywriter</a><br/> 「実践<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A1%BC%A5%F3%A5%B9%A5%BF%A1%BC%A5%C8%A5%A2%A5%C3%A5%D7">リーンスタートアップ</a>」と「リーン顧客開発」の差分、主にユーザーヒアリングの具体的なポイントについて。</p> <p><a href="https://speakerdeck.com/androhi/enziniafalsetamefalsesketch3ru-men">&#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x306E;&#x305F;&#x3081;&#x306E;Sketch3&#x5165;&#x9580; // Speaker Deck</a> by <a href="https://twitter.com/androhi">@androhi</a><br/> Sketch3の紹介と実際にZaimのロゴをSketchで作る様子のデモ。</p> <p>エンジニアにとって欠かせないインフラとなっているStack Overflow<br/> ↑こちら、スライド公開されていましたら教えていただければと思います><<br/> Stack Overflowの統計・研究についてのお話で、興味深いグラフなどとても面白かったです。<br/> <blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">stackoverflowに駆逐されゆく<a class="keyword" href="http://d.hatena.ne.jp/keyword/R%B8%C0%B8%EC">R言語</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A1%BC%A5%EA%A5%F3%A5%B0%A5%EA%A5%B9%A5%C8">メーリングリスト</a>&#10;このグラフの上がり方すごいな…(オレンジがstackoverflow) <a href="https://twitter.com/hashtag/devdays?src=hash">#devdays</a> <a href="http://t.co/wAVZgbndh3">pic.twitter.com/wAVZgbndh3</a></p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/652382793062739968">2015, 10月 9</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p><a href="https://speakerdeck.com/besutome/meteordetukuru3fen-jian-purototaipingu">Meteor&#x3067;&#x3064;&#x304F;&#x308B;3&#x5206;&#x9593;&#x30D7;&#x30ED;&#x30C8;&#x30BF;&#x30A4;&#x30D4;&#x30F3;&#x30B0; // Speaker Deck</a> by <a href="https://twitter.com/besutome">@besutome</a><br/> Meteorについて。実際に3分でサイトをデプロイするデモでした。速い・・・</p> <p>リアルタイムに映像を繋いで広げるデモ(スライドなし)<br/> <blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">「他の方が<a class="keyword" href="http://d.hatena.ne.jp/keyword/MacBook">MacBook</a>とか使われてる中ちょっと異質ですが…」 <a href="https://twitter.com/hashtag/devdays?src=hash">#devdays</a> <a href="http://t.co/KJCKsQeEUb">pic.twitter.com/KJCKsQeEUb</a></p>&mdash; 唸る人 (@unarist) <a href="https://twitter.com/unarist/status/652386467197521921">2015, 10月 9</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script><br/> <blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">3台のカメラの映像をリアルタイムに1つに合成してパノラマみたいにしてる!すごい! <a href="https://twitter.com/hashtag/devdays?src=hash">#devdays</a></p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/652387689820360704">2015, 10月 9</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/CoffeeScript">CoffeeScript</a>でパケットアナライザーを作る<br/> ↑こちら、スライド公開されていましたら教えていただければと思います><<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/CoffeeScript">CoffeeScript</a>とElectronでリアルタイムにパケットを表示してました。かっこよかった。<br/> <blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">デモ&#10;パケットマニア垂涎な感じですね <a href="https://twitter.com/hashtag/devdays?src=hash">#devdays</a> <a href="http://t.co/hR9YDmyemd">pic.twitter.com/hR9YDmyemd</a></p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/652391374008877056">2015, 10月 9</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p><a href="http://www.slideshare.net/kanbara/stack-overflow-dev-days-2015android-60-marshmallow-app-permissions">[Stack Overflow Dev Days 2015]Android 6.0 Marshmallow App Permissions&hellip;</a> by <a href="https://twitter.com/korodroid">@korodroid</a><br/> Android6.0から変わった<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D1%A1%BC%A5%DF%A5%C3%A5%B7%A5%E7%A5%F3">パーミッション</a>の仕様について。</p> <p><a href="http://www.slideshare.net/watura1/zaim-500">Zaim 500&#x4E07;&#x30E6;&#x30FC;&#x30B5;&#x3099;&#x306B;&#x5411;&#x3051;&#x3066;</a> by <a href="https://twitter.com/watura">@watura</a><br/> 容量が膨れ上がってしまったデータベースをシャーディング(分割)したときのエピソードとノウハウ。</p> <hr> <p>こんな感じでした!<br/> ツイートのまとめはこちら。 <a href="http://togetter.com/li/884407">Stack Overflow DevDays - Togetter&#x307E;&#x3068;&#x3081;</a></p> <p>最初に募集ページのタイムテーブルを見た時は、やたらいろんな話題のセッションが散らばってるなーと思ったのですが、実際に聞いてみるとどれも質の良いお話でとても楽しかったです。(途中で抜けて会社戻ろうかと思ってたけど、結局最後までいてしまった)</p> <p>あとお弁当とか</p> <p><blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">おべんとうの豪華さよ <a href="http://t.co/chea1wZd4t">pic.twitter.com/chea1wZd4t</a></p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/652318499000315904">2015, 10月 9</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>無限コーヒー・お菓子とか</p> <p><blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">食べ放題。カップケーキがすごいうまい <a href="https://twitter.com/hashtag/devdays?src=hash">#devdays</a> <a href="http://t.co/WdqQxmKbKB">pic.twitter.com/WdqQxmKbKB</a></p>&mdash; ANDO Yasushi (@technohippy) <a href="https://twitter.com/technohippy/status/652371585723043840">2015, 10月 9</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>参加記念のTシャツとか</p> <p><blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">このTシャツ、“わかっている生地”だ、最高 <a href="http://t.co/OAU6PqpifY">pic.twitter.com/OAU6PqpifY</a></p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/652296429793185792">2015, 10月 9</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>この辺りもとても充実していて、参加無料なのに大丈夫なのかな・・・?って思いつつ、かなりエンジョイしてしまいました。</p> <p>Stack Overflowのみなさま、素敵なイベントをありがとうございました!!<br/> 参加したかった日本のエンジニアがまだまだいたと思うので、次回開催も楽しみにしています><</p> <p>それと、業務扱いで勉強会に参加させてくれた会社にも感謝です( ´ ▽ ` ) ありがとうございました!</p> <p><blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">Goodpatchは公式的に業務時間中の勉強会参加がOKなので堂々と朝からstackoverflowのイベントに来れるってわけよ(他にも4人ぐらいきてる)&#10;<a href="https://t.co/yHvb8FvUBy">https://t.co/yHvb8FvUBy</a></p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/652310077269913600">2015, 10月 9</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> yoshiko_pg 転職報告と近況もろもろ hatenablog://entry/6653458415120064913 2015-09-04T09:05:06+09:00 2015-09-04T09:05:06+09:00 めーっちゃ久しぶりにブログです。 最近いろんなことがあってわたわたしていたのですが、まとまった報告ってどこでもしていなかったので、近況でも書いてみようかと。 転職してました 6/1からGoodpatchで働いています。自社サービスのプロトタイピングツールProttのフロントエンドを担当しています。 Prottはサーバー側がRuby(Rails)、フロントがAngularでjade+sass+coffeeという感じの構成で、簡潔に書けてイイ感じ。 今までは受託が多かったので自社サービスに関わるのは初めてなのですが、とてもたのしいです。 きちんとデザインされたプロダクトをさわるとテンション上がりま… <p>めーっちゃ久しぶりにブログです。<br/> 最近いろんなことがあってわたわたしていたのですが、まとまった報告ってどこでもしていなかったので、近況でも書いてみようかと。</p> <h2>転職してました</h2> <p>6/1から<a href="http://goodpatch.com/jp">Goodpatch</a>で働いています。自社サービスのプロトタイピング<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C4%A1%BC%A5%EB">ツール</a><a href="https://prottapp.com/ja/">Prott</a>のフロントエンドを担当しています。<br/> Prottはサーバー側が<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a>(<a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a>)、フロントがAngularでjade+sass+coffeeという感じの構成で、簡潔に書けてイイ感じ。<br/> 今までは受託が多かったので自社サービスに関わるのは初めてなのですが、とてもたのしいです。 <br/> きちんとデザインされたプロダクトをさわるとテンション上がりますよね。</p> <p>GoodpatchはUIデザインの会社と認知されてますが実はデザイナーよりエンジニアのほうが人数が多くて、社内でエンジニアリングもがっつりやっています。<br/> ただ共通点はエンジニアだろーがPMだろーがみんなデザインが好きってことで、カッコいいものが好きです。そしてわたしもカッコいいものが好き。<br/> だから作るプロダクトのデザインに妥協しない環境にいられることはとても満足感があります。<br/> そのへんもGoodpatchを選んだ理由のひとつです。</p> <p>あとチームの雰囲気もすごくよかったり就業環境も恵まれているのですが、そのへんは後述の記事で。</p> <h2>CodeIQに載りました</h2> <p>先日インタビューが載りました。(ありがとうございます!)</p> <p><blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">CodeIQ MAGAZINEさんで取り上げていただきました!うれしはずかし。&#10;Goodpatchの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AE%A1%BC%A5%AF">ギーク</a>ガール☆趣味はプログラミング!だから、仕事外でもアウトプットしていたい|CodeIQ MAGAZINE <a href="https://t.co/DAdOG7YJPM">https://t.co/DAdOG7YJPM</a> <a href="https://twitter.com/codeiq">@codeiq</a>さんから</p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/636373736678027265">2015, 8月 26</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>今までの経歴と、Goodpatch/Prottチームでの働き方あたりを話してます。<br/> CodeIQは好きなサービスで昔よく問題解いてたしCodeIQ MAGAZINEもみてたので、そこに自分が載るって不思議で嬉しいです。 <br/> 見たよーって言ってもらえることも多くて、うれしはずかし。ありがとうございます><</p> <h2>HTML/<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>本を出します</h2> <p>前述の記事の最後でちらっと触れてるんですが、11月上旬に書籍が出ます。<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>/CSS3のコーディングの本です。はじめての執筆・・・!</p> <ul> <li>HTMLと<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>の文法とかはある程度知っているけど普段の自分のコーディングに自信がない</li> <li>修正とかはできるけどデザインをいちからコードにおこそうとすると戸惑う</li> <li>今まで<a class="keyword" href="http://d.hatena.ne.jp/keyword/IE7">IE7</a>~8対応のコーディングをしていて、そろそろ脱IE8なコーディングがしたい</li> <li>フロントエンドエンジニアがHTML/<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>コーディングするところを隣で見たい!って思ったことがある</li> </ul> <p>上記のようなかたを対象にした本で、実際にサイトデザイン画像からコーディングする流れをハンズオン形式で解説しつつ、要所要所でプロパティや要素について掘り下げて解説するみたいな感じの実践ベースなので、結構楽しく進められるんじゃないかなと思っています。<br/> やっててテンション上がるように、サンプルサイトのデザインにもこだわりました!</p> <p>今年ずっと地道にこれの執筆をしていて、やっと11/2に発売予定です><(そして最後の追い込みで今月が炎上気味)<br/> 単著なので孤独な戦いですが、レビュアーさんがたのフィードバックに励まされてなんとかここまでこれました(;_;)<br/> 圧倒的感謝。<br/> 書籍のことはまた表紙とかFixしたら改めてご報告したいとおもいますー。</p> <p>しっっっかし文章書くのって大変ですね・・・!!<br/> 本書いてごはん食べてる方をほんとうに尊敬しました・・・<br/> わたしはコードを書いてごはん食べていくぞ・・・という決意を新たにしました。</p> <h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>の勉強会でLTしました</h2> <p>8/30にあった<a href="http://peatix.com/event/105960">Back to Basics</a>という<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>勉強会でLTしました。<br/> このイベントがとにかくめっちゃくちゃよくて・・・!!<br/> 企画された酒井さん久保さん本当にありがとうございましたという感じです。とにかくセッションの情報の質が高い。<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>好きな方は私のスライドはいいので他の方々のスライドみてください。一番目から順番に・・・!!</p> <p>参加レポートブログ:<a href="http://mtdew2.com/back-to-basics-css/">Back to Basics CSSの感想と自分用まとめ(とありがたきスライド)</a><br/> 振り返りスライド:<a href="http://www.slideshare.net/eijisekiya/qaback-to-basics-css-20150830">Q&Aで振り返る「Back to Basics」 CSS </a></p> <p>どちらも素敵なまとめなのでぜひ。スライドのリンクも全部あります。<br/> あの日参加して、もっと<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>の仕様ちゃんと読もうと心に決めた。</p> <p>ちなみに私のスライドはこれでした(めっちゃ小ネタ)<br/> <a href="http://yoshiko-pg.github.io/slides/20150830-backtobasics/">CSSで固定比率レイアウト</a></p> <h2>React.js meetup #2 開催します</h2> <p>以前、百何十人の募集が数分で埋まったReact.js meetupというイベントがあったのですが、 <br/> いろいろないきさつがありまして、それの第二回の準備をkoba04さんと一緒に進めています!</p> <p><a href="http://eventdots.jp/event/568979">React.js meetup #2</a></p> <p>9/8(火) 19時からですー。 <br/> 今週水曜日に公開したのですが、17分で180人埋まりました>< <br/> みんなReact好きね。。</p> <p>わたしはイベントの企画初めてなんですが、いきなりおっきいイベントなのでわくわくハラハラなかんじです。<br/> 募集開始した瞬間に待機勢が一斉にアクセスしてdotsが激重になったときはびびりましたね<br/> 当日うまくいきますようにー!</p> <p>〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜</p> <p>こんなとこですかねー・・・<br/> とにかく今年は執筆でいっぱいいっぱいで、全然なにも作れてないので最近欲求不満気味です。。<br/> 原稿まわりが落ち着いたらなんかつくりたい!!</p> <p>と、いうわけで近況でした!</p> <p> </p> <p>あとおまけ</p> <h2>ハム速載りました</h2> <p><blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">オフィスの空気清浄機あけたら衝撃の事実 <a href="http://t.co/XQKFoYxEEk">pic.twitter.com/XQKFoYxEEk</a></p>&mdash; よしこ (@yoshiko_pg) <a href="https://twitter.com/yoshiko_pg/status/634538976217550848">2015, 8月 21</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <p>↓</p> <p><iframe src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fhamusoku.com%2Farchives%2F8940373.html" title="空気清浄機掃除しようと思って開けてこんなだったらヤバいwwwwwwww : ハムスター速報" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"><a href="http://hamusoku.com/archives/8940373.html">空気清浄機掃除しようと思って開けてこんなだったらヤバいwwwwwwww : ハムスター速報</a></iframe><cite class="hatena-citation"><a href="http://hamusoku.com/archives/8940373.html">hamusoku.com</a></cite></p> <p>\(^o^)/</p> yoshiko_pg ES6入門のセッションした話&Talkie.js超オススメ hatenablog://entry/8454420450092659224 2015-04-25T21:33:48+09:00 2015-04-25T21:33:48+09:00 今日開催された春のJavaScript祭でES6入門の話をしてきました! スライド資料は以下です。 HELLO, ES6 ~これから迎えるJSのミライ~ ES6入門な感じで、以下のようなことをざっくり話しました。 ES6って何 何が変わるの 新しい構文の紹介 新しい機能の紹介 どうやったら使えるの まずはちょっと試したい人へ プロダクトのコードに使いたい人へ テストだけES6で書いて慣れたい人へ ちょっと駆け足でしたが、内容はスライドに全部書いてあるので、見てもらえれば思い出せると思います。 スライド、さっそくはてブがついててうれしい(^ω^) 会場の100人超のほか、生放送してたschoo経… <p>今日開催された<a href="https://javascript-fes.doorkeeper.jp/events/22834">春のJavaScript祭</a>でES6入門の話をしてきました!<br/> スライド資料は以下です。</p> <p><a href="http://yoshiko-pg.github.io/slides/20150425-jsfes/">HELLO, ES6 ~これから迎えるJSのミライ~</a></p> <p>ES6入門な感じで、以下のようなことをざっくり話しました。</p> <ul> <li>ES6って何</li> <li>何が変わるの <ul> <li>新しい構文の紹介</li> <li>新しい機能の紹介</li> </ul> </li> <li>どうやったら使えるの <ul> <li>まずはちょっと試したい人へ</li> <li>プロダクトのコードに使いたい人へ</li> <li>テストだけES6で書いて慣れたい人へ</li> </ul> </li> </ul> <p>ちょっと駆け足でしたが、内容はスライドに全部書いてあるので、見てもらえれば思い出せると思います。 <br/> スライド、さっそく<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%CF%A4%C6%A5%D6">はてブ</a>がついててうれしい(^ω^)</p> <p>会場の100人超のほか、生放送してたschoo経由でも見てくださった方もいたようで、ありがとうございます! <br/> LT含め人前で話すのが初めてだったので緊張しました><<br/> でも楽しかったので、これからも機会があれば喋るの挑戦したいなーと思います!<br/> JSオジサンとか出たい・・・!</p> <h3>一番言いたいこと</h3> <p>↑のスライド、<a href="https://github.com/ahomu/Talkie">Talkie</a>というスライドライブラリで作ったのですが、<strong>マジ便利</strong>ということを声を大にして言いたいです!!!!<br/> TalkieはMarkdownで書けるHTMLベースのスライドライブラリなのですが、今回のスライド、テキストベースじゃなくて<a class="keyword" href="http://d.hatena.ne.jp/keyword/KeyNote">KeyNote</a>とかの<a class="keyword" href="http://d.hatena.ne.jp/keyword/GUI">GUI</a>ベースで作ってたら5倍ぐらい時間かかってたと思います。。。</p> <p>サンプルがてら、スライドの1〜4ページまでのコードはというと・・・</p> <pre class="code lang-html" data-lang="html" data-unlink><span class="synIdentifier">&lt;</span><span class="synStatement">script</span><span class="synIdentifier"> layout=</span><span class="synConstant">&quot;cover&quot;</span><span class="synIdentifier"> invert </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">&quot;text/x-markdown&quot;</span> <span class="synIdentifier"> backface=</span><span class="synConstant">&quot;image/sai.jpg&quot;</span><span class="synIdentifier"> backface-filter=</span><span class="synConstant">&quot;brightness(.4)&quot;</span><span class="synIdentifier">&gt;</span> # Hello, ES6 ## ~これから迎えるJSのミライ~ 2015.4.25 [@yoshiko-pg](http://yoshiko-pg.github.io) <span class="synIdentifier">&lt;/</span><span class="synStatement">script</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">script</span><span class="synIdentifier"> layout </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">&quot;text/x-markdown&quot;</span><span class="synIdentifier">&gt;</span> <span class="synSpecial"># 突然ですが</span> <span class="synSpecial">## JavaScript読めますか?</span> <span class="synIdentifier">&lt;/</span><span class="synStatement">script</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">script</span><span class="synIdentifier"> layout invert </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">&quot;text/x-markdown&quot;</span> <span class="synIdentifier"> backface=</span><span class="synConstant">&quot;image/koara1.jpg&quot;</span><span class="synIdentifier"> backface-filter=</span><span class="synConstant">&quot;blur(1px) brightness(.6)&quot;</span><span class="synIdentifier">&gt;</span> # 余裕? <span class="synIdentifier">&lt;/</span><span class="synStatement">script</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">script</span><span class="synIdentifier"> layout=</span><span class="synConstant">&quot;code&quot;</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">&quot;text/x-markdown&quot;</span><span class="synIdentifier">&gt;</span> <span class="synSpecial">## このコード読めますか?</span> <span class="synIdentifier">\</span><span class="synSpecial">```javascript</span> <span class="synIdentifier">function</span><span class="synSpecial"> sum </span>(<span class="synSpecial">...nums</span>)<span class="synSpecial"> </span><span class="synIdentifier">{</span> <span class="synSpecial"> </span><span class="synStatement">return</span><span class="synSpecial"> nums.reduce</span>((<span class="synSpecial">a, b</span>)<span class="synSpecial"> =&gt; a + b</span>) <span class="synIdentifier">}</span> <span class="synSpecial">console.log</span>(<span class="synSpecial">sum</span>(1<span class="synSpecial">,</span>2<span class="synSpecial">,</span>3<span class="synSpecial">,</span>4))<span class="synSpecial">; </span><span class="synComment">// 10</span> <span class="synIdentifier">function</span><span class="synSpecial"> hi </span>(<span class="synSpecial">name = </span><span class="synConstant">'Bob'</span>)<span class="synSpecial"> </span><span class="synIdentifier">{</span> <span class="synSpecial"> console.log</span>(<span class="synSpecial">`Hi, my name is $</span><span class="synIdentifier">{</span><span class="synSpecial">name</span><span class="synIdentifier">}</span><span class="synSpecial">`</span>)<span class="synSpecial">;</span> <span class="synIdentifier">}</span> <span class="synSpecial">hi</span>(<span class="synConstant">'Tom'</span>)<span class="synSpecial">; </span><span class="synComment">// Hi, my name is Tom</span> <span class="synSpecial">hi</span>()<span class="synSpecial">; </span><span class="synComment">// Hi, my name is Bob</span> <span class="synIdentifier">\</span><span class="synSpecial">```</span> <span class="synIdentifier">&lt;/</span><span class="synStatement">script</span><span class="synIdentifier">&gt;</span> </pre> <p>こんな感じです。<br/> 背景に画像敷くのも、ぼかすのも暗くするのも、script要素の属性ひとつで超簡単!!!<br/> コードの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%F3%A5%BF%A5%C3%A5%AF%A5%B9">シンタックス</a>ハイライトも、Highlight.jsを読み込んでおけば勝手にやってくれるので超簡単!!!<br/> (Highlight.jsはES6の構文対応してないので今回のサンプルコードは微妙に色がバグってますが)</p> <p>スライドの公開もGitHubPagesに上げればPCからも<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A5%DB">スマホ</a>からも見れるし。<br/> 発表時の最大化も<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DD%A5%A4%A5%F3%A5%BF%A1%BC">ポインター</a>の表示もキーひとつで超簡単!!!<br/> あと外部Webページ紹介したい時もiframeで埋め込めるし・・・もちろんリンクもできるし・・・</p> <p>便利すぎてスライド作るの楽しかったです。<br/> 作者のahomuさん尊敬しました。<br/> 私もこういうライブラリ作れるようになりたいですねー・・・</p> <p>ロジックには<a href="https://baconjs.github.io/">Bacon.js</a>が使われていて、そこがこのライブラリに興味持ったきっかけでもあったので、実装も読もうと思います。</p> <p>使い方は<a href="http://ahomu.github.io/Talkie/">http://ahomu.github.io/Talkie/</a>が説明兼実際に動くサンプルになっているのでスライドとその<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>見た感じでわかると思います。</p> <p>いやーすばらしい</p> <h3>結論</h3> <p><a href="http://yoshiko-pg.github.io/slides/20150425-jsfes/">ES6胸熱</a><br/> Talkie++</p> yoshiko_pg AngularJSで改行を含むテキストを超簡単にng-bindする hatenablog://entry/8454420450085604896 2015-02-26T21:30:36+09:00 2015-02-26T21:30:36+09:00 AngularJSのデータバインディング便利ですが、ng-bindで複数行のテキストを表示しようとすると途端に面倒になるんですよね。。 そのままじゃHTML上では改行されないので<br>に変換する必要があって、それはfilterとかで簡単にできるのですが、それをタグとして認識させるには$sce.trustAsHtmlしないといけなくて。。 でもユーザー入力の文字列をHTMLとして画面に表示することを許可してしまうのは危険すぎる。。 br以外のタグはエスケープするにしても、たかが改行表示するだけでそこまでするのはやーーだーー。。 とまあそんな感じだったんですが、この間すごいことに気付いてしまいま… <p>AngularJSのデータ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%A4%A5%F3%A5%C7%A5%A3%A5%F3%A5%B0">バインディング</a>便利ですが、ng-bindで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%A3%BF%F4">複数</a>行のテキストを表示しようとすると途端に面倒になるんですよね。。<br/> そのままじゃHTML上では改行されないので&lt;br&gt;に変換する必要があって、それはfilterとかで簡単にできるのですが、それをタグとして認識させるには$<a class="keyword" href="http://d.hatena.ne.jp/keyword/sce">sce</a>.trustAsHtmlしないといけなくて。。<br/> でもユーザー入力の文字列をHTMLとして画面に表示することを許可してしまうのは危険すぎる。。<br/> br以外のタグはエスケープするにしても、たかが改行表示するだけでそこまでするのはやーーだーー。。</p> <p>とまあそんな感じだったんですが、この間すごいことに気付いてしまいました。</p> <iframe width="100%" height="480" src="//jsfiddle.net/4txm11g3/6/embedded/result,html,css,js/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <p> </p> <p>アッ・・・<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>だけでできた・・・・・</p> <p> </p> <p>ちなみに、white-space: pre; でも改行は反映されますが、右端に達したときの自動の折り返しはないので行が長い場合にテキストがはみ出てしまいます。<br/> あとwhite-space: pre-wrap; というのもあり、こちらでもテキスト中の改行の反映と自動折り返しをしてくれます。<br/> pre-lineとの違いは、連続したホワイトスペースがそのまま表示されるという点です。<br/> (無指定の場合やpre-lineだと連続したホワイトスペースは半角スペースひとつぶんとして表示されます)</p> <iframe width="100%" height="850" src="//jsfiddle.net/4txm11g3/7/embedded/result,html,css,js/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <p> </p> <p> </p> <p>&lt;br&gt;に変換するfilterなんていらんかったんや・・・・</p> yoshiko_pg Re:VIEW導入 & Re:VIEW Live Reload作った hatenablog://entry/8454420450078962494 2015-01-04T13:24:36+09:00 2015-01-04T13:30:12+09:00 最近ちょっと書籍形式の文章を書く機会があり、良い機会なのでたびたび耳にしていたRe:VIEWというツールを触ってみました。 Re:VIEWとは 書籍を書くことに特化したマークアップ言語&ビルドツールという認識。 「れびゅー」と読むそうです。 <p>最近ちょっと書籍形式の文章を書く機会があり、良い機会なのでたびたび耳にしていたRe:VIEWという<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C4%A1%BC%A5%EB">ツール</a>を触ってみました。</p> <h2>Re:VIEWとは</h2> <p>書籍を書くことに特化した<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>言語&ビルド<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C4%A1%BC%A5%EB">ツール</a>という認識。<br/> 「れびゅー」と読むそうです。</p> <p>触る前は何がいいのかあまりよくわかっていなかったのですが、以下の記事を読んで、触ってみたい!と思いました。<br/> <a href="http://typescript.ninja/2015/01/01/typescript-in-definitelyland.html">TypeScript in Definitelyland &#x767A;&#x884C;</a></p> <p>あとRe:VIEWそのものの説明のスライドがこちらにあります。<br/> <a href="http://kmuto.jp/events/page2012/page2012.pdf">書籍制作フローを変える。「ReVIEW」という解。〜マークアップと自動組版と、時々、電子書籍〜</a></p> <p>確かにテキスト管理はGitでしたいし、専用のソフトウェアがないと開けない、みたいなのは嫌だからこういう方針は素晴らしい。<br/> でもマークダウンのほうがメジャーだし書き慣れてるしマークダウンでいいのでは・・・?という気持ちも。</p> <p>ただ、実際に触ってみると、やはり書籍向けのテキストを書くならRe:VIEW記法で書いていったほうが便利だ、という実感を得ました。<br/> 最初から書籍にする原稿を執筆することを想定して作られた<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C4%A1%BC%A5%EB">ツール</a>だと思うので、餅は餅屋と言った感じです。<br/> 具体的には</p> <ul> <li>見出しに自動で通し番号がふられていく</li> <li>別ディレクトリの画像を参照でき、ビルド時に自動で埋め込める。倍率を指定したりキャプションもつけられる</li> <li>画像やコード埋め込みに自動で番号をふれて、本文中からIDで参照できる</li> <li>脚注・コラムなどを扱える</li> <li>章ごとのファイルのほか、まえがき・あとがき・奥付にも対応している</li> <li>まとめて<a class="keyword" href="http://d.hatena.ne.jp/keyword/ePub">ePub</a>で出力できる(簡単に<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%C5%BB%D2%BD%F1%C0%D2">電子書籍</a>作れちゃう)</li> </ul> <p>テキストベースのファイル+<a class="keyword" href="http://d.hatena.ne.jp/keyword/CLI">CLI</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C4%A1%BC%A5%EB">ツール</a>というシンプルな構成なのに、なかなか高機能なのです。<br/> 特に<a class="keyword" href="http://d.hatena.ne.jp/keyword/ePub">ePub</a>出力は私が<a class="keyword" href="http://d.hatena.ne.jp/keyword/ePub">ePub</a>自体にあまり馴染みがなかったので簡単に生成できたことにちょっと感動しました。</p> <p>というわけでRe:VIEWを使ってみようと思いました。<br/> この形でそのまま入稿できるかは別なのですが、個人的にテキストを書いていく際にRe:VIEWの機能を使用してページのような見開きで文章をリアルタイムプレビューできたらそれだけでも有用だなぁと思ったので。(マークダウン+エディタの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%EC%A5%D3%A5%E5%A1%BC%B5%A1%C7%BD">プレビュー機能</a>だと縦にずらーっと出るだけであんまり本としてのイメージがわかなかったのです)</p> <p>なので見開きリアルタイムプレビューできる環境を作ってみました。</p> <h2>Re:VIEW Live Reload</h2> <p><a href="https://github.com/yoshiko-pg/review-live-reload">https://github.com/yoshiko-pg/review-live-reload</a></p> <p>セットアップ方法はREADME.mdを参照してください。</p> <p>これをcloneしてセットアップすると</p> <ul> <li>Re:VIEW本体</li> <li>ディレクトリ構成</li> <li>サンプルファイル</li> <li>ライブリロード環境</li> </ul> <p>が手に入るので、さくさくとテキストを書き始めることができます。<br/> (Re:VIEWの基礎知識は必要になってくると思うので<a href="https://github.com/kmuto/review/wiki">公式のWiki</a>のDocumentsに目を通すこともおすすめします。記法については<a href="https://github.com/kmuto/review/blob/master/doc/format.rdoc">こちら</a>)</p> <p>書いたRe:VIEWファイルはこんな感じで本っぽくプレビューできます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20150104/20150104033907.png" alt="f:id:yoshiko_pg:20150104033907p:plain" title="f:id:yoshiko_pg:20150104033907p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p></p> <p>ライブリロードについてはこちらの記事&ソースを参考にさせていただきました。<br/> <a href="http://xoyip.hatenablog.com/entry/2013/12/17/202105">md2review+ReVIEW+guard+livereload&#x3067;&#x5FEB;&#x9069;&#x30C9;&#x30AD;&#x30E5;&#x30E1;&#x30F3;&#x30C8;&#x30E9;&#x30A4;&#x30C6;&#x30A3;&#x30F3;&#x30B0; - PILOG</a></p> <p>Guardfileで久しぶりに<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a>書いた。。楽しかった。</p> <h3>余談:<a class="keyword" href="http://d.hatena.ne.jp/keyword/css">css</a>について</h3> <p>見開きっぽく見せるのにCSS3のcolumn-countを使いました。(使ってみたかった)<br/> <a href="http://allabout.co.jp/gm/gc/441854/">&#x30C1;&#x30E7;&#x30FC;&#x7C21;&#x5358;&#x306B;&#x6BB5;&#x7D44;&#x304C;&#x4F5C;&#x308C;&#x308B;CSS3&#x3001;columns&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#xFF01; [&#x30DB;&#x30FC;&#x30E0;&#x30DA;&#x30FC;&#x30B8;&#x4F5C;&#x6210;] All About</a><br/> カラムを要素で囲う必要がないので、HTML<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>に影響を出したくない今回のような場合にぴったりです。<br/> ただ横2カラム固定で一定の高さに達したら下の段にまた2カラム作る、っていうのはできないので、やむを得ず横スクロールする形になっちゃいました。</p> <p>各要素のfont-sizeはrem指定でhtmlのfont-sizeを基準にしています。なので全体的に大きくしたり小さくしたい場合はhtmlのfont-sizeを変更すれば大丈夫なはず。<br/> 各要素のfont-size以外のプロパティ(paddingとか)はem指定でその要素のfont-sizeを基準にしています。</p> <p>あと見出しは適当に見出しっぽく装飾してみたけどh2とかちょっとダサい気がしますね・・・<br/> こういうときデザインスキルあるといいなぁーって思います。。</p> <h2>その他、導入にあたって</h2> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%F3%A5%BF%A5%C3%A5%AF%A5%B9">シンタックス</a>ハイライト</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/vim">vim</a>であるか探したらありました。<br/> <a href="https://github.com/moro/vim-review">moro/vim-review &middot; GitHub</a></p> <p>/ftplugin/review.<a class="keyword" href="http://d.hatena.ne.jp/keyword/vim">vim</a> のSurroundRegister呼んでるところでエラーが出たのでそこは消しちゃいました。(surround.<a class="keyword" href="http://d.hatena.ne.jp/keyword/vim">vim</a>使ってないし)<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%F3%A5%BF%A5%C3%A5%AF%A5%B9">シンタックス</a>ハイライトないときついのでとても助かりました。</p> <h3>既にマークダウンでテキストを書いてる場合</h3> <p>私もRe:VIEWの導入を決めるまでマークダウンで書いていたので、以下の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C4%A1%BC%A5%EB">ツール</a>でRe:VIEW記法に変換しました。<br/> <a href="https://github.com/takahashim/md2review">takahashim/md2review &middot; GitHub</a></p> <p>gemでインストール。</p> <pre class="code" data-lang="" data-unlink>gem install md2review</pre> <p>で、以下のコマンドで変換できます。</p> <pre class="code" data-lang="" data-unlink>md2review text.md &gt; text.re</pre> <p>(Re:VIEW記法のファイルの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B3%C8%C4%A5%BB%D2">拡張子</a>はなんでもいいみたいだけど、.reが定番のようです。)</p> <p>といってもマークダウン内でもあんまり凝ったことしてなかったから、主なところは見出しとコード埋め込みぐらいです。<br/> あとは画像を入れるってメモしてたところを手動で画像の表記に置換したりとかそれぐらいで済みました。</p> <h2>Re:VIEW 所感</h2> <p>最初に紹介したスライド(<a href="http://kmuto.jp/events/page2012/page2012.pdf">書籍制作フローを変える。「ReVIEW」という解。〜マークアップと自動組版と、時々、電子書籍〜</a>)の最後に「いずれReVIEWが原稿標準フォーマットの地位に就く(予定)のでまずは使ってみるべき」って書いてあったのですが、実際そうなるのかもなぁって気がしました。少なくともエンジニアが書く技術書という分野では。<br/> やっぱり原稿もGitで管理したいし、そうなるとファイルはプレーンなテキストの形式がいいし、そこからワンソースでHTML/<a class="keyword" href="http://d.hatena.ne.jp/keyword/ePub">ePub</a>/PDF変換できちゃうなんて最高です。<br/> そういった特性上、共同執筆者や編集者さんとのやりとりを<a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a>ベースで進行できる環境だと最大限威力を発揮できそうですね。プルリクで校正できるしCIでビルドできるし。<br/> あと個人で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BC%AB%C8%F1%BD%D0%C8%C7">自費出版</a>する場合や<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%C5%BB%D2%BD%F1%C0%D2">電子書籍</a>を刊行する場合もすごく強力な<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C4%A1%BC%A5%EB">ツール</a>になりますね。<br/> 技術書執筆の未来を感じました。<br/> きっとまだまだバージョンアップとかしていくのかもしれませんが、現時点でも脚注とかコラムとか書籍で表現したい基本的な内容はわりとカバーしてくれているし、書籍向けの文章を書く機会があった際には積極的に使っていきたいと思います。</p> yoshiko_pg zshをGoogle風にするたった一つの冴えたやりかた hatenablog://entry/8454420450077574698 2014-12-20T13:58:19+09:00 2014-12-20T13:58:19+09:00 この記事はzshアドベントカレンダー2014の20日目の記事です。 タイトルはネタです。 <p>この記事は<a href="http://qiita.com/advent-calendar/2014/zsh">zshアドベントカレンダー2014</a>の20日目の記事です。</p> <p>タイトルはネタです。</p> <p> </p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/zsh">zsh</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%C9%A5%D9%A5%F3%A5%C8%A5%AB%A5%EC%A5%F3%A5%C0%A1%BC">アドベントカレンダー</a>ということで<a class="keyword" href="http://d.hatena.ne.jp/keyword/zsh">zsh</a>のおすすめゆるふわプロンプト設定について書きたかったのですが、<br/> よく考えたら以前すでに記事を書いてしまっていたのでした。。。</p> <p><iframe src="http://yoshiko.hatenablog.jp/embed/2014/04/02/zsh%E3%81%AE%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88%E3%81%ABgit%E3%81%AE%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%E3%82%92%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E5%8F%AF%E6%84%9B%E3%81%8F" title="zshのプロンプトにgitのステータスをシンプル可愛く表示 - エンジニアをリングする" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"><a href="http://yoshiko.hatenablog.jp/entry/2014/04/02/zsh%E3%81%AE%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88%E3%81%ABgit%E3%81%AE%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%E3%82%92%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E5%8F%AF%E6%84%9B%E3%81%8F">zshのプロンプトにgitのステータスをシンプル可愛く表示 - エンジニアをリングする</a></iframe><br/> <iframe src="http://yoshiko.hatenablog.jp/embed/2014/04/23/Terminal_app%E3%81%AE%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88%E3%81%AB%E5%AF%BF%E5%8F%B8%E3%82%92%E5%87%BA%E3%81%99%28zsh%29" title="Terminal.appのプロンプトに寿司を出す(zsh) - エンジニアをリングする" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"><a href="http://yoshiko.hatenablog.jp/entry/2014/04/23/Terminal_app%E3%81%AE%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88%E3%81%AB%E5%AF%BF%E5%8F%B8%E3%82%92%E5%87%BA%E3%81%99%28zsh%29">Terminal.appのプロンプトに寿司を出す(zsh) - エンジニアをリングする</a></iframe></p> <p>通常のプロンプトについてはもう書けることがないので、今日はちょっとした小ネタを。。  <br/>  </p> <p>この1行を.zshrcに書いておくと・・・?</p> <pre class="code" data-lang="" data-unlink>SPROMPT=&#34;もしかして: %r (y, n, a, e)-&gt; &#34;</pre> <p> </p> <p>コマンドを打ち間違えたときに・・・??</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20141220/20141220134759.png" alt="f:id:yoshiko_pg:20141220134759p:plain" title="f:id:yoshiko_pg:20141220134759p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p></p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/yoshiko_pg/20141220/20141220134922.png" alt="f:id:yoshiko_pg:20141220134922p:plain" title="f:id:yoshiko_pg:20141220134922p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p> </p> <p>_人人人人人人人_<br/> > 完全に一致 <<br/>  ̄Y^Y^Y^Y^Y^Y ̄</p> yoshiko_pg for vs foreach hatenablog://entry/8454420450077571657 2014-12-20T13:17:21+09:00 2015-01-04T13:27:00+09:00 この記事はPHPアドベントカレンダー2014の17日目の記事です (おくれましたごめんなさいごめんなさい) <p>この記事は<a href="http://qiita.com/advent-calendar/2014/php">PHPアドベントカレンダー2014</a>の17日目の記事です (おくれましたごめんなさいごめんなさい)</p> <p>突然ですがここでおもむろに1から10までの数字を表示してみたいと思います。</p> <pre class="code" data-lang="" data-unlink>for($i=1;$i&lt;=10;$i++) { echo $i . &#34;\n&#34;; }</pre> <p>何の変哲もないfor文ですね。<br/> しかし、こう書くこともできます。</p> <pre class="code" data-lang="" data-unlink>foreach(range(1, 10) as $i) { echo $i . &#34;\n&#34;; }</pre> <p>わかりやすい。<br/> わかりやすくないですか。</p> <p>私はこっちのほうが好きです!!!<br/> ってことで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D9%A5%F3%A5%C1%A5%DE%A1%BC%A5%AF">ベンチマーク</a>をとってみましょう。</p> <pre class="code" data-lang="" data-unlink>$start = microtime(true); for($j=0;$j&lt;=100000;$j++) { for($i=1;$i&lt;=10;$i++) { //echo $i . &#34;\n&#34;; } } $end = microtime(true); var_dump($end - $start); $start = microtime(true); foreach(range(0, 100000) as $j) { foreach(range(1, 10) as $i) { //echo $i . &#34;\n&#34;; } } $end = microtime(true); var_dump($end - $start);</pre> <pre class="code" data-lang="" data-unlink>// for double(0.11627292633057) // foreach double(0.28868103027344)</pre> <p>デ・・・デスヨネ・・・・・・・</p> <p>やっぱり効率では敵いませんが、こんな書き方もデキルヨー!ってことで。</p> yoshiko_pg