この記事はエンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendar 22日目の記事です。 私は以前ウェブアプリケーションエンジニア（サーバーとウェブフロントが半々ぐらい）として働いており、今の会社ではデザイナーチームに所属しています。 ただし、コードもちょいちょい書いているので、既存の職種に当てはめると「UXエンジニア」・「デザインエンジニア」みたいなものになると思います。 UIデザインに手を出した時期が5,6年前で、SPAで企業向けのアプリケーションを作っていました。その際にUIデザイナーとして働き、エンジニアリングの経験を活かしたデザインで価値が出せると感じたこともありWebアプリケーションエンジニアとしてはデザイン寄りの働き方をしてきました。 それ以前からもPhotoshopやSketchを使ってデザインモックを作ったり、名刺・ポスター・

もう2019年の終わりが見えてきた。今年の自分は何をやったのか、どういうことを考えていたのか、どういった反省が残ったのか、ブログ記事に残しておこうと思う。 > ユーザーにより近い仕事をユーザーにより近い仕事を 仕事に関してはよりユーザーに近い側へ移行していったということに尽きる。 去年は『専門性を持ちたい』という気持ちでやっていたが、今年はiOSアプリをSwiftで始めたり、Railsの仕事を辞めたり、デザイナーの仕事を（数年ぶりに）始めたりした。かなり変化の激しい年だった。 Railsの仕事を辞めたのは、実力不足といった理由ではなく、ユーザーに近い側の実装をしたい気持ちが強くなったからだ。iOSの仕事をしたのもフロントエンドの一種なのでやる意義を感じたからで、Webにはないアーキテクチャの議論、iOS開発の事情・歴史などWebのフロントエンドにも応用できる知識と経験を積むことができた。

先日、『転職透明化らぼ』というイベントに参加してきました。 転職透明化らぼは転職に関わる情報を透明化して企業・個人双方にとってよりよい転職が増えることに貢献するのが目的です。 今回のテーマは『技術ブランディング』で、なぜ企業は技術ブランディングを行うのか？　個人として技術ブランディングが出来るとどううれしいのか？　といった内容で、個人の技術ブランディングについて話せないかというオファーが来たのでパネラーとして参加してきました。 また、他の登壇者の内容はないぱかさんがブログにまとめてますので、そちらをご覧ください。 【イベントレポート】第4回 転職透明化らぼ-技術ブランディング編 - あるぱかになりたい 本記事では自分が話した内容を簡単にまとめました。 > 話したこと話したこと 今回のイベントでは、次の2点を伝えたいことに設定し話をしました。 すべての人に知られる必要はない。 まずは、個人の

前回に引き続き、技術書典6にサークル主として参加させていただきました。 技術同人誌界隈はかつてない盛り上がりを見せており、今回のサークル当落発表の際は地獄のようなタイムラインになっていました。そういった状況でサークル主として参加できたのは幸運でした。 今回の総括ですが、本のクオリティに関しては満足していますが、本を書く以外の行動が酷すぎて、反省点の多い会になりました。 今後サークル参加したい人に向けて一つのケースとして参考になればと思いブログで振り返ります。 > 頒布したもの頒布したもの 今回は新刊で「Netlify Recipes」、既刊を改訂した「Gatsby Guidebook」を頒布しました。 「Netlify Recipes」はレシピ形式でNetlifyの機能や活用法を紹介する本です。どういった時にどういう機能を活用するのか、そういった機能を応用したらどんなことができるのか？など

あけましておめでとうございます。今回はGatsbyでつくってる当ブログに検索を実装しました。 なぜ自分で実装したのか、Gatsbyの構成でどういう実装を選択したのかを書きました。 > つくったものつくったもの Gatsby.jsのブログに検索を実装してみました。あけおめ実装です。https://t.co/hvz25scB7r pic.twitter.com/qSLuKZTx32 — もっと@GatsbyJSおじさん (@mottox2) January 1, 2019 > プルリクエストプルリクエスト 検索機能 by mottox2 · Pull Request #27 · mottox2/website ミニマムリリース分 検索の改善 by mottox2 · Pull Request #28 · mottox2/website リリース後に気になった、クリック領域やアニメーションの修正

この記事は技術同人誌 Advent Calendar 13日目の記事です。技術書典5で2冊の新刊（+1冊の合同誌）を出した@mottox2が担当します。1 技術同人誌は「書けば生える」と言ってる方が多く見られるのですが、実際に書こうとなったときに「なにを書いていいかわからない」という方は多いのではないでしょうか？ この記事では、書きたい・広めたい技術に出会うヒントや切り口を紹介していきたいと思います。 前提として、ITエンジニアがテーマを見つける方法について書いています。 > 自分がやっていることから見つける自分がやっていることから見つける 一番見つけやすいのが、今自分が取り組んでいる技術をテーマにすることです。仕事でプログラミングをやっている人が取り組んでいる技術であれば、濃い内容の技術同人誌になるでしょう。 ただ、「巷に同じテーマの技術書は溢れてる」「すごい人がいるのに自分が書いていい

10/26にTECH PLAY SHIBUYAで開催された執筆の技術を勉強する会 #1に参加してきました。 自分はスピーカーとして参加しており、「自分を甘やかして続ける技術ブログの始め方」という意識低めなセッションをしてきました。 > セッションについてセッションについて 4つのセッションと3つのLTという構成でのイベントの最初のセッションを担当しました。 今回は技術書典5でサークル参加した人のトークということだったのですが、技術書については他の方がやってくれそうな気がしたので、身近に感じられる技術ブログをテーマにしました。 自分はブログの中でも一番つまづきやすいのが、続けることだと思っています。自分がようやくブログを続けるときに意識している「モチベーション」を中心に話しました。 モチベーションの文脈では「どうやってモチベーションを上げるか？」のような議論になることが多いと思います。ですが

池袋で行われた日本最大の技術書の同人誌即売会の技術書典5で技術同人誌を頒布してきました。 今回の振り返りとして、やったこと、反省すべき点、今後の販売について記事にしました。 > やったことやったこと > 執筆執筆 「GatsbyJSで作るモダンウェブサイト」と「netlifyで始めるサーバーレス開発」という本を自分のサークルで頒布、別サークルで合同誌を書きました。 技術書執筆にはRe:VIEW（Tex1を人間向きにした組版ツール）がいいと聞いていたので採用することは決めていました。 ただ、Re:VIEW記法に慣れることが出来ず、最初はMarkdownで執筆を行っていました。 しかし、技術書となるとMarkdownの記法だけでは表現力が弱く、執筆序盤でRe:VIEWに移行しました。 図表番号の参照や、画面のキャプションなど技術書らしさを出すための記法が揃っているので、最初からRe:VIEWを

アラサーになりました。ちょうどいい機会なので一年を簡単に振り返ってみました。 去年はなんでもやっていたのですが、ブログを中心としたアウトプットをする中で「より早く試す」・「開発速度を落とさない開発」のテーマに収束していきつつあります。 > お仕事お仕事 マーケティング系サービス Railsアプリケーションの一部SPA化 WordPressからGatsbyJSへのリプレース サービスのプロトタイプを作っていろいろ検証中 Google AnalyticsベースのCRM基盤の整備 メディア系サービス 社長・デザイナーとプロトタイプ作りながらサービス立ち上げ エンジニア採用の面談、コードレビュー、設計の相談 GKEベースのインフラ整備 SPA + SSR + CDNアーキテクチャ導入 エンタメ系サービス 立ち上げからデザイン&フロントエンドで参加 残念ながらクローズ 人材系サービス サービスのリブ

2018/10/8に池袋サンシャインシティで開催される日本最大の技術同人誌イベント「技術書典5」が開催されます。 今回、サークル「つのぶえ出版」としてNetlifyとGatsbyの布教本を書くことにしました。 主に、初心者から中級者に向けて、モダンなフロントエンド中心の開発を実現するための本です。 今は過渡期で情報が氾濫しています。そういった情報を本という形式でまとめることで、少しでも学習のハードルが下がればと思って書いています。 サークルの配置場所は「け-52」というブースです。会場内の地図も載せておきます 興味を持ってくれた方は公式サイトから「チェックリストに追加」ボタンを押して貰えると嬉しいです。 チェック数によって印刷数が変わってくると思います。 https://techbookfest.org/event/tbf05/circle/41140002 というわけで新刊の詳細です。初

ここ数年間「自宅でグローバルに活躍する」写真でSNS等で活動していたのですが、先日わかばちゃんシリーズの湊川あいさんにアイコンを書いてもらいました。 なんでアイコンを変えたのか？なんで湊川あいさんに頼んだのか？湊川さんに頼むとなぜいいのかをブログに書き残しておきます。 > 依頼までの経緯依頼までの経緯 もともとのアイコンは「自宅でグローバルに活躍する」という写真です。 実際に今は自宅で仕事しているので間違ってはないのですが、ブログやLTをしていることを踏まえるともう少しマイルドなアイコンにしたいと考えていました。 以前から湊川あいさんの書いたてぃーびーさん（エンパワーメントの人）のアイコンを見て気になっていたのですが、ある日VTRyoさんのツイートがリツイートが僕のタイムラインに流れてきました。 やってみたいなとツイートしたところもんりぃさん（キッズスターの人）のひと押しもあり湊川さんにア

2018.07.112ヶ月間のkakakakakkuブログメンティ生活でめちゃくちゃ世界が変わった。blog 5月頭から@kakakakakkuさんの元でブログメンティをやっていたのですが、6月末に卒業しました。 振り返れば2ヶ月前にはブログがない状態から、今や20記事以上公開されているブログを運営するところまで来ました。 以前の記事でブログメンティになった経緯は書きましたが、それからもう一ヶ月ブログを続けて、その間にLTを2本、OSSのコントリビュートができたり、ブログからのお仕事の問い合わせイベントが発生しました。 とりあえず、ブログメンティをやったらめちゃくちゃ世界が変わったので、メンティを通して学んだこととどう世界が変わったのか書いていきます。 > メンティを通して学んだことメンティを通して学んだこと > ネタ出しの仕方とアウトプットの継続ネタ出しの仕方とアウトプットの継続 メンテ

このブログはesa.io（情報共有ツール）をソースにしています。API経由でとってきた記事データをGatsby（静的サイトジェネレーター）を使ってhtmlとして吐き出したものをホスティングしています。 この記事では情報共有ツールをCMSとして扱うメリットと使ってみて見えてきた欠点などについて書いていこうと思います。 > 仕組み仕組み esa.ioの特定のディレクトリが更新された際に、WebhookでNetlifyに通知。 esa.io Webhook GatsbyJS gatsby-source-esa NetlifyはWebhookを受けて、GithubのリポジトリのBuildタスクを実行し、HTMLを生成、そのままデプロイ Netlify ざっくり同じことを再現しようとするならmottox2/gatsby-starter-esaをベースに作ればいけます。（近日中にもっとわかりやすいもの

このブログを初めて一ヶ月立ちました。@mottox2といいます。 そもそもこのブログを始めたのは、2018年はアウトプットしていくぞという豊富もあったのですが、以下のツイートが後押しになりました。 今週から数名「ブログメンター（アウトプットメンター）」を追加募集します！ ・どう技術ネタを探すか ・どう習慣化するか ・どう読まれる記事を書くか などを探求します．1ヶ月単位で自由に終えることができます．ただし，必ず週1回は記事を書いてもらいます．完全無料．興味あれば連絡ください🎉 https://t.co/qhe5rMnzkm — カカカカック@1000ブクマ実績解除🎉 (@kakakakakku) May 2, 2018 kakakakakku（吉田）さんのブログはよくはてブで話題になっているなというイメージで、特に「ブログを書く技術」を発表したを読んだ時は「パワーワードだ」という感想を

このブログはGatsbyで作られています。 Gatsbyの最新版は1.9.269ですが、Githubでv2の開発が進められています。もう既にalpha版としてリリースされているので、実際に使ってみつつ、変更点をまとめてみました。 > 変更内容変更内容 > Breaking ChangesBreaking Changes v2ブランチにあるBreaking Changes.mdを確認すると現段階(2018/06/02)での破壊的変更を確認できます。 Breaking Changes.mdと実際に触ってみて気になった変更点を記録しておきます。 Remove postcss plugins (cssnext, cssimport) from default css loader config postcssが依存ライブラリから削除されています。 boundActionCreators => ac

5/24にPWA Beginners #4で「ネイティブアプリの代わりにPWAで戦う選択肢」というタイトルでLTをしてきました。基本的にPWAはネイティブアプリの代わりにはならないと思っているなかで、どういったシチュエーションでネイティブアプリの代わりになるのかを検討してます。 https://speakerdeck.com/mottox2/pwa-instead-of-native > Progressive Web AppsProgressive Web Apps 最初に言っておくと前提としてPWAはネイティブアプリの代わりにはならないという見解はほぼ多くの人が思っていると思っていて、僕もそう思っています。 PWAはReliable, Fast, Engagingな特徴を持つものである。ということで、基本的にはWebAppでもよりよい体験を提供していこうという認識が近いと思っています。

Googleが公開しているProgressive Web App Checklistをサラッと読んでまとめてみました。 思ったより普通で、Webでいい体験を提供しましょうというニュアンスが強めだった。 > BaselineBaseline Lighthouseで計測可能。基本的なチェックリスト。 Site is served over HTTP Pages are responsive on tablets & mobile devices レスポンシブ対応をすること All app URLs load while offline オフラインでも読み込みが出来ること ServiceWokerによってオフライン対応が可能 Metadata provided for Add to Home screen HomeScreenに追加する時のmeta情報を提供すること manifest.jsonに

2018.05.22We are JavaScripters!でWordPressのフロントエンドをGatsbyにした話をLTしてきたblogltgatsbywordpress 5/21（月）のWe Are JavaScripters!でWordPressのフロントエンドにGatsbyを採用した話をしてきました。 前回のRoppongi.js#2でGatsby + Netlifyの爆速開発をLTしてきたのですが、その続編の話になります。 > スライドスライド https://speakerdeck.com/mottox2/wordpress-gatsby > モチベーションモチベーション 内製出来る体制がありフロントエンドエンジニアがWordPressを担当していると前提の元でのお話です。 エンジニアの工数が割けない状態であればWordPress単体で使い続けるのがいいと思います。 簡単に

2018年になってブログを始めることにしました。 都内でWebサービスを作るフリーランスをしている @mottox2 です。 Note、Medium、Qiita、はてブロなど既にあるプラットフォームで書けばより多くの人に読まれるでしょう。 しかし、アウトプットは続けることの方が重要だと考えており、自分への負荷を軽くするという点で自作のブログを使っていくことにしました。 > アウトプットを続けていくことアウトプットを続けていくこと 自分は2018年5月現在フリーランスのWebエンジニア・デザイナーをやっています。 フリーランスは会社員より自由が効くことが多く、常に自分の出来ることを続けてしまいがちだし、仕事にならないことはおろそかにしがちだと思います。それがいいところでもあるのですが、常に同じことをやっていると周りの人たちとの差はどんどん開いてしまいます。 差別化出来ないフリーランスというの

4/24（火）にメルカリ社で行われたRoppongi.js #2でGatsby + NetlifyについてLTしてきました。 ちょっと遅くなってしまいましたが、ブログを作ったので書いておきます。 Gatsbyめっちゃいいですよ。 > スライドスライド https://speakerdeck.com/mottox2/create-fast-site-with-netlify-and-gatsby 雑に作ってもLightHouseで90点台が出せるという導入から、Gatsbyでの開発の雰囲気を知ってもらう流れになっています。 最後にWordPress置き換えたいけど、ビルドが遅いって話をして終わりました。 WordPressのView開発しんどすぎるので、早くGatsbyに置き換えたいです。 > 狙い狙い 「簡単なことしかやってなさそうなのにめっちゃ速いサイトが出来ていること」を知ってGats