こんにちはかみむらです。 先日柴田さんが公開していた、Reactのモーダルコンポーネントを簡単に作成できるライブラリ react-hooks-use-modal をmicroCMSのOrganizationに移行しました。 こちらがGitHubのリポジトリです。 https://github.com/microcmsio/react-hooks-use-modal こちらはデモになります。 https://microcmsio.github.io/react-hooks-use-modal/ react-hooks-use-modalはmicroCMSの管理画面内部にも使われています。例えばWebhook追加時のモーダルコンポーネントです。 モーダルのコンポーネントは1から実装すると非常に工数がかかりますが、react-hooks-use-modalを使えば少ない工数で実装することができま

はじめに 2020年新卒入社で、現在ZOZOWEB部所属の武井です。ZOZOTOWNのWebフロントエンド開発を担当しています。私は入社以来オフィスに2度しか出社したことがありませんが、そのうちの1度はスタッフインタビュー記事の撮影のときでした。アートがたくさんある素敵なオフィスですが、それ以降出社できていません。まさか新卒1年目からフルリモート勤務をすると思っていませんでしたが、先輩スタッフが仕組み作りをしてくださっていたおかげで快適に働けています。 さて、本題です。ZOZOTOWNではタイムセール、ショップ限定クーポン、抽選プレゼントなどのキャンペーンを期間限定で実施しています。このキャンペーンをより際立たせるためにキャンペーンページを作成し、ホーム画面やメルマガなどを通じてお客様にお届けしています。しかし、このキャンペーンページの作成が必要になった場合、エンジニアが都度実装しており、

こんにちは、柴田（@shibe97）です。 突然ですが本日、microCMSブログのソースコードをオープンソース化いたしました！ リポジトリはこちら。 https://github.com/microcmsio/microcms-blog 経緯microCMSを利用したJamstack構成のWebサイトはここ1年でだいぶ広まりつつあります。 しかし、Jamstack構成のサイトは一覧画面 / 詳細画面を作成するのは非常に簡単ですが、そこから先を実装しようとすると途端に難易度が上がります。 ネット上にはまだまだ知見は少なく、実案件で投入できるほどの実力を持つエンジニアはそう多くはないという印象です。 そこで、実稼働しているmicroCMSブログのソースコードが参考になるのではということで、今回オープンソース化に踏み切りました。 microCMSブログはデータソースとしてmicroCMS、フロ

この記事では、Webデザインやグラフィックデザインの制作がグンと捗る、便利すぎる最新オンラインツールをまとめてご紹介します。 通常、時間のかかってしまう面倒な作業も、これらのツールやサービスをうまく活用することで、より快適にデザイン制作をすすめることができます。お気に入りのツールを自分のワークフローに取り入れ、自分だけの爆速制作スタイルを確立してみませんか。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イラスト系ライブラリ 2. デザインコレクション 3. モックアップツール 4. デザインからコードへの変換ツール 5. Web制作お役立ちツール 6. プロトタイプツール 7. アイコン素材パック 8. 面白ツール Webデザイン制作が変わる！便利な最新オンラインツールまとめ イラスト系ライブラリ Illustrations 商用利用もでき

JAMstackってなに？実践に学ぶ高速表示を実現するアーキテクチャの構成 JAMstackは、「JavaScript」「APIs」「Markup」の3つの技術を組み合わせた、新しいWebアプリケーションアーキテクチャです。いち早くJAMstackを利用してWebサイトを作成した、寺川直宏さんと風間雅也さんにJAMstackについて聞きました。 JAMstackという言葉をご存知でしょうか。JAMstackは、「JavaScript」「APIs」「Markup」という3つの技術を組み合わせた、新しいWebアプリケーションアーキテクチャです。パフォーマンスの改善、セキュリティの担保、スケーラビリティの確保が見込めるため、フロントエンド界隈で、大きな注目を集めています。 しかしまだ登場したばかりの概念ゆえ、実例も少なく、理解しにくい面もあります。そこで、いち早くJAMstackでWebサイトを

最近、figmaを社内でも始めたのですがその魅力にドンドン引き込まれています。自身の学習も含め、これからfigmaを導入しようとする方の参考になればと思い使い方のまとめを作ってみました。 私はsketchをベースに開発することが多いのでsketch→figma視点で語ってる所が多いです。全力と言いつつ、まとめ切れていない所も多いので、不足しているところは随時更新していきます。 導入編アカウント登録 figmaの公式サイトに行きましょう！まずはアカウント登録。すべて英語ですが名前と職業を聞かれるぐらいで簡単に登録できます。またgoogleアカウントを持ってる人であれば、そちらからすぐにログインできるのでおすすめ。 ログイン後はfigmaのダッシュボードが表示されます。 webブラウザでほぼすべての機能が使えるのがfigmaの特長でもあります。 Desktop Appをインストールする やはり

テック系のウェブサービスやブログで海外風のオシャレなイラストを目にしたことはありませんか？今回は、技術ブログのアイキャッチに使える海外の無料イラストサイトを２つ紹介します。 unDraw manypixels 洗練されたテック系の世界観を作りたいときに使おう unDraw Illustrations | unDraw unDraw背景が白で基調が紫がベースのイラストが特徴のサイトです。png形式、SVG形式が選べます。 海外のイラストならではの、無駄の少ない洗練されたイラストが多いです。イラスト自体はクールな印象なので、硬い文章や真面目な記事、オシャレな記事と相性がいいです。 ちなみに、この紫の色は違う色に変えることができます。 そのため自分のウェブサービスやブログのイメージカラーに合わせることができます。試しに下の図のイメージカラーを黄色にしました。色が違うだけで雰囲気もだいぶ変わります

スマホ、スマートウォッチ、タブレット、コンピュータ、ディスプレイなど、ほとんどすべてのデバイスが網羅されたモックアップ素材を紹介します。 iPhone 11 Pro, Google Pixel 3などの最新機種をはじめ、古い機種のモックアップ素材も揃っています。

以下はAnanya Neogiによる記事、CSS can do that?の日本語訳です。 CSS can do that? CSSだけでこんなことができる、驚くべきリスト！ 注意：これらのプロパティのいくつかは、一部のブラウザで動作しません。 その場合は、@supportsを使って代替スタイルを追加することができます。 全ての例を表示するにはChromeを使ってください。 イタリック体は訳者(私だ)による補足とかです。 1. box-decoration-break このCSSプロパティは、複数の行、列、あるいはページに分割された要素のレンダリング方法を指定します。 See the Pen CSS: box-decoration-break by Ananya Neogi (@ananyaneogi) on CodePen. 2. attr() 選択された要素の値をattr()で取得でき

200 番台：成功 201 は Created、つまりリクエストの結果サーバ側でデータ作成が行われた場合に返す 202 の Accepted は、リクエストした処理が非同期で行われ、処理は受け付けたけれど完了していない場合に利用する 204 は No Conent という言葉の通り、レスポンスが空のときに返す PUT や PATCH の場合は 200 とともに操作したデータを返し（POST の場合は 201）、DELETE の場合は 204 を使うのが良い こうしておけば、どちらの場合も返ってきたデータを見れば変更が正しく行われたことが理解できる 300 番台：追加で処理が必要 300 番台のステータスコードでよく知られている利用目的は「リダイレクト」 リダイレクトの場合は Location というレスポンスヘッダにリダイレクト先の新しい URI が含まれる API の場合もリダイレクトを

ecspresso, ecschedule, lambroll を PipeCDプラグインとして動かしてみた （プロトタイプ）　/ Running ecspresso, ecschedule, and lambroll as PipeCD Plugins (prototype)

週明けに出回った、Microsoft EdgeがChromiumベースになるという話について、Microsoftからアナウンスがあった。 Microsoft Edge: Making the web better through more open source collaboration - Windows Experience Blog For the past few years, Microsoft has meaningfully increased participation in the open source software (OSS) community, becoming one of the world’s largest supporters of OSS projects. Today we’re announcing that we intend to ado

Firebase Authenticationを利用してWebサービスの運用を開始した後に、メールマガジン用に登録されたユーザーのメールアドレスの一覧を作成したり、Firebaseプロジェクト間でユーザーデータを移行したい場合があります。 そんなときは、Firebase CLIのコマンドを実行することでユーザー情報一覧をエクスポートできます。 ユーザー情報一覧をエクスポートする エクスポートするには、firebase auth:export コマンドを利用します。 $ firebase auth:export account_file --format=file_format 書式は account_file がエクスポートするファイル名、 --format=file_format は jsonか csv を選択できます。 --format オプションは、作成するファイル名の拡張子がjso

SFC, Redux, HOCなどコンポーネント指向とReact開発のキーワード CTOの Shoken です。キッチハイクでは2年前にRailsへのReact導入、1年半前に0ベースからReact Nativeでアプリ開発を始めました。この記事では、React, React Nativeで開発しているチームが共通認識したいReactの重要な概念について紹介します。 2018/11/07 追記（はてブコメントより） Reactリポジトリで名称の変更が行われ、変数名やクラス名が変更されました。いままでの Functional Component が Function Component となり、 Stateless は使わなくなって Function に統一されるようです。 Terminology: Functional -> Function Component #13775 Before

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? これなあに？ 先週は強化学習の勉強会をしました。 今週は音声処理の勉強会をやるぞということになって僕はまた焦って資料をかき集めました。 この記事は音声処理の勉強会を行うにあたって、参考になったサイト、もしくは情報をまとめたものです。 勉強会で共有するために作ったけどせっかくだしあげておくことにしました。 読んだ感想や要点なんかも簡単にまとめれたらと思います。 特に参考になった記事、重要だと思った記事には★マークをつけておきます。 僕自身が音声処理初心者ということ、短い時間でまとめたことから誤りや不適切な点があるかもしれません。 その場合

off-the-main-thread は今フロントエンドで熱いテーマの一つです。日本語圏では今ひとつ話題になってないので紹介しておきます。 off-the-main-thread の概念の大まかな概要については、Chrome 開発者の nhiroki さんの日本語の記事があるので、こちらを参照してください。 nhiroki.jp speakerdeck.com ここまでのあらすじ 従来のウェブブラウザーでは、一つの画面につき一つ割り当てられる、UI スレッドと呼ばれる名前空間で様々な処理を行ってきました。DOMセマンティクスの評価, CSS による rendering / painting、JSのScripting…。もちろん裏側ではブラウザが様々なバックグラウンドサービスに処理を委譲し、スレッドで実行され、その非同期な結果を受け取っているわけですが、少なくともUIスレッドで走るJSから

こんにちは、株式会社ピケ CTO の中西（@nakanishy）です。 Dish というランチ検索アプリのフロントエンドとデザインを担当しています。 Dish では、React Native を採用して iOS アプリの開発をしています。iOS アプリを正式にリリースしたことがなく、また React Native も初めてだったので、苦戦する場面も多々ありましたが、良かった点もたくさんありました。 この記事では、Web 開発者の視点で React Native の良かった点と悪かった点を紹介したいと思います。 React Native の良かった点 高速に開発できる React Native は、ライブリロードとホットリロードをデフォルトでサポートしているので、Web 開発をしているかの如く高速に開発が進められました。保存すると即座に変更が反映されます。また、ホットリロードの場合、状態を維