7/27に大田区産業プラザPiOで行われる技術書同人誌博覧会（技書博）に「つのぶえ出版」としてサークル参加します。 今まで「つのぶえ出版」としてはGatsbyとNetlifyの本を4冊だしていましたが、今回はSlack Appsに関する本を出す予定です。 「Slack Apps開発ガイド」 表紙は只今制作中。表紙の関係でタイトルは変更の可能性があります。 Slackは仕事のコラボレーションツールとして広く普及しています。職場だけでなく、家庭やコミュニティの活動もSlackで行われることも多くなっています。 そういった中でSlack AppsというSlackの機能を拡張する仕組みが用意されています。 Slack AppsにはGitHubやCircleCIなどのサービスに連携しているものは配布されていますが、自分たちにとって最適なアプリは自分で作るしかありません。 ただ、Slack Appsはドキュメントの量が多く、すでにDeprecatedなものもある等、初心者にとってハードルの高いものとなっています。もちろん、Web上に開発者向けの記事はありますが、断片的で全体を一気に俯瞰することはできません。 本書は「この一冊でSlack Appsがだいたい分かる」を目指して書かれた本です。 対象読者 本書では、次のような方を対象読者として執筆しています。 プログラミングで効率化が好きな人 Slackが好きな人 Slack上ですべてを完結させたい人 簡単なプログラミング経験のある人（言語は問わない） 目次 第1章 SlackAppsについて知る 第2章 Incoming Webhooksを利用する 第3章 Web APIを利用する 第4章 Cloud Functionsの導入 第5章 Slash Commandsを利用する 第6章 Interactive Componentsを利用する 第7章 Event Subscriptionsを利用する 本の前半では、Slack Appsでできることや既存のアプリについて抑え、サーバーを必要としない「Incoming Webhooks」と「Web API」を扱います。 本の後半では、サーバーを必要とする機能を利用するためにGCPのCloud Functionsのセットアップを行います。セットアップ後は、メッセージ欄で特殊なコマンドを定義できる「Slash command」、Slack上でボタンやダイアログを扱う「Interactive Components」、Slack上のイベントを取得できる「Event Subscription」をそれぞれ扱います。 中身 今回は図を使った説明が多めです。ずっとSketchで図を作っていた気がします。 まとめ イベントのサークルページでチェックリストに加えてもらえると印刷部数が把握しやすくなるのでチェックをお願いします。 来週の金曜日に入稿する予定ですので、まだまだチェック間に合います。 ギリギリまでクオリティを上げていきたい所存です。

今年も始まって半分が経過しました。 ブログのメンタリングをしてくれたカック@ブロガー / k9u (@kakakakakku)さんがプルリクエストの振り返り記事を出していたので、インスパイアし自分も上半期のプルリクエストについて振り返ってみることにしました。OSSコントリビュートと思えるプルリクエストは13件でした。 2019/01 gatsbyjs/gatsby 公式のブログテンプレートへのコントリビュートです。 gatsby-node.jsではブログの詳細ページを作る際にgraphql関数を利用するのですが、graphql関数の返り値はPromiseです。修正前はgraphql関数をPromiseオブジェクトでラップしていたので、チュートリアルの書き方に揃えて直接graphqlの返り値を利用することにしました。 公式テンプレートは利用者から参考にされることが多いのでこういった変更も重要です。 Improve createPages of blog starter by mottox2 · Pull Request #10781 · gatsbyjs/gatsby 上記の変更をリポジトリにある全exampleに対して行ったプルリクエストです。結構な量の変更を行ったので大変でした。 docs: remove Promise clutter from createPages by mottox2 · Pull Request #10791 · gatsbyjs/gatsby gridsome/gridsome Gridsomeが公式プラグインとして提供している@gridsome/source-contentfulに対してのコントリビュートです。 当時はGridsomeが登場して間もなく、source-contentfulで扱えるデータは記事データのみでした。そのデータに加え画像などのアセットも扱えるようにしたのがこのプルリクエストです。 今や日本のGridsome第一人者であるtyankatsuさんが立てたIssueとTwitterを見て取り組みました。 このPRの後でリファクタリングが行われ、より使い勝手のよいプラグインになっていきました。 feat(contentful): Add ContentfulAsset by mottox2 · Pull Request #95 · gridsome/gridsome 当時、コミュニティのサイトをGridsomeで作っており、その際にGatsbyJSの様にyamlをマスターデータとして扱いたいと思いローカルプラグインとして開発していました。 そのプラグインをGridsome本体に移動したプルリクエストです。 当時、transformer-pluginはtransformer-jsonしかなく、本体のコードを読みながら実装を進めた記憶があります。現時点でも「transformerプラグインをsourceプラグインに統合すればいいのでは？」といったRFCがあります。 feat(transformer-yaml): add transformer by mottox2 · Pull Request #133 · gridsome/gridsome 2019/03 gatsbyjs/gatsby GatsbyJSはサイト自体のブログも本体リポジトリに同梱しています。 当時リリースされたブログ記事でリンク切れを発見し対応したプルリクエストです。 Fix broken link in blog by mottox2 · Pull Request #12541 · gatsbyjs/gatsby 2019/04 gatsbyjs/gatsby これもブログを見ていたときのTypo修正です。 GatsbyのTwitterアカウントをフォローしていると記事が流れてくるので要チェックです。 blog: fix typo by mottox2 · Pull Request #12971 · gatsbyjs/gatsby 技術書典6で頒布した「GatsbyJS Guidebook」の執筆中に見つけたドキュメントのリンク切れの修正です。 GraphQL周りの深掘りをしているときに見つけたもので、リンク先のコードを読みながら「どう説明すべきか？」みたいなことを永遠に考えていました。 技術同人誌は本を書くステップでもコントリビュートできます！ fix(docs): Fix broken link by mottox2 · Pull Request #13193 · gatsbyjs/gatsby zeit/next.js Next.jsでUIフレームワークを使うサンプルを探していたところ、README.mdにリンク切れを見つけたため修正しました。 Fix broken link by mottox2 · Pull Request #7087 · zeit/next.js 2019/05 mdx-js/mdx Next.jsアプリケーションにMDXを組み込む際に、ドキュメントに書いてあったリポジトリを見たら「This repo is now deprecated」となっていました。 そこで推奨されていた移行先のリポジトリのセットアップ方法に書き換え、サンプルコードも同様に書き換えました。 Use @next/mdx to use mdx in Next.js by mottox2 · Pull Request #568 · mdx-js/mdx bmcmahen/sancho ブログでも紹介した「Sancho」に意図とは違う動きをするコンポーネントを見つけたのでCSSを修正したものです。 セレクトボックスのプルダウンアイコンにマウスカーソルを当てても、ポインターアイコンにならないのはやりがちなので気をつけていきたいところ。 Ignore select pointer event by mottox2 · Pull Request #18 · bmcmahen/sancho zeit/next.js 「『初夏のJavaScript祭』でSPAのSSR, SSGについて話してきました」の登壇資料を作っている際にソースを読んでいて、その時にリンク切れを見つけたので修正しました。 Next.jsではzeit/err-shという自作の短縮リンクを使っているのですが、その利用法が間違っていました。 Fix broken link by mottox2 · Pull Request #7378 · zeit/next.js 2019/06 bmcmahen/sancho SanchoはTypeScriptで書かれているのですが、公式で提供しているPropTypesも同時に利用されています。PropTypesはコンポーネントに渡されたpropsの必須項目や型をチェックしてくれて、実行時にエラーメッセージを表示してくれるライブラリです。 TypeScriptの型とPropTypesの指定が一致しておらず、PropTypesの記述が不完全だったので修正しました。 Fix wrong proptypes by mottox2 · Pull Request #19 · bmcmahen/sancho jser/jser.github.io 日本のJSerにおなじみのjser.github.ioのリポジトリです。サイトの記事にTypoを見つけたので修正しました。 このサイトには「Edit on GitHub」ボタンが用意されており簡単に修正リクエストを送ることができます。 2019-06-17のJS: react-redux 7.1.0(Hooksサポート)、Pika CDN、State of CSS 2019 - JSer.info Fix typo by mottox2 · Pull Request #628 · jser/jser.github.io まとめ 去年ほど活動はしていませんが、タイポやリンク切れに関しては迷わずプルリクエストを投げる習慣が付きました。 自作のOSSライブラリも1月に「gatsby-source-rss-feed」と「remark-code-titles」しか出せていないのでもうちょっと活発に動いていきたいです。

ZEIT社が開発しているReact製のフレームワークNext.jsですが、現在v.8.1.1のカナリー版がリリースされています。 v.9では様々な変更が入っていますが、個人的に注目しているのはTypeScriptが標準で利用可能になった点です。そこで備忘録を兼ねて型の書き方を整理してみました。 カナリー版の段階で書いた記事を更新しました。 Next.js 8からの変更点 TypeScriptを利用するためにwebpackの設定を行う@zeit/next-typescript パッケージが不要になりました。 このパッケージはnext.config.js内で利用しwebpackとbabelの設定を弄る役割を担っていました。内部にビルドインになりました。 型定義は@types/nextのものを使っていましたが、next.jsの本体側で型定義を持つようになりました。 ForkTsCheckerWebpackPluginがデフォルトで有効になっています 雑な型を書いていると既存のプロジェクトを上げる際にエラーになり、ビルドでコケるようになります。 つまり、v9からはnextだけインストールすればTypeScriptが利用できるようになります。 関連Pull Request Add Typescript compilation by timneutkens · Pull Request #7110 · zeit/next.js Add automatic TypeScript setup by ijjk · Pull Request #7125 · zeit/next.js Add .d.ts for next-server by timneutkens · Pull Request #7133 · zeit/next.js Add declaration files by lfades · Pull Request #7118 · zeit/next.js Add types for getInitialProps by lfades · Pull Request #7162 · zeit/next.js 型の使用例 Page Component pages/以下に配置するとルーティングと対応するコンポーネントの例です。 pages/index.tsx import { NextPage } from 'next' interface Props { books: Book[] } const Index : NextPage<Props> = () => { return <div> <p>Hello World</p> </div> } index.getInitialProps = async ({req}) => { // do something } Page Component (class component) Hooks以前のクラスコンポーネントでの書き方 class Index extends React.Component<Props> { static getInitialProps = async ({ query }: NextPageContext) => { } render { return <div/> } ) Page Component w/ router withRouterを使ってコンポーネント内でルーターを触るパターンです。 pages/index.tsx import { NextPage } from 'next' import { withRouter } from 'next/router' import { WithRouterProps } from 'next/dist/client/with-router' interface Props { books: Book[] } const Index : NextPage<WithRouterProps & Props> = () => { return <div> <p>Hello World</p> </div> } index.getInitialProps = async ({req}) => { // do something } export default withRouter(Index)

macOSに標準で付属しているPreview.appは機能が少ないと思われがちですが、実は多くのタスクがこなせます。 その中でも技術同人誌系を頒布する際に自分がよく使っているTipsを紹介します 特定ページだけを画像ファイルに書き出す 技術同人誌を書いている方はBoothで販売やブログを使った宣伝を行っています。その際に重要なのが、今書いているもの中身を見せることです。その際にPDFから特定のページを画像化する必要があります。 次の手順で画像が得られます。 左ペーンの出力したいページを右クリックし、「別名で書き出す」を選択 画像の拡張子と名前を指定して「保存をクリック」 見開きで表示 技術同人誌系の即売会で技術同人誌を頒布している方の多くは物理本も提供しているように見受けられます。 電子媒体であれば、見開きを気にする必要はないのですが、物理本となると気になるのが「見開き」です。執筆中は1ページ単位で見ることが多いですが、印刷所に出す前に少し確認するだけで本の読みやすさが変わってきます。 そういうときに役立つのがプレビューのアプリメニュー「表示＞2ページ」です。 表示モードは、初期状態だと連続スクロールですが、このモードを有効にすると次のように見開きでPDFを覗くことができます。 印刷所に入稿する前に、不自然な改ページがないか確認しておくといいでしょう。読み物系ではあまり気にならないのですが、写経を前提とした本でコードの途中に改ページが入ると気になります。 見開きのPDFを作る 上記の方法で「見開き」表示を実現できるのですが、手持ちのタブレットで確認するために、見開きのPDFがほしい方もいるかと思います。 見開きのPDFを作るのは先程の方法と大きく違い、割付印刷でPDFを出力することで実現できます。 ただし、作業前に最初のページを一旦削除する必要があります。 通常「左: 2, 右: 3」、「左: 6 ,右: 7」のように左に偶数ページ、右に奇数ページが配置されるためです。 削除せずにやると誤った見開きのPDFができてしまします。 次のような手順で見開きのPDFが保存できます。 アプリメニュー「ファイル＞プリント」を選択すると印刷メニューが出てきます。（⌘+PでもOK） 赤枠で囲ったセレクトボックスから「レイアウト」を選択すると、「ページ数/枚」の設定項目が表示されるので2を選択 左下の赤枠で囲ったPDFをクリックして「PDFとして保存」を選択すると、ファイル名をきめて保存ができます。 ただ、こんな面倒なことをやらなくてもiOSの「Google Playブック」アプリでPDFを開くと勝手に見開きで表示してくれます。（ただしApple Pencilでメモが書けないのが難点です。） 今回は3つのTipsを紹介しました。「自分の方がいいTipsを知っているぞ」という方がいたらぜひTwitterで声を書けてください。いい本を作るためにお互い切磋琢磨しんがらがんばりましょう。

Shifterは株式会社デジタルキューブが運営する「Serverless Static WordPress ホスティング」と銘打っているサービスです。 通常用途でWordPressをする際は常にWordPressが動くサーバーが立ち上がっていますが、Shifterはコンテナ技術を使うことで必要なときにWordPressを立ち上げ、静的ファイルを生成する処理を行うことで、外部から見ると単なる静的ファイルをホスティングしているだけになります。 WordPressが起動しているわけではないので、脆弱性との戦いからの開放・ページ表示の高速化、メンテナンス性の向上といったメリットを得ることが出来ます。 補足で、WordPressの拡張機能であるStaticPressは起動しているWordPressから静的ファイルを生成するものなので、Shifterとは大きく異なります。Shifterはホスティングサービス、StaticPressはプラグインです。 今回はShifterに移行する際に疑問に思ったことと、その調査結果を記録しました。 原理と実現可能性 いつWordPressが立ち上がっていつ落ちるのか 管理画面やAPIでstart, stopが可能 起動は初期状態で10秒程度 stopしてGenerateボタンを押すとページが生成される デプロイに時間は少し必要 ローカルで開発＆Gitデプロイはどうするの？ shifter-local: Sfiterの環境を立てるdocker-composeファイルを提供 Shifter Local | Shifter Documentation Gitとの連携はWordPressにWP Pusherというプラグインを使えとのこと ただしprivateリポジトリを利用する場合プラグインは有料 Custom WordPress Themes on Shifter | Shifter Documentation 結構たいへんそう フォームはどうする？ ContactForm7に互換性を持つプラグインを用意しているとのこと。 挙動としてはformタグのaction属性を設定したURLに書き換える。 https://support.getshifter.io/articles/1647581-introducing-wp-serverless-forms-and-support-for-cf7 利用者側から見た変化 外部の人やリテラシー低めの人には合わない 毎回URLが変わる 常に立ち上がっているわけではない Generateボタンをおす必要がある 反映までの時間がかかる この辺りの教育をどうするか 覚えてもらうコスト 総括 リテラシーの高い人が担当するならOK リテラシーが低くても使いやすくする整備はできるかも 基本的にJAMstackで置き換えるときの判断と同等 Shifter APIを利用することである程度自作の仕組みに載せることはできそう

この記事を見た@mascii_kさんがもっといい方法を教えてくれました！ ブレークポイントなしで実行できるようになるので便利です。 【Vue.js】Vueコンストラクタ関数をWebコンソール上で見つける方法 - Qiita 今年のWWDCは熱かったですね！その中でもSwiftでReactのように宣言的にUIを記述できるSwiftUIの発表はこれからのiOSアプリに変革をもたらす存在だと思います。 そのSwiftUIのチュートリアルサイトがVue.jsで構築されているというツイートがタイムラインに現れました。それが、Vue.js Devtoolsが有効になっている写真と共にです！ 自分がそのサイトを訪れてもVue.js Devtoolsが無効になっていたのですが、理由はこのツイートのリプライ欄にありました。 元ツイート .@Apple is using @vuejs pic.twitter.com/RGZ6TIWjMj— Rahul Kadyan (@znck0) June 3, 2019 答え Add debugger before new Vue() then set Vue.config.devtools = true and continue!You have to find new Vue() in minimised code. Here search for `new n["a"]`.— Rahul Kadyan (@znck0) June 3, 2019 つまり、`new Vue()`でVueのインスタンスを作成する前に`Vue.config.devtools = true`を実行すればVue.js Devtoolsで覗けるという話です。（devtoolsオプションはVue.js Devtoolsを有効にするオプションです。） しかし、何らかのバンドラーによってnew Vue()という記述は別の変数名に置き換えられてしまいます。その変換結果が今回はn["a"]であることをツイートで説明しています。 本記事では、そういった要素の見つけ方からVue.js Devtoolsを有効にする方法を説明します。 今回はSwiftUIのTutorialを題材にします。 https://developer.apple.com/tutorials/swiftui/ 手順 上記のようにバンドルツールでは、最終的なファイルサイズを小さくする為にminifyという処理をしています。 その最適化の中に多くの変数やモジュールの名前が書き換えられてしまいます。しかし、オブジェクトのメソッドやオプションは書き換えられません。（場合によりけりですが） Vueの場合はconst vm = new Vue()の後にvm.$mount('#app')のようなメソッドが実行されることが多いので、このメソッド名で検索します。 検索にはChrome DevToolsのSearch Drawerを利用して、今回は$mount(で検索します。 お目当てのファイルが見つかったらファイルをクリックします。すると、Sourceタブでクリックしたファイルが開かれます。 この際に、{}マーク（Pretty Print）を押すとコードが整形されて読みやすくなります。 この状態でCmd + Fで検索フィールドを開き、$mount(で検索しましょう。 検索したところ、$mountをメソッドを持っている new n["a"]が非常にVueっぽさを感じさせてくれます。 行数部分（画像では781行目）をクリックしブレークポイントを挿入。ページをリロードしましょう。 ページをリロードすると、表示前にブレークポイントで動作が停止するので、Consoleでn.a.config.devtools = trueを入力しましょう。入力したらF8キーを押し動作を再開します。 この状態でChrome DevToolsを開き直しましょう。Vue.js DevtoolsはChrome DevToolsを開いたタイミングで有効であれば表示されるようです。 Vueタブを押すとコンポーネントの構造が見れました。 これを気にChrome拡張の動作にも興味を持ったので、いろいろ調べてみたいと思います。 [追記] アプリケーションによっては上記の方法では見れない場合があります。__VUE_DEVTOOLS_GLOBAL_HOOK__.Vueがnullになっている場合は、__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue == n.a のようにVueを代入すると動く場合もあります。Vueのコンストラクタを代入するみたいですね。 https://github.com/vuejs/vue-devtools/blob/c8b2e863cf1445ea065bc969f5561588ebded618/README.md#quick-start-in-chrome

メンバーズキャリアさんのオフィスで開催された『初夏のJavaScript祭 in メンバーズキャリア』で登壇の枠を頂いたのでSPAをリリースする際によく検討されるSSR（Server Side Redering）と、条件付きでSSRの面倒事を省略できるSSG（Static Site Generator）についての話をしてきました。 発表資料 概要 SPAをリリースする際にVueやReactを単独でリリースしようとすると、表示までの速度や、ソーシャルシェア、SEOにおいて不利になりうる Nuxt.js（のユニバーサルモード）を中心にSSRを利用する事例も増えてきたが、サーバー・キャッシュなどを考慮する必要があり面倒 SSG（静的サイトジェネレーター）でビルド時にSSRを行うPrerenderというアプローチを利用するとサーバーやキャッシュの考慮が不要になる ただし、Prerenderはコンテンツの更新ごとにビルドの必要があり、反映までのタイムラグが存在する。 このデメリットを受け入れられれるのであれば、SSRよりSSGを利用するとメリットを享受できる。 補足 今回は「JavaScript、SPAが好きだよね」という前提の話なので、クライアントでSPAとして動作させる前提の話をしました。 自分はReact寄りのエンジニアなのですが、イベント参加時のアンケートにVue, Nuxt.jsに興味を持っている人が多かったのでなるべくVue寄りの話にしました。 自分の前にlulznekoさんがGridsomeの話をする予定でしたので、いろいろ説明を省略しています。 参考リンク Vue SSR ガイド Rendering on the Web | Google Developers イベントレポート イベントではElmやNuxt.js x Storybook、SemanticUI、IoTなどいろんなJavaScript周りの話を聞くことができました。やはり20分セッションは濃い内容が聞けてとても勉強になります。自分はReactを通して関数型のアプローチに興味を持っていたためElmは非常に興味深い内容でした。 セッションの後はSemanticUIについてのセッションをしたフジワラさんが個人開発で作られている『THE BINGO』というビンゴのWebサービスを利用してビンゴ大会を行いました。 このサービスはFirebaseで作られているのですが、50人弱の人のビンゴが自動で進んでいく様子は思わず「すげえ」という言葉が出るほどでした。 また、フジワラさんの会社Tシャツ、IoTグッズ、自分が技術書典で出した技術書がビンゴの景品でした。 自分はフジワラさんの会社Tシャツを景品としていただきました！ 会場を提供していただいたメンバーズキャリアさん、運営の皆様、参加者の皆様、楽しい時間をありがとうございました。

2019/5/22にPlaidさんのオフィスで行われたGinza.js #1にLT枠で参加してきました。 前から、Plaidさんの会場は一面芝というのをTwitterで観測しており、今回初めてお邪魔させてもらいましたがすごかったです。 そのイベントに自分はLT枠で参加し、「Next.js meets Netlify」というNetlifyでNext.jsのSSRをする話をしてきました。 資料 話したこと Netlifyの提供するFaasであるNetlify FunctionsでNext.jsのサーバーサイドレンダリング（SSR）を実現する話をしました。 Next.jsはv8でサーバーレスモードが追加され、サーバーレスでより使いやすくなりました。 サーバーレスモードを有効にすると単独で動作するファイルが生成されます。そのファイルをNetlify Functionsで動かします。 一方、Netlify FunctionsはURLの自由度が低く、example.com/.netlify/functions/funtion-nameのようなURLに固定されてしまいます。裏側のAPIとして利用する場合は気になりませんが、ユーザーがアクセスするURLとしては適していません。 しかし、Netlifyが用意しているリダイレクト・リライト機能を使えればURLを書き換えることができ、「/functions-nameにアクセスしたらexample.com/.netlify/functions/funtion-nameにリライトする」といったことも可能です。この手法で利用するURLのリライトを実現しました。 最後にNext.jsのビルドで得られた生成物をNetlify Functionsから利用します。このあたりは非常に煩雑になってしまったので、スライドを見てもらえれば…と思います。複雑なビルド手順と、Next.jsの要求する引数を無理やりマッピングで作る用の工夫を行っています。 一応言っておくと、Next.jsをNetlifyで動かすことは推奨しません。あくまで「Nelitfyの機能を使えばSSRもできる」ぐらいの認識でいた方がいいでしょう。 テーマ選びの話 最近は個人的にFirebaseでNext.jsのSSRを試しています。その話をしようと思ったのですが、既出ネタであることと他の参加者がNuxt.js x Firebaseの話をするということでNetlifyでSSRしたらどうだろうか？と思い立ちNext.js on Netlifyをテーマにしました。 自分はブログや技術書典でひたすらNetlifyやJAMstackの普及活動をしています。他のLTスピーカーの多くがデモのホスティングにNetlifyを利用したこともあり、Netlifyには一定の認知度があるとは思います。しかし、動的要素を配信できることはいまいち認知されていません。（みずりゅさんがNetlify Functionsに触れていたぐらいです。） このLTを通して「Netlify、便利！」と思ってもらえればいいなと思います。

JAMstackの情報は国内には乏しいので、特に最新情報に関してはNetlifyやGatsbyの情報は海外のものを見るとよい。 その中でもJAMstack confやGatsby Daysの情報は一見する価値があると思うのでメモがてら紹介する。 Gatsby Days Gatsby DaysはGatsby inc.が主催するイベント。 JAMstackというよりはGatsby固有の話をしており、テーマを提供するGatsby Themeの話、Gatsbyのリアルタイムプレビューを目指すGatsby PreviewなどGatsbyの目指す方向性の話が聞ける。 過去2回開催されており、初回のイベントに関してはYouTubeに動画が上がっている。 Gatsby Days: How We Got Here and The Future of Website Development - YouTube Gatsby Days NYCに関してはまだ上がっていないが、今後上がってくると思われます。 JAMstack Conf JAMstack全般を扱うカンファレンス。YouTubeチャンネルもある。 JAMstack_conf 2018年にSan Francisco行われたJAMstack_confをきっかけに今年はNew York, London, San Franciscoで行われる様子。 このイベントでは、どうやってクライアントにJAMstackを売っていくかというAgency Dayとカンファレンス本体が別日に設定されていた。 自分はまだKeynoteと特定の機能に関するセッションをちらっとしか見ていないので英語の勉強を兼ねてちゃんと見ていこうと思います。 そちらも良さげならまとめるかもしれません。

GW満喫していますか？私はNext.jsとCloud Functionsを組み合わせたり、FirebaseをバックエンドとしたSPAの検証や、SwiftでiOSアプリを書いて満喫しています。 こういった検証にありがちなのですが、「実現可能か？」という観点で作っているアプリケーションであっても、UIがショボいとやる気が削がれませんか？ 自分はUI寄りのJSerなので、UIに気合が入ってないと、実装の気合も入りません。 とはいえ、ReactのUIコンポーネントライブラリにありがちなのですが、ライブラリを入れるためにwebpackの設定が必要なものもあります。 そういった理由から、いままで自分はCSSフルスクラッチ派でした。しかし、このGWにそれなりに見栄えがよく、設定がほとんど必要のない「Sancho UI」というUIコンポーネントライブラリを見つけて心変わりする程度には気に入ったので紹介します。 Sancho UIの紹介と強み https://sancho-ui.com/ Sancho UIは Emotion と TypeScript で書かれたUIコンポーネントライブラリです。 CSS in JSライブラリのEmotionで書かれていることが重要で、自分のよく使うライブラリでほとんどのアプリケーションに導入しているので設定が必要ありません。 導入していなくても、emotionをインストールすれば利用が可能になります。 （2系は先日リリースされたばっかりで、まだ安定していないので1系を指定しています。） $ npm install sancho@1.2.3 @emotion/core @emotion/css また、TypeScriptで書かれていることもあり、型定義もバッチリです。ドキュメントを見ずとも、型定義ファイルを見に行くだけで、どういったプロパティを渡せばいいかわかるのもポイントです。 コンポーネント例とサンプル 実際にUIコンポーネントとしてどういったものが使えるのか、自分のオススメコンポーネントとともに紹介します。 まずはTabです。次の例はToolbarとTabを組み合わせたものです。 コードを見るとわかるのですが、50行以下の記述でアプリライクなツールバーとタブが実装できます。 もう一つ、推したいのがSheetです。上の例の「Open Sheet」ボタンを押すと左からViewが登場します。 いわゆるモーダルの亜種なコンポーネントですが、Matterial DesignのSheets:sideとして定義されているようなものです。 モーダルでは表現できないモードを表現できたり、propsとしてpositionに”buttom”を渡すことで表示する方向も制御できます。 他にもForm系のコンポーネントも充実しており、フォーム系ライブラリと組み合わせることで爆速でフォーム系のページを構築することもできます。 こういったコンポーネントを用いてSPAををサクッと実装できるのがSancho UIの強みです。ぜひ、次のプロジェクトに使ってみてはどうでしょうか？ 利用者を増やして、作者のやる気スイッチを一緒に押しましょう！

前回に引き続き、技術書典6にサークル主として参加させていただきました。 技術同人誌界隈はかつてない盛り上がりを見せており、今回のサークル当落発表の際は地獄のようなタイムラインになっていました。そういった状況でサークル主として参加できたのは幸運でした。 今回の総括ですが、本のクオリティに関しては満足していますが、本を書く以外の行動が酷すぎて、反省点の多い会になりました。 今後サークル参加したい人に向けて一つのケースとして参考になればと思いブログで振り返ります。 頒布したもの 今回は新刊で「Netlify Recipes」、既刊を改訂した「Gatsby Guidebook」を頒布しました。 「Netlify Recipes」はレシピ形式でNetlifyの機能や活用法を紹介する本です。どういった時にどういう機能を活用するのか、そういった機能を応用したらどんなことができるのか？など基礎的なものから応用的なものまで30のテクニックをまとめた本です。 今回はサンプルコードを厚めにし、ふと気になった時に参考にするリファレンス的な本を目指して書きました。 「Gatsby Guidebook」は前回の技術書典5で頒布した「GatsbyJSで作るモダンウェブサイト」の改訂版です。直したかった箇所の修正・追記で、30ページほど削って50ページ弱の追加になりました。また、Netlify Recipesの製作中に学んだLatex、Re:VIEWスキルを生かしてより見やすい本になっています。 内容としてはReact単体でポートフォリオを作り、Gatsbyを学びながら再現し、APIと管理画面だけを提供するHeadless CMSでの作例を紹介する形になっています。 前回よりボリュームアップし、2冊合わせて204ページとかなり厚みのある感じになりました。 また、自サークル以外でも、あ01の親方Projectで頒布している合同誌「ワンストップ勉強会」に参加し、ワンランク上の勉強会LT資料作成テクニックを書き、エンジニアの登壇を応援する会（あ01に委託）の「エンジニアの成長を応援する本」にはコラムとして「アウトプットを継続するコツ」をテーマに寄稿しました。 反省すべき点 今回の主な失敗は次の3点になると思います。 組版に懲りすぎて自滅 売り子氏への連絡ミス 原価高すぎて赤字 組版に凝りすぎて自滅 Netlify Recipesはテクニック集なのですが、当初はCSS組版で1ページ単位でテクニックを紹介する形態を想定していました。 CSS組版は緑豆はるさめさんの書いた『CSSではじめる同人誌制作』を参考にしながらテンプレートを作り、MarkdownからHTMLに変化する仕組みも作って順風満帆なスタートかと思われました。 しかし、原稿を書き始めてから異変が起きます。ベーシックな仕組みは1週間かからず実現できたのですが、組版のレイアウトを考えるあまり執筆がどんどん辛くなっていきました。 レイアウトを考えながら執筆を進めるのは、いろんな要素が密に結合しているプログラムを書いている気分でした。プログラムに置き換えると「考えることが多い」というのは良くないことだとすぐわかります。 【悲報】技術書典6、CSS組版を諦めてRe:VIEWで挑むことにしました。考えることが多すぎて病みかけてた。— もっと@技術書典6 赤字 (@mottox2) March 14, 2019 転機はこのツイートのタイミングです。これまで作ったMarkdownを変換する仕組みを捨て、前回もお世話になったRe:VIEWに逃げました。 幸い、原稿はある程度進んでいたので、Re:VIEWに移行してからは、移行前の3倍ぐらいの速度で執筆が進みました。 最初からRe:VIEWだったら、もう少しレシピを増やせたのかもしれないので悔しいです。 売り子氏への連絡ミス これは痛恨のミスで、連絡していたつもりが伝わっていなかったということが前日に発覚しました。（完全に自責100%） そこで藁にもすがる気持ちで、売り子募集をしたところ「エンジニアの登壇を応援する会」の「忘年LT大会」で一緒にLTをしたkaztoさんが名乗りでてくれて、急なお願いにも関わらず引き受けてくださいました。本当に感謝です。 お手伝いしましょうか？当方コミケで売り子経験あります。— kazto (@bainarian) April 13, 2019 また、kazto さん以外にも ナベさん、はがくん、主犯さんも手をあげてくださって、人に恵まれていると感じました。本当にありがとうございました。 人に迷惑をかける系のミスは、本当にやめたいので気をつけます… 原価高すぎて赤字 これは笑いポイントですが、赤字でした。原因はそもそもページ数が多く、早割が効いていない状態でオプションをモリモリにした点です。 お気付きの人もいたかもしれませんが、本の表紙はマッドPPのオプション、ダウンロードカードは紙質をあげて角丸加工オプションをつけています。その上、Gatsby本に関しては、ページ数が前回より増えており本来1,500円に設定すべき本だったと思います。 オペレーションを煩雑にしたくないからという理由で1,000円にしてしまい、最終的に赤字になってしまいました。 #技術書典6 用のダウンロードカードが届いた！今回は角丸加工。先着150人には冊子とセットで頒布します！https://t.co/2sppPnE9Fx pic.twitter.com/299kuYmKE4— もっと@技術書典6 赤字 (@mottox2) April 12, 2019 同人誌イベントがあるたびに赤字になるのは継続性という観点でも良くないですし、「エンジニアはビジネスがわからない」などの煽りも受けたくないので継続的に同人活動を続けられる価格設定をしていきます。 そもそも、原価計算をしたのが技術書典後が始めてだったので、反省しています。早割が効いていればギリギリ黒字でした。 ただし、自分の作りたい本を追求したことは同人活動でしか味わえないと思うので充実感で一杯です。 前回より良くなった点 悪い点も多かったですが、前回と比較してよくなったこともありました。 Re:VIEWのカスタマイズ ポスターやブックカバーを用意した サークルに来た人に適切な本を紹介できた Re:VIEWのカスタマイズ CSS組版を諦めても、自己満足かもしれません実現したかったことをRe:VIEWでも実現する努力をしています。 例えば、インラインコード。Qiitaやブログでは一般的になっている背景色ありのスタイルをつけています。サンプルコードを明示する際も、角丸付きの四角形で目に入るような形にしています。コラムのスタイルもいじっていて、面積をコンパクトにすることでページ余白に入れやすくしています。 前回はRe:VIEWを使うだけで手一杯だったのですが、今回は2回目ということもあり、Re:VIEWのソースも参考にしつつカスタマイズを加えて行きました。 おかげさまで、個人的な感覚ではありますが、読みやすさが向上しています。 また、カスタマイズではありませんが、ページの区切りを丁度よくするためにトリミングを多用しています。前回は、単純に画像の倍率をいじっていたのですが、今回はトリミングを使ったことでかなり見栄えがよくなりました。 こういったレイアウト調整の工夫は別途ブログの記事ネタとして放出していきます。 ポスターやブックカバーを用意した 前回の技術書典5の時は、人生初の同人誌即売会で一般参加すらしていない状況で、空気感も分からず「ワンストップ技術同人誌」を参考に不安な気持ちで当日を迎えたことを覚えています。 本には書かれてはいたのですが、ポスターやブックカバーを用意せずに参加し「次回こそは」と思っていました。そこで今回はお品書きポスターを製作し、アクセアでポスターを印刷して持って行きました。 今回はお品書きのポスターも用意した！ちょっと厚めの紙を使うだけでそれっぽくなった。 #技術書典 #技術書典6 pic.twitter.com/TMacXzIx2z— もっと@技術書典6 赤字 (@mottox2) April 13, 2019 効果があったのかはわかりませんが、満足感というか「サークルっぽい」という気持ちになれたのでよかったです。A3で二枚（展示用と保管用）印刷したのですが、紙にこだわったのにも関わらず300円程度でした。割と低コストで作れるので、同人誌即売会に限らず印刷物を作りたい気持ちになりました。アクセアはいいぞ。 サークルに来た人に適切な本を紹介できた 前回と違い、今回は周りに知人も多く、頒布した本に関連する人たちのサークルも頭の中に入っていました。そういった背景もあり、サークルに来てくれた人の話からオススメのブースを紹介することもやっていました。 Gatsbyに興味はあるけどReactに抵抗感がある人には、となりのGridsome（Gatsbyにインスパイアされて作られたVue.jsのサイトジェネレータ）本を、GatsbyよりReactに興味のある人には、大岡さんのReact本を、Netlifyに限らず、静的サイトに興味のある人にはkondoyukoさんの静的サイトホスティング本を紹介していました。 他人のサークルにお客を流してた @mottox2 さん、人がよすぎやろ…。#技術書典 pic.twitter.com/NlMKGFuLRt— 大岡由佳@技術書典6【さ02】りあクト！ (@oukayuka) April 14, 2019 隣で頒布してたウチにもかなり誘導してくださっててありがたかったです。感謝。 https://t.co/N9FP6oyQ1l— ponday (@ponday_dev) April 14, 2019 良いことなのかはわかりませんが、現地に来て本を探しに来たユーザーならではな体験なのかもしれないです。 （一応補足をしておくと、大岡さんの本は前回購入してわかりやすいと感じていますし、Gridsome本を書いたtyankatsuさんは一緒にコントリビュートしている仲間ですし、近藤さんは編集者なので非エンジニア目線でわかりやすく解説してくれると思って紹介しています。） あとは、こういった紹介でReact界隈やJAMstack（GatsbyやGridsomeなどのJS製サイトジェネレータの総称）界隈が盛り上がればOSSコントリビューターとしても嬉しいです。 まとめ 恥ずかしいことも書きましたが、この記事を読んでくれた方には自分と同じ失敗をして欲しくないです。参考になることが一つでもあったら嬉しいです。 失敗は多かったですが、非常に楽しくイベントに参加できました。来場者数が非常に多いイベントを開催している運営のみなさん、IT分野にも関わらず会場に足を運んでくれた参加者のみなさん、ありがとうございました。 最後に宣伝ですが、Boothに本を公開しました。紙の本はとらのあなさんにも入庫しているので、お急ぎの方はとらのあなさんの店舗に行けば手に入ると思います。 Netlify Recipes 【DL版】https://booth.pm/ja/items/1312384 【本版】https://booth.pm/ja/items/1316769 GatsbyJS Guidebook 【DL版】https://booth.pm/ja/items/1312387 【本版】 https://booth.pm/ja/items/1316761 【おまけ】今回の戦利品です。 #技術書典 の戦利品です！どんどん読んでいくぞ！ pic.twitter.com/LLPGz6mSdO— もっと@技術書典6 赤字 (@mottox2) April 15, 2019

今年に入って見つけた作図、画像生成系のサービスをまとめてみました。 Blobmaker 最近見かけることが多くなった、丸みのある形状をランダムで生成する画像メーカー。 色や複雑度、コントラストを設定し、図形を生成します。 生成した画像はSVGで保存できるので、生成した画像と、別のフラットデザイン系のイラストを組み合わせるとそれっぽい画像が出来上がります。 単体で使用するというよりは、他の要素と組み合わせてビジュアルのクオリティを上げる利用法になりそうです。 （このサービスは何故かGatsbyJS製です、作っている会社のページもGatsbyJSなので揃えているのかも） Icograms 3D Map Online Designer FFタクティクスのようなクアッドビューな画像を作れるサービスです。 使える画像パーツが豊富に用意されており、それらの画像を組み合わせるだけでそれっぽい画像が作れます。 インフォグラフィック用途のものを始め豊富なテンプレートが用意されており、いたせりつくせりなサービスです。 Pinterestで「icograms」と検索すると作例が見れます。本当にクオリティが高い… https://www.pinterest.jp/search/pins/?q=icograms&rs=typo_auto_original&auto_correction_disabled=true Whimsical 個人的に一番気になっている作図サービスです。 サービスとしてはFlowcharts、Wireframes、Sticky Notesの3つが用意されており、スクショはFlowchartsのものです。 普通の作図系ツールは要素間をつなぐのに自分で矢印を設置する必要がありますが、このサービスのFlowchartsはつなげることが前提になっているので、要素をつなぐ・グリッドを揃えるような操作が簡単です。 個人サービスとして作図系のサービスを考えてそれの調査を兼ねているので、かなり偏りのある内容だったと思います。