NetlifyキラーのVercelでウェブサイトをホストしたら簡単すぎて笑顔になった | DevelopersIO
最近話題のVercelを試してみました。競合のNetlifyと同様に、ビルドとホスティング他をまとめてやってくれます。Netlifyと比べて1人で開発をするならほぼフル機能が使えますし、無料プランのままでも100回/日までデプロイできるのが利点です。 前提 Next.jsと親和性の高いVercelですが、今回アプリはGatsby + Contentfulで構築しています。 詳しくは過去に書いた記事がありますので、下記の「1. Contentfulの準備」「2. Gatsbyアプリの立ち上げ」を参考にしてください。 CircleCI × Contentful × S3で作るJamstackなブログ環境。 また、Githubリポジトリを作成し、masterにソースコードをプッシュしておきます。 Vercelにアプリをデプロイする https://vercel.comにアクセスし、「Sta
全文検索SaaSのAlgoliaを使って、DynamoDBのデータを柔軟に検索する | DevelopersIO
はじめに この記事は Serverless Advent Calendar 2020 12日目の記事です。 CX事業本部の佐藤です。AWSのサーバーレスでアプリケーションを構築する際には、DynamoDBをデータベースとして選択するのはよくある構成かと思います。DynamoDBはNoSQLデータベースの一種なので、RDBMSのようなSQLを使った柔軟な検索などはできません。そのため、DynamoDBの検索機能だけでは要件を満たせない場合は、RDBを使う、DynamoDBとRDBを併用して使う、Elasticsearchなどの全文検索サービスを使うなどの方法があります。そこで今回は、DynamoDBを使ったサーバーレスWeb APIを題材に、全文検索SaaS のAlgoliaを使って、DynamoDBのデータを柔軟に検索できるようにしてみたいと思います。 この記事で作る構成 この記事では、以
microCMS + Gatsby + GitHub Actions + S3 でJamStackのチュートリアル | DevelopersIO
What is Jamstack? ここ数年でよく聞くようになったワード。 Jamstackとはウェブサイトを構築および運用するための、技術の組み合わせです。 JavaScript・API・事前にレンダリングされたMarkupの組み合わせでJamStackとのこと。 (以前はJAMStackといってたけど、最近はJamstackだったりする) Jamstackは、 「ウェブをより速く・より安全に・より簡単に拡張できるように設計されたアーキテクチャ」であり、 生産性を最大化するツールやフレームワーク、ライブラリやワークフローなどを 組み合わせて構築されるもの、とのことです。 ※jamstack.orgより 従来のCMSではアクセスがあったとき動的にページを生成しますが、 Jamstackではデプロイ以前に必要なページを生成します。 具体的には、下記。 Webサイトのフロントエンド全体(HTM
Git / GitHub を使用したチーム開発時のガイドラインを制定しました | DevelopersIO
開発時にはみなさん Git や GitHub を使うと思いますが、使い方についてチームメンバー間で微妙に認識の違いがあると進捗を妨げてしまいます。それを防ぐためにガイドラインを定めてみました。 ちなみにこれは CX 事業本部の Tech Lead のお仕事紹介第 1 弾のポストです。 この記事の英語版も書きました。 前提 CX 事業本部ではクライアントからの開発案件や自社サービスの開発をしていますが、その際に有用な（と考えている）ガイドラインです。 様々な事情でチームメンバーが変更になる可能性があり、新規メンバーの立ち上がりを支援する意味合いも込めています。そのため、開発効率をなるべく落とさずに効果的なスキルトランスファーが実施できることを主眼としています。 ガイドライン 定めたガイドラインの全文を貼ります。 3 つのセクションに分かれています。 commit 時のガイドライン avoid
Netlify CMSを試してみた | DevelopersIO
しばたです。 AWS Amplify ConsoleやGitHub Pages、Netlifyなどの静的なサイトをホストするサービスはいろいろありますが、非エンジニアによる運用を考えた場合(ヘッドレスではない)CMSの様な管理画面が欲しくなります。 調べてみたところNetlifyではホストしているサイトにCMSとしての管理UIを提供するNetlify CMSというツールがあることを知ったので試してみました。 セットアップ Netlify CMSでは既存のサイトに機能を追加させることもできますが、今回はお試しなのでNetlifyが用意するテンプレートを使いサイトに機能が組み込まれた状態からセットアップしてみました。 最初にNetlify CMSのサイトにアクセスし「GET STARTED」のボタンをクリックしていきます。 するとNetlifyで対応している静的サイトジェネレーターを使ったテン
WebサイトのGDPR対応用パッケージを作ったので、GDPR準拠のランディングページを作ってみた | DevelopersIO
GDPRの施行が迫る中、いくつかの著名サービスがGDPRの趣旨を正しくとらえずに回避する手法で不誠実に対応していると批判されています。 例えばTwitterは、広くソーシャルログインを提供しているにも関わらずユーザーのローカルストレージの使用に選択権を与えず、複雑なプライバシーポリシー文書とともに「嫌なら見るな」「見ているということは合意したことだ」という旧態然とした運用を行なっているためこの批判を浴びています。 ドイツおよびヨーロッパのデータ保護やセキュリティ標準を多く作り出してきた DSK: Datenschutzkonferenz は、今年4月にWebトラッキングはオプトアウトではなく明確にオプトインで実装せよと声明を出しています。 9. Es bedarf jedenfalls einer vorherigen Einwilligung beim Einsatz von Track
DNSを基礎の基礎から学びたいあなたに最適の１冊！「DNSをはじめよう」 | DevelopersIO
ご機嫌いかがでしょうか、豊崎です。 ちょっと時間が経ってしまいましたが、先日の技術書典４で購入した「DNSをはじめよう」を読む時間がようやく作れました。とてもわかりやすく、知識ゼロからでも読める良書だったためおすすめしたくポストします。 「スラスラ読めて、手を動かして身につけられる良い本でした。」by 豊崎 Chapter1：ドメインとWhois ユー、とりあえずドメイン買っちゃいなよ（意訳）みたいな感じで、本のド頭からドメインを購入を進められますw 確かに習うより慣れろかもしれません。ドメインによっては非常に安価で購入ができ手を動かして理解できるので良いアプローチだと思いました。 ドメインを販売している店の説明も丁寧で、その中でレジストリ、レジストラ、Whoisの説明をわかりやすくしてくれます。 Chapter2：DNSの仕組み ネームサーバとフルリゾルバからDNSと名前解決の流れを説明
[レポート] 『きれいなcommit, pull requestを知りたい/作りたい方のためのgit勉強会』に参加してきました | DevelopersIO
はじめに こんにちは、クラスメソッド最年少らしい黒澤です。 先日、『きれいなcommit, pull requestを知りたい/作りたい方のためのgit勉強会』 というものに参加してきましたので情報を共有します。 情報 日時 : 3月27日（火）20:00-21:30 場所 : 東京都渋谷区道玄坂1-9-5 渋谷スクエアA 11F 【勉強会】きれいなcommit, pull requestを知りたい/作りたい方のためのgit勉強会 スライド @imaizume さんに講師をしていただきました。 この勉強会ではタイトル通り、きれいな commit, pull request というテーマについてお話をいただき、 そのためのテクニックなどもご紹介いただきました。 きれいな commit を積む目的 commit : 変更の塊 変更には必ず意図がある。commit に含まれる変更の意図は見えるべ
![[レポート] 『きれいなcommit, pull requestを知りたい/作りたい方のためのgit勉強会』に参加してきました | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/449a6ff1c4f7545a1c9c8678f784a4711116a965/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2015%2F01%2Fgit.png)
[sketch] Prottyping機能を試してみました #sketch | DevelopersIO
デザイナーの たなか ゆきこ です。 デザインを行うときにかかせないのが、プロトタイピング。 2018年3月、sketch にとうとうプロトタイピングがやってきましたので、早速試してみたいと思います。 公式：https://sketchapp.com/ https://sketchapp.com/docs/prototyping/ Sketch の version を確認 プロトタイピングは、Sketch 49 のアップデートで使えますので、ご自分の Sketch バージョンを確認しましょう。 Sketch 上部メニューの【About & Registration...】を選ぶと確認できます。 プロトタイピングでは、以下ができるようになっています。 オブジェクトを選択しての画面遷移指定 ホットスポット（エリア）を作成からの遷移 プロトタイプを開始するアートボードを指定 プレビュー確認 他に
![[sketch] Prottyping機能を試してみました #sketch | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/9107e74b02d950e01c757f911caa1a9b0799d7e5/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2018%2F03%2Fsketch4icon.png)
プロセッサの脆弱性「Meltdown」と「Spectre」についてまとめてみた | DevelopersIO
森永です。 新年早々大変な脆弱性が出てきてセキュリティクラスタがざわついてます。 内容によって2つの脆弱性に分かれていて、「Meltdown」と「Spectre」と名前がつけられています。 現在使用されているほぼ全てのCPUにおいて対象となりうるという相当影響範囲が広い脆弱性です。 まだ詳細が公開されていない部分もありますが、パッチで対処できる脆弱性ですので落ち着いて対応し、続報を待ちましょう。 現在分かっている範囲の情報をまとめます。 Meltdown and Spectre 概要 今回の脆弱性は大きく3つに分けられます。 Variant 1: bounds check bypass (CVE-2017-5753) Variant 2: branch target injection (CVE-2017-5715) Variant 3: rogue data cache load (CV
【登壇資料】目的別、サーバーレスアーキテクチャの教科書！これのときはこう！【アーキテクチャ20連発】 #cm_osaka | DevelopersIO
大阪でサーバーレスの話をしてきました クラスメソッドの開発を知る！大阪勉強会 第7回 これから始めるサーバーレス！〜最新サービス使いこなし術〜で スピーカーとして登壇しました。参加率が非常に高く、多くの方にご参加いただきました。誠にありがとうございました！ 本記事では、勉強会でお話しした「目的別、サーバーレスアーキテクチャの教科書！これのときはこう！」の発表資料を公開します。 発表資料 内容 本セッションでは、これからサーバーレスを始める人向けに、サーバーレスとは何か？という話から、具体的にどのようなアーキテクチャを構築するのか？というお話しをさせていただきました。 サーバーレスアーキテクチャパターン 本セッションでは、サーバーレスアーキテクチャのパターンを20種類ご紹介しました。サーバーレスと言えるアーキテクチャは20種類では語りきれないほど沢山ありますが、今回は独断と偏見で選んでみまし
Backlog APIを使ってBacklogに課題を登録する | DevelopersIO
弊社では、プロジェクトの課題管理にBacklogと呼ばれるサービスを利用しています。 お仕事の関係でbacklogの課題を自動生成する必要があり、せっかくなのでBacklog APIを使って課題の登録を行う方法について調べてみました。 APIキーの発行 Backlogの認証は、APIキーを利用する場合とOAuthを利用する場合の2通りがあります。今回はAPIキーを用いてAPIの操作を行います。 APIキーは、[個人設定]->[API]から、「登録」ボタンを押すことで発行できます。発行後は、下の画面にAPIキーが表示されるので、これを用いてAPIの操作を行います。 課題の登録 課題登録の動作確認用のスクリプトは以下のようになりました。 space_key, project_id, issue_type_idなどの情報は別途APIから確認しました。 import requests BASE_U
【レポート】UX、デザイン思考、サービスデザインのための「現場で使えるカスタマージャーニーマップ入門」に参加してきました | DevelopersIO
【レポート】UX、デザイン思考、サービスデザインのための「現場で使えるカスタマージャーニーマップ入門」に参加してきました こんにちは。kobayashi.miです。先日株式会社アイ・エム・ジェイさん主催で行われた、UX、デザイン思考、サービスデザインのための「現場で使えるカスタマージャーニーマップ入門」の様子をレポートします。カスタマージャーニーマップを作成するのは初体験。実際にやってみてつまずいたところも含めて、正直な感想をレポートしたいと思います。 イベント概要 2016年のワイワイCAFEでは、「UXデザインを学んでいるもののなかなか活かせず悩んでいる方」へ向けた、自分の仕事をデザインするためのセミナーを開催いたします。 今回はUXデザインの手技法でよく知られている、「カスタマージャーニーマップ」について取り扱います。 ワイワイCAFE初めての、カスタマージャーニーマップを題材とした
これからはじめるGulp #16：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る | DevelopersIO
これからはじめるGulp #16：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る はじめに 前回のこれからはじめるGulp（15）：gulp-responsiveプラグインを使ったレスポンシブイメージ作成の自動化でNode.js向け画像処理ライブラリを使ったレスポンシブイメージ作成の自動化を行いました。今回はより手軽に使えるgulp-image-resizeプラグインを使いサムネイル画像を作ってみたいと思います。 gulp-image-resizeについて gulp-image-resizeは画像のリサイズや切り抜きができるプラグインです。gulp-image-resizeを使うにはImageMagickかGraphicsMagickが必要です。 ImageMagick or GraphicsMagickのインストール どちらもHomebrewを
快適 Markdown ライフを送ろう！Mac で使える Markdown 支援ツール6選 | DevelopersIO
Markdown 形式のドキュメントを快適に書こう ちょっとしたメモから Wiki のような文書まで、幅広く利用されている Markdown。私も簡単なメモなどや外部メディア記事の原稿の執筆などに利用しています。 適当なテキストエディタで適当に書くだけでも良いのですが、Mac で Markdown 形式のドキュメントを書く上で便利そうなツール (プラグイン) がいくつかあったので、個人的なまとめを公開したいと思います。 Sublime Text 3 + 各種プラグイン Markdown 形式のドキュメントの作成には、主に Sublime Text 3 を使っています。Sublime Text は言わずと知れた有名テキストエディタで、今やテキストエディタの代表格にまで上り詰めました。バージョン2で一躍有名となり、現在はバージョン3が主流になっています。 Package Control のイン
[Gulp.js] タスク単位のファイル分割 | DevelopersIO
車輪開発大好きおたいがです。こんにちは。（挨拶） 今までタスクランナーツールは Grunt を使用していたのですが、Gulp ( ガルプ ) は、Grunt よりも定義ファイルの記述が簡潔だと評判が良いらしいのでデビューを果たしました。 ざっくり触ってみたところ、かなりシンプルであることは分りました。ただそれでも、開発中に機能 ( タスク ) を追加していくたびに、どうしても設定ファイル (gulpfile.js) は肥大化していきます。そんな状況を極力減らすために、タスク単位でファイルを分割することを試してみたのでまとめてました。 解説前に 当ブログに Gulp のインストールから実行までの入門記事がありますので、何もご存じない方は併せてご覧ください。 【Gulp.js入門】新鋭フロンエンド・タスクランナーツール を試してみました。 例 : 任意の JavaScript ファイルの結合お
[Polymer] Material Design を使った Web ページを作ってみる | DevelopersIO
Material design with Polymer Google I/O 2014 で発表になった「Material Design」ですが、Web の場合は Polymer で提供されています。Polymer は Web Components を使ったフロントエンドフレームワークです。昨年の Google I/O で発表されました。 ということで、リファレンスを参考に Polymer を使って Material Design の Web ページ制作を試してみたいと思います。 デモで Material Design の世界を体験してみよう その前に、Material Design でどのような Web ページが作れるのか、デモの Web ページが公開されているので、ちょっと触ってみましょう。以下の 3 つのデモが公開されています。 Topeka (クイズアプリ) Paper Eleme
![[Polymer] Material Design を使った Web ページを作ってみる | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/72ef0cd6f2febb767fc5805699941053937cbb1b/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F06%2Fpolymer.png)
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
D3.js – 円グラフのポイント | DevelopersIO
はじめに 前回に引き続き、今回はD3.jsで円グラフを表示する上でポイントとなる点を取り上げ また公式サイトのサンプルソースを解析してみたいと思います。 ポイントについて D3.jsで円グラフを描くには ・データ一つ一つを表すパイ(扇)を設定する ・各パイに円弧を指定して円グラフとする という手順となります。 それらパイ(扇)、円弧を描くのが、D3.jsの以下の関数となります。 ・d3.layout.pie パイを作成します。 ・d3.svg.arc arc(円弧)を作成します。 詳細については、公式サイトのAPI Referenceを参考にしてください。 API Reference · mbostock/d3 Wiki · GitHub サンプルソース 上記のポイントを踏まえ、公式サイトに乗せられている Pie Chart を解析し、コメントを追加しました。 <!DOCTYPE html
[ Middleman で超速プロトタイピング ] #01 Middleman の基礎を一気に学ぶ | DevelopersIO
前回は Middleman を習得する前準備として Haml という HTML の拡張メタ言語について学びました。 #00 Haml 再入門 Haml は Middleman においてレイアウトファイルやテンプレートファイルを作成するのに使用します。デフォルトでは Haml ではなく ERb という Ruby 標準のテンプレートファイル形式が使われており、こちらは PHP や JSP と非常によく似た書式となっています（※拡張子はerb）。 身も蓋もないことを言ってしまうと、Haml を知らなくても ERb 形式で書くことで Middleman を使うことは可能です。ソースコード自体も標準の HTML 内に Ruby のコードが埋め込まれたような見た目なので、学習コスト自体は ERｂ のほうが低いかもしれません。しかしそれを考慮したとしても、コーディング自体の効率性やコードの見通しの良さか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
