前回はFigmaを使うべき理由を説明しました。連載の2回目となる本記事では、Figmaの基本的な使い方を説明します。 今回の記事ではデザインツールを使ったことのない人向けに知ってほしいこと、Figmaの画面説明やレイヤーの設置・編集方法といったFigmaでUIモックを作るための機能について説明します。 SketchやAdobe XDのようなデザインツールの基本的な使い方に慣れている方は、この記事を飛ばして次回の記事を読み進めることをおすすめします。 UIモックを作るにあたって 本連載は主にソフトウェアエンジニアを対象にしています。そこで、UIデザインツールを使ったことのない人に知ってほしいことをお伝えしておきます。 基本的に（凝ったデザインでなければ）UIモックはシェープとテキストといったレイヤーで構成されています。シェープは四角形や円形などの形状をもつもの、テキストは文字通り文字を示して

なぜNext.jsを採用するのか？ 2019.12.17 こちらは Next.js Advent Calendar 2019 17日目の記事です。 Next.jsの話をすると「ReactでSSRをするやつでしょ？」と言われます。正しくはありますが、その答えでは不十分です。 ここでNext.jsの公式サイトを見るとランディングページにはThe React Framework for Production Server-rendered App, Static Websites, the Enterprise, the Desktop, the Mobile Apps, SEO-Freiendly App, PWAs and Electronとあります。要するに、いろんな用途に使えるということです。 SSRを使用しないのであれば、「ユーザー向け（Not管理画面）なサービス開発であればCRA（c

先日、転職透明化らぼに参加してきました。 rtlabo.connpass.com 第1回から気になっていましたイベントでしたが、やっと初参加することができました。 参加した動機は私自身ジョブホッパーなので、自身のこれまでの行いを省みるため。また、現職ではエンジニア採用にも積極的に関わるつもりのため、改めて勉強しておきたかったためです。 イベントは異なる視点・ポジションのパネラーが3人呼ばれており、それぞれの発表とパネルディスカッション。また、イベントスポンサーの3社のLTが行われました。 パネラー発表 翔泳社 近藤 様 「メディアから見た技術ブランディングに効くコンテンツ 〜企業編・個人編〜」 冒頭にコール＆レスポンスで会場を味方につけつつ、個人の印象を残すという戦略を実行しつつ、ブランディングをテーマにプレゼンしているところで説得力を感じました。 メディアの編集者だけあってとても理解しや

技術同人誌やブログを書く上で外せないのがスクリーンショットを取ることです。 同人誌を5冊書いていく経験の中で慣れてきたので、自分がスクリーンショットを撮る時に使っている方法を紹介します。 > Commandからスクリーンショットを撮るCommandからスクリーンショットを撮る Chrome DevToolsに慣れている方はご存知かもしれませんが、ChromeにはCommandという概念があります。 Cmd + Option + iでDevToolsを開きCmd + Shift + Pを押してください。 すると次のような入力フォームと項目が出現します。 フォームに文字を入力すると、Commandを絞りこむことができEnterで指定したアクションを実行することが出来ます。 ここにある、「Capture area screenshot」、「Capture full size screenshot

ども、技書博スタッフの ざき といいます。 この記事では、技書博に関しての情報をざざっとまとめてお伝えしたいと思います。 技書博、言われなくても知ってるよ！ 技書博、そういえばTwitterのTLになんかそんなキーワードが... 技書博？そんなん知らんなぁ... 🙄 と、技書博についてすでに存じあげられている方〜存じない方まで、 おてすきなときに、ざざーっと一読していただけるとありがたいです！ ※ ご存知の方も、もしかしたら見逃している情報があるかも...？ 技書博ってなんぞ？ 一般参加の方へのご連絡 日時・場所 忘れそうな方はGoogleカレンダー登録を 入場について 11:00-15:00 ※無料チケット申込の方のみ入場可 15:00-17:00 ※入場規制なし 懇親会について タイムテーブル・場所 LT（ライトニングトーク） 参加特典について 公式応援ホテルの案内 技書博ってなんぞ

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

こんにちは株式会社SCOUTERでフロントエンドエンジニアをしているhirokinishizawaです。 弊社サービスである「人材紹介会社向けの業務管理システム」SARDINEで新しく無料業務管理ツールをリリースしました。 無料業務管理ツールを開発するにあたり設計段階で複雑にネストされるのがわかっていたのでnormalizrを導入することになりました。 今回このブログでは導入したnormalizrの使い方を書いていきます。 normalizrとは normalizrはデータを正規化するためのライブラリです。 公開されているAPIでも、自社サービスで作成しているAPIでも複雑にネストされているデータを扱うことが多々あると思います。 複雑にネストされているデータを取り扱うのはなかなか大変ですが正規化する事によりEntity毎にidをキーとしたオブジェクトになるためidで辿ることでデータを取って

GatsbyJSブログに検索を実装してみた 2019.01.01 あけましておめでとうございます。今回は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 リリース後に気になった、ク

笛吹きエンジニアの@mottox2です。 皆さん、クソアプリつくっていますか？ 僕はこれまでつくっていませんでした。ということで今回は初めてのクソアプリということでスマートフォンを楽器にしてみました。 この記事はクソアプリ Advent Calendar 2018の21日目の記事です。 つくったもの スマホの傾きと連動して音が鳴るクソアプリを作りました。 https://t.co/Zq3kb1THhy pic.twitter.com/ejYJAuU6Fe — もっと@締切駆動 (@mottox2) December 21, 2018 なんなのか？ みなさん、こういう楽器はご存知でしょうか？1 これはテルミン（テレミン）といって世界初の電子楽器らしいです。2手を調整することで音程と音量が操作できるとっても難しい楽器です。 クソアプリカレンダーの皆さんは簡単に使えるようにしている人が多かったの

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

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の12日目の記事です。 かつ、『エンジニアの登壇を応援する会』 Advent Calendar 12日目の記事です。（https://adventar.org/calendars/2993） 11日目は、どももさんでした。お疲れ様でした。 LTに初めて申し込むときの不安要素とその取り除き方 - りんごとバナナとエンジニア さらに「よしたくブログ」の100記事目になります。とうとう3桁のりました。よく続いたなぁ。 今年のアウトプットを振り返るまえに 今年28歳になり社会人としても5年目を迎え、今までのことをザーッと振り返ってみようと思います。 就職して配属した直後ぐらいまで 大学では会計学を学びITと関わる機会はありませんでしたが、ご縁があり中小のIT企業（いわゆるSES企業）に就職し

2018/12/08にFRONTEND CONFERENCE FUKUOKA 2018 （#fec_fukuoka）の登壇で使用した資料です。

情報共有ツールesa.ioをCMSとして使って1ヶ月運用してみた 2018.06.11 このブログは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-s

「わかばちゃんと学ぶ」シリーズでお馴染みの湊川あいさんにアイコン制作を依頼したら、良い反響がたくさん来たのでご紹介しようと思います！ 湊川あいさんとは フリーランスのWebデザイナー・マンガ家・イラストレーター。 マンガと図解で、Web技術をわかりやすく伝えることが好き。著書「わかばちゃんと学ぶ」シリーズのほか、SchooにてGit入門授業の講師も担当。 今やわかばちゃんと学ぶシリーズで有名ですね！ 先日行われた技術書典4で頒布された「マンガでわかるdocker」は現時点で1200部を超える状態となり、伝説と化しています。 #技術書典 4で出したDocker本、口コミで広がっているのか5月になってもご購入いただいております。 ダウンロード版と合わせて累計1200部越えしました！ありがとうございます＾＾#マンガでわかるDocker ダウンロード版 #技術書典 4 | 湊川あいの、わかば家。

今後の展望 とりあえずαααバージョンとして、単純に記事を書ける機能まわりのみで一旦公開しました。 更により良い物にするため、現在不足している機能を追加していくことは当然進めていきますが、今後唯一のサービスとしてより良いものにしていくために、展望として下記のような機能なども追加していきたいと考えています。 コメント機能の追加 これは現状不足しているだけの機能ですので当然追加はするのですが、主な目的として、単なる記事の投稿サービスとするのではなく、質問をして誰かにアドバイスをもらったり、議論をしてみんなの意見を集めることなどができるようにすることで、「エンジニア、クリエイターのコミュニティ」としたい、というところがあります。 そのためにはコメント機能が不可欠ですのでそちらを作成し、且つコメントの返信をまとめたスレッドページのようなものも作り、良いやり取りはまとめたりブックマークできるようにし

PWAのメリットが強くなる時ってどんなときか考えた。 今回はネイティブアプリの代わりにPWAで頑張る話したけど、ネイティブアプリのありなしに関わらずWebを良くしていきたい。 紹介した自作PWA - http://ease.netlify.com/ (TODOリスト) - http://mo…

快適なフロントエンド開発を実現する話です。 Gatsby化したサイト: https://en.kobit.in （Lighthouse3.0アップデートでチェック項目が増えて点数が落ちてます） esa.io + Gatsbyなブログ: https://mottox2.com

This domain may be for sale!

Roppongi.js#2でGatsby + Netlifyの爆速開発をLTしてきた 2018.05.04 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に置き換えたいです。 狙い