サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
画力アップ
mottox2.com
Next.jsのStatic Generationを追っておく際に見たページをまとめた。簡単に要点をまとめてはいるが、詳しくはリンク先のオリジナルを見てほしい。 > 2019 in Review2019 in Review Guillermo Rauch(@rauchg) ... Vercel社(元ZEIT)のCEO のブログ記事 2019年はJamstackが伸びた年であること Staticは高速で安定性が高い SSGやClient JS/APIでdynamicを実現できること Next.jsはJamstackの機能を網羅している Static GenerationとかAPI RoutesとかDynamic Routing Vercelを使えば便利だよと等々 > Static Generation / SSG ImprovementsStatic Generation / SSG Imp
npmにパッケージを公開したけど、今はもうメンテナンスしていないパッケージはないだろうか?自分にはある。 とあるコードを書いている最中にnpmに非推奨(deprecated)の概念があることがわかったので手順を記録しておく。忘備録的な記事です。 > 手順手順 調べたところ、npmのドキュメントがあった。 https://docs.npmjs.com/cli/deprecate.html npm deprecate <pkg>[@<version>] <message>という形式で実行できる。今回は以下のコマンドを実行した。
本ブログはGatsbyを使って、esa.ioで書いたコンテンツをNetlifyで配信しています。 esa.ioは情報共有サービスとして作られているので非常に書きやすいサービスです。しかし、(意図しない使い方をしているので)文章以外の情報を持たせるには不向きです。 ブログでシリーズ物の記事を書いてみたいが、連載情報をesa.ioに持たせるのは難しい。ただ、見た目とコンテンツの密を避ける意図でブログのソースコードには依存しない形にしたいと考えていました。 そこで目をつけたのが日本製のHeadless CMS「microCMS」です。 > Headless CMSとmicroCMSHeadless CMSとmicroCMS 本ブログでも何度か取り上げていますが、簡単にHeadless CMSについて説明します。 通常WordPressのようなCMSはコンテンツの管理層とプレゼンテーション層を持つ
Wordで組版をしていくにあたって、Wordのアプリケーション上で文章やサンプルコードを入力していくのは現実的ではありません。 見出しのスタイルを当てたり、シンタックスハイライトを手動で当てていくのはMarkdownになれた人間がやるべきことではありません。ツールにまかせるべきです。そこで利用するのがPandocというツールです。 > はじめてのPandocはじめてのPandoc > Pandocとは?Pandocとは? Pandocはドキュメントの形式を変換するツールで、MarkdownやPDF、ePub、Wordなどの多くのフォーマットに対応しています。今回は、MarkdownからWordに変換する用途でPandocを利用します。 Pandoc - About pandoc > PandocのインストールPandocのインストール Pandocは公式サイトからインストールします。 ター
もう2019年の終わりが見えてきた。今年の自分は何をやったのか、どういうことを考えていたのか、どういった反省が残ったのか、ブログ記事に残しておこうと思う。 > ユーザーにより近い仕事をユーザーにより近い仕事を 仕事に関してはよりユーザーに近い側へ移行していったということに尽きる。 去年は『専門性を持ちたい』という気持ちでやっていたが、今年はiOSアプリをSwiftで始めたり、Railsの仕事を辞めたり、デザイナーの仕事を(数年ぶりに)始めたりした。かなり変化の激しい年だった。 Railsの仕事を辞めたのは、実力不足といった理由ではなく、ユーザーに近い側の実装をしたい気持ちが強くなったからだ。iOSの仕事をしたのもフロントエンドの一種なのでやる意義を感じたからで、Webにはないアーキテクチャの議論、iOS開発の事情・歴史などWebのフロントエンドにも応用できる知識と経験を積むことができた。
こちらは 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(create-react-app)で十分じゃない?」と思う方
GitHubが提供しているGitHub Actions(beta)は「ソフトウェアワークフローを簡単に自動化できる」とあります。その中にcron形式でワークフローを実行することが出来る仕組みがあり、定期的に行いたいタスクを簡単に実現できるのでご紹介します。 ※ GitHub Actionsは現在ベータ版です。利用する際には公式サイトよりベータ版に登録する必要があります。 > GitHub ActionsのscheduleイベントGitHub Actionsのscheduleイベント > GitHub ActionsGitHub Actions GitHub Actionsでは複数のアクションを組み合わせることでワークフローを定義していきます。 その中でワークフローの実行をトリガするイベントという概念があります。 例えば、IssueやComment、Pull Requestが作成されたタイミ
ここ最近、SPAを作るフロントエンドエンジニアを中心に、アプリケーションではないウェブサイトもReactやVueで作る動きが活発になってきました。 そもそもなぜReactやVueを使ってウェブサイトを作るのか? これらの技術を使うことによって何が解決するのか? 本記事ではそういった問いに対する自分の考えを示します。 > SPA以前のウェブサイト制作SPA以前のウェブサイト制作 注)現在進行系でも非SPAなウェブサイト制作が主流です。 現在主流な制作手法は、WordPressに独自のテーマを実装して制作する方法です。 PHPなどで動的にHTMLを生成し、大きなCSS・JSが一枚というケースが多いです。 もちろん、モダンフロントエンドを取り込んでいる場合もあって、次のような工夫をしていることが多いです。 SCSSのようなメタ言語でCSSを記述し、保守の手間を減らす。 webpackなどのバンド
自分はLT資料を作る際に、『Carbon』というおしゃれなコード画像を生成するWebサービスを利用しています。今回はCarbonをインスパイアした『Silicon』というRust製のCLIツールを発見したので紹介します。 こういった画像がCLIで生成できます。 > インストール方法インストール方法 Rustをインストールしている前提で次のコマンドを実行します。
技術同人誌やブログを書く上で外せないのがスクリーンショットを取ることです。 同人誌を5冊書いていく経験の中で慣れてきたので、自分がスクリーンショットを撮る時に使っている方法を紹介します。 > Commandからスクリーンショットを撮るCommandからスクリーンショットを撮る Chrome DevToolsに慣れている方はご存知かもしれませんが、ChromeにはCommandという概念があります。 Cmd + Option + iでDevToolsを開きCmd + Shift + Pを押してください。 すると次のような入力フォームと項目が出現します。 フォームに文字を入力すると、Commandを絞りこむことができEnterで指定したアクションを実行することが出来ます。 ここにある、「Capture area screenshot」、「Capture full size screenshot
ZEIT社が開発しているReact製のフレームワークNext.jsですが、現在v.8.1.1のカナリー版がリリースされています。 v.9では様々な変更が入っていますが、個人的に注目しているのはTypeScriptが標準で利用可能になった点です。そこで備忘録を兼ねて型の書き方を整理してみました。 カナリー版の段階で書いた記事を更新しました。 > Next.js 8からの変更点Next.js 8からの変更点 TypeScriptを利用するためにwebpackの設定を行う@zeit/next-typescript パッケージが不要になりました。 このパッケージはnext.config.js内で利用しwebpackとbabelの設定を弄る役割を担っていました。内部にビルドインになりました。 型定義は@types/nextのものを使っていましたが、next.jsの本体側で型定義を持つようになりました
Shifterは株式会社デジタルキューブが運営する「Serverless Static WordPress ホスティング」と銘打っているサービスです。 通常用途でWordPressをする際は常にWordPressが動くサーバーが立ち上がっていますが、Shifterはコンテナ技術を使うことで必要なときにWordPressを立ち上げ、静的ファイルを生成する処理を行うことで、外部から見ると単なる静的ファイルをホスティングしているだけになります。 WordPressが起動しているわけではないので、脆弱性との戦いからの開放・ページ表示の高速化、メンテナンス性の向上といったメリットを得ることが出来ます。 補足で、WordPressの拡張機能であるStaticPressは起動しているWordPressから静的ファイルを生成するものなので、Shifterとは大きく異なります。Shifterはホスティングサ
この記事を見た@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.
前回に引き続き、技術書典6にサークル主として参加させていただきました。 技術同人誌界隈はかつてない盛り上がりを見せており、今回のサークル当落発表の際は地獄のようなタイムラインになっていました。そういった状況でサークル主として参加できたのは幸運でした。 今回の総括ですが、本のクオリティに関しては満足していますが、本を書く以外の行動が酷すぎて、反省点の多い会になりました。 今後サークル参加したい人に向けて一つのケースとして参考になればと思いブログで振り返ります。 > 頒布したもの頒布したもの 今回は新刊で「Netlify Recipes」、既刊を改訂した「Gatsby Guidebook」を頒布しました。 「Netlify Recipes」はレシピ形式でNetlifyの機能や活用法を紹介する本です。どういった時にどういう機能を活用するのか、そういった機能を応用したらどんなことができるのか?など
技術書典6「か67」でNetlifyとGatsbyの本を頒布します。 Netlifyは92ページ、Gatsbyは100ページ超(執筆中)でどちらとも¥1,000で頒布を予定しています。 興味のある方はサークルページからチェックをしてもらえると嬉しいです。 > 本について本について Netlify本「Netlify Recipes 30」は新刊、Gatsby本「Gatsby Guidebook」は既刊の改訂版になります。 今回はデザインのアドバイスをタカユリさんにしてもらい、前回の技術書典で頒布したものよりよいものになったと思います。お忙しい中、ありがとうございました! > Netlify Recipes 30Netlify Recipes 30 前回の技術書典では「Netlifyで始めるサーバーレス開発」という本を出しましたが、今回はNetlifyのHosting, Forms, Func
自分はWrite Blog Every Weekという週に一回ブログを書くコミュニティに所属しています。 コミュニティ内ではRSS Feedに基づいてブログを書いたかを判断するBotが整備されており、ブログ管理者がそのBotに対してRSSのURLを登録するフローを取っています。 しかし現状、1人が登録できるRSSは一つまでという制約があり、ブログとQiita、noteを併用して認識させることが難しくなっています。 正攻法で言えばプルリクエストを出そうという話になります。しかし、AWS LambdaやDynamoDBが使われておりデバッグも面倒なので(自分の登録する)RSSに複数のサイトの情報をまとめるという変則的な方法を取って解決することにしました。 その際に、Gatsbyのgatsby-plugin-feedを使って複数のサイトをまとめたのでその方法を紹介したいと思います。 該当のPul
2019/02/06にReact16.8がリリースされ、16.7のalphaから入っていたReact Hooksが安定版にやってきました。 そこで今回このブログで使われているReactを16.8に上げて、ステートフルなコンポーネントをReact Hooksを使いFunction Compoenentに書き換えてみました。 React Hooksの解説をした記事はたくさんあると思うので、今回は書き換えてどう変わったかを見ていきましょう。 該当する部分はHeaderの検索フォームです。 プルリクエストだけ見たいかたはこちら。 https://github.com/mottox2/website/pull/39 > 書き換えのポイント書き換えのポイント > stateの書き換えstateの書き換え これはいろんな記事で言及されているuseStateを用いて書き換えます。 useStateに初期値
Netlifyには優れたUIを持つWeb画面が用意されていますが、CLI(コマンドラインインターフェース)も用意されており、CLIのみでのデプロイも可能になっています。 通常の開発ではWeb UIで十分ですが、検証中などGitの操作なしでサイトに反映できるので便利です。 netlify-cli@2.6.3で確認した動作を前提に進めます。 > インストール方法インストール方法 npmがインストールされていることが前提で次のコメントを実行します。
import React from "react"; import ReactDOM from "react-dom"; import Hello from "./Hello"; import "./styles.css"; const App = () => { return ( <div className="App"> <Hello name="an" /> <Hello name="en" /> </div> ); }; const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); import React from "react"; const Hello = props => { return <p>Hello {props.name}</p>; }; ex
あけましておめでとうございます。今回は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エンジニアがテーマを見つける方法について書いています。 > 自分がやっていることから見つける自分がやっていることから見つける 一番見つけやすいのが、今自分が取り組んでいる技術をテーマにすることです。仕事でプログラミングをやっている人が取り組んでいる技術であれば、濃い内容の技術同人誌になるでしょう。 ただ、「巷に同じテーマの技術書は溢れてる」「すごい人がいるのに自分が書いていい
2018年5月に公開を始めた当ブログですが、Gatsbyをより多くの人に使ってもらいたいと考えソースコードをオープンにしたので、ブログで用いている技術について説明します。 > 当サイトについて当サイトについて Gatsbyでesa.ioのデータを使って静的サイトをビルドする構成のリポジトリです。Netlifyでホスティングしています。 https://github.com/mottox2/website スターがつくとやる気がでます。 > ポイントポイント Gatsbyについて少し知っている前提で中身を説明します。 > esa.ioをソースとして扱う(gatsby-source-esa)esa.ioをソースとして扱う(gatsby-source-esa) Gatsbyではファイルシステム上のファイルだけでなく、Web APIなどを経由した様々なデータをソースとして扱う仕組みを持っています。
今までの記事 GatsbyJS v2 はじめの一歩 (1) 開発環境の立ち上げ GatsbyJS v2 はじめの一歩 (2) 実際にページを作る GatsbyJS v2 はじめの一歩 (3) ページにスタイルを当てる GatsbyJS v2 はじめの一歩 (4) gatsby buildとデプロイ Webページを構成するのに必要なのは、HTML, CSS, JSとDataです。Dataというのは stringという文字列だったり、42という数字だったり、{ pizza: true }のようなオブジェクトで表現できます。データはReact Componentの外にあるべきという考えに基づいており、マークダウンやCSVファイル、一般的なデータベース、Web APIなども含めてデータ層で持っておき、そういったデータを簡単に扱えるようにしています。 GatsbyJSではデータ層からReactコンポ
aircloset社で行われたWeb界隈LT会で話した「サーバーサイドの人にも伝えたいJAM Stackと静的サイトのイマ」です。 > 静的サイトと動的サイト静的サイトと動的サイト > 静的サイト静的サイト 早くて、落ちないし、セキュリティで心配することも少ないけど、自由度低いよね。 > 動的サイト動的サイト 運用面倒。スケーラビリティ的に不利 攻撃される。 速度的に不利。 > 静的サイトジェネレータ静的サイトジェネレータ 動的に静的サイトを生成するジェネレータ 基本的にGitHubのpushと連動してビルドするような感じ > 時代は変わっている時代は変わっている monolithic services => micro services FTP => GitHub中心の開発環境の変化 PC => スマホシフト > GitHubを中心とした開発者の環境の変化GitHubを中心とした開発者の
静的サイトジェネレーターの中でも、自分はGraphQLのデータ層を採用しているGatsbyJSを激推ししている。 しかし、GatsbyJSはビューをReactで書く必要があり既存のサイトを移植するというのが大変だった。 今日見つけたのは、GatsbyJSにインスパイアされVue.jsでビューを書けるGridsomeという静的サイトジェネレーターである。 まだバージョンは0.2.2なので、ファーストインプレッション程度に思ってもらいたい。 複数のデータソースを元に、静的サイトを生成する図はほとんどGatsbyのそれと変わらず、Vue.jsでビューを書くことが出来る。 > WordPress Starterの観察WordPress Starterの観察 例えば、公式のWordPressのstarterを取り上げてみる。 @gridsome/source-wordpressのようなソースデータを
池袋で行われた日本最大の技術書の同人誌即売会の技術書典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アーキテクチャ導入 エンタメ系サービス 立ち上げからデザイン&フロントエンドで参加 残念ながらクローズ 人材系サービス サービスのリブ
本ブログでも使用されているReactによる静的サイトジェネレーターのGatsbyJSの入門記事です。 > 開発環境を整える開発環境を整える GatsbyJSは静的サイトを生成するためにNode.jsを使用します。 また、プロジェクトの作成にはgatsby-cliというCLIツールを使うのでインストールしておきましょう。 > TODOTODO Node.jsをインストールする v6以上が最低要件ですが、v8以降であると書きやすいと思います。 Gatsby CLIをインストール npm install -g gatsby-cliを実行 > Gatsbyのプロジェクトを作成Gatsbyのプロジェクトを作成 先程インストールしたgatsby-cliを使ってプロジェクトを作成します。gatsby-cliでは引数にGitHubのURLを渡すことで利用するテンプレートを変更することが出来ます。 GitH
ここのところstyled-componentsでのAtomicDesignの実装を考えていた。共通コンポーネント(Atomっぽいの)を書くときに役立つTips。 それ以外のときはあまり役立たないかもしれない。基本TypeScriptで真価を発揮すると思っています。(エディタ補完的な意味で) > react-routerのLinkにstyled-componentsを使いたいreact-routerのLinkにstyled-componentsを使いたい styled.h1, styled.pみたいにHTMLにもともと存在するタグにstyled-componentsを使うのはよくある。Linkはどうなの?って聞かれたのでその時の見せた例。 調べてみたらDocsのstyling-any-componentsに書いてあった。 import styled from 'styled-componen
次のページ
このページを最初にブックマークしてみませんか?
『mottox2 blog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く