Gatsby.jsって？ この記事はGatsby.js Advent Calendar 2019 1日目の記事です。 2日目の記事は@aimofさんのJSの文法すら怪しいフロント初心者がblog用のgatsby starter（っぽいもの）を自作・公開してみたです!! Gatsby.jsはReactで作られた静的サイトジェネレーターです。内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成、などの処理を簡単に行うことができます。 静的サイトジェネレーターが何かと言うと、何かしらの言語で書かれたソースから、静的なHTML/CSS & JavaScriptを生成するツールのことを言います。 今現在どの静的サイトジェネレーターが人気かというのを一覧で見れるStaticGenサイトもあります。 Starの数を見るとあのnuxtよりも多いんですよね、日本で使っている方をあ

フロントエンドエンジニアのid:ninjinkunです。この記事は一休.comアドベントカレンダーの1日目の記事です。 一休.coｍレストランの管理画面リニューアルプロジェクトにおいて、CSSフレームワークのBulmaを導入しました。結論としては、採用して良かったと思っています。 このエントリではBulmaを選定した理由と、採用後に見えたPros / Consについて述べたいと思います。 なお今回リニューアルした一休.comレストランの管理画面の概要は以下の通りです。 レストラン店舗向けの管理画面 店舗の方と一休スタッフの両方が使う DAUは数千の規模 主な用途は在庫の管理と、プラン（コース）や席の管理 現在は店舗を限定してリリース済み 具体的には以下のような画面で構成されています。 UIフレームワークは必要か？ まずそもそもUIフレームワークは必要かという議論があります。 今回のプロジェ

ウェブブラウザを使ったVJ活動 2019/11/30 Audiovisual Workshop with TOPLAP Japan at 甲南女子大学 hitode909 はじめに、の前に いまのうちにGoogle Chromeをダウンロード、インストールしておいてください ワークショップ教材はGoogle Chromeで動作確認している Google Chrome ウェブブラウザ はじめに はじめに(15分) 今日のワークショップでやること VJについて、ブラウザについて やってみよう(30分x3で1.5時間) HTMLを書こう VJとして適した形のHTMLを作ろう コントローラをくっつけて操作できるようにしよう おわりに(15分) 今後の進め方 参考になる情報について 自己紹介 hitode909 株式会社はてな アプリケーションエンジニア はてなブログ(ブログサービス)やGigaVi

JSConfJP 2019 で使用したスライド (に次回の公演情報を追加したもの) です。 https://jsconf.jp/

こんにちは。ナビタイムジャパン Android/iOSアプリ開発担当の KSK です。 最近流行りのFlutterの流れに乗ってみたい一心で Flutterをプロダクションに導入したお話をしたいと思います。 はじめに FlutterとはGoogle製のクロスプラットフォームのアプリ開発フレームワークです。2018年12月に正式版として1.0がリリースされて以降、徐々にプロダクションに採用する企業が増えてきました。弊社でも2019年に入り、複数のプロダクトにFlutterを採用・リリースしましたので、その経緯などをご紹介します。 どのプロダクトに採用したのか？ 新規アプリケーションで採用しました。みなさんがご存知の「NAVITIME」や「乗換NAVITIME」は既に大規模なネイティブアプリが運用されており、これをFlutterで置き換える選択肢は今のところありません。既存のアプリをFlutt

Quickly and easily assess the security of your HTTP response headers

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.

どうも、まさとらん（@0310lan）です！ 今回は、普段からよく利用しているSlackを使って飛行機の料金（最安値）を手軽にチェックできるツールを作成していきましょう！ いちいちブラウザを起動してWebサイトを訪問する必要がなく、Slackから簡単なコマンドを入力するだけで最安値を即座に確認できるようになるので便利です。カスタマイズ性も非常に高く、自分の好きなように情報を制御できるようになります。 飛行機の料金を調べるのが面倒だと感じている人は特にオススメなので、ぜひ参考にしてみてください！ ■どうやって飛行機のチケット料金を調べるのか？ 今回の重要なポイントは、飛行機の料金をどのように取得するか？ ということになります。 また、個人的にはできるだけ以下の要素も含めたい… さまざまな航空会社から比較・検討したい 調べたときの最安値を知りたい 国内だけでなく海外便の料金も調べたい 簡単にプ

[レベル: 上級] この記事では、Chrome Dev Summit 2019 の ウェブの高速化に関係するセッションのハイライトをレポートします。 ページの表示速度改善のためのツールやレポート、指標などがたくさん紹介されています。 ウェブが速く ウェブは速くなってきている。 昨年との比較で次のような改善が見られる。 First Contentful Paint: 7 % 速く First Input Delay: 27 % 速く ツール ウェブの高速化にはたとえば次のようなツールを使える。 PageSpeed Insights: URL を指定してそのページのパフォーマンス状況を検証できる Search Console のスピードレポート: サイト内のページをグループ化して速度状況を可視化できる 新しい指標 スピードを測定するために新しい指標を取り入れる。 Large Contentfu

ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高

[レベル: 上級] この記事では、Chrome Dev Summit 2019 の PWA 関連セッションのハイライトをレポートします。 僕はデベロッパーではないので技術的な部分、特にコーディングについては言及しません。 テクニカルな内容は記事最後で紹介する動画でご確認ください。 では、PWA の最新事情を一緒に見ていきましょう！ ウェブプラットフォームとしての PWA 新興国のような通信環境が整っていない国々でもウェブを利用しやすくする。 スマートフォンや PC などあらゆるデバイスでウェブにアクセスできるようにする。 ネイティブアプリと同等な機能をウェブアプリでも提供することが重要。 airbnb 事例 airbnb はネイティブアプリから PWA サイトでのサービス提供に移行した。 その結果、初回訪問ユーザーの 65 % はウェブ経由になった。 成果: パフォーマンス（読み込み速度）

なぜ Day One は Markdown を捨てたのか Day One が Markdown をやめて WYSIWYG に移行した話は前書いた。 Day One がクソになった Day One 、このブログでも度々言及していて、 Markdown で日記が書けて便利だったんだけど、最近のバージョンアップ（ Mac は 2.8 以降 、 iOS は 3.0 以降）でプレー... portalshit.net 自分が知っている範囲でアンチ Markdown 勢は Scrapbox くらいしか思い浮かばず、 GitHub や Trello などのグローバル勢に加え、 Qiita やはてなブログなど日本国内向けのサービスでも当然のように Markdown が共通言語として使われているのに、その Markdown を捨てて WYSIWYG 化する1という戦略は疑問だった。 ひとむかし前の WYSI

DBの寿命はアプリより長い！ 長生きするDBに必要な設計とリファクタリングを実践から学ぶ アプリケーションの寿命よりも長く、データの追加やテーブルの変更で成長し続ける「データベース」と、どのように付き合っていけばよいのでしょうか？ 曽根壮大（soudai）さんによる寄稿です。 こんにちは。そーだい（@soudai1025）です。 新しいサービスを始めるとき、必ずと言っていいほどデータベースは利用されています。また今稼働しているサービスの多くでも、RDBMSをはじめ、いろいろなデータベースが利用されています。そんなに広く利用されているデータベースだからこそ、多くの問題の元になるのもまた事実です。 そこで今回は、Webサービスを中心にデータベースの選び方、設計についてお話していきたいと思います。そして私もまさに今、2011年から続くWebサービス「オミカレ」のRDBMSのリファクタリングに携わ

Webサービスまとめに続いて、僕が個人的に使っているVSCodeのプラグインのまとめです。 おすすめしたいプラグインを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます（課金した場合のみ通知を受け取れる仕様）。課金したら多くのコンテンツが読めるというわけではないのでご了承ください。 (※2019.11.14 追記)当記事が「はてなブックマーク」テクノロジーカテゴリーの人気エントリーに掲載されました。ありがとうございます。 昨日投稿した「僕がおすすめするVSCodeのプラグインまとめ」がはてなブックマークのテクノロジーの人気エントリーに掲載されました。ありがとうございました。うれぴまる。#notehttps://t.co/w1pg7J3gfDhttps://t.co/LzHQfdYReZ — TAK (@tak_

SEO（Search Engine Optimization）とは、直訳すると「検索エンジン最適化」。自分のWebサイトが「検索エンジンに評価されるためにはどうしたらいいのか」を考えるのであれば、検索エンジンについて学ぶことは非常に重要ですよね。 ここでは、検索エンジンの仕組みや歴史について解説していきます。 ▶ 検索エンジンの 仕組みとは ▶ 検索エンジンを欺くブラックハットSEO ▶ 検索エンジンが推奨するホワイトハットSEO（本記事） 検索エンジンが推奨するホワイトハットSEO前節では、Googleを欺くブラックハットSEOについて説明しました。一方で、ホワイトハットSEOはGoogleが“ユーザーの利便性”を考えて設計したガイドラインに則った手法であるため、ブラックハットSEOのように、Googleを欺くような施策ではありません。しかし、ブラックハットSEOの影響で、「SEO=悪」

以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next

先日リリースした自作Webアプリを何となくProductHuntにアップロードしたのですが、それだけで急激に被リンクが増えて驚いたので、自分がやったことと成果をシェアします。 ProductHuntとは ProductHuntというのは、イケてるアプリをシェアできるプラットフォームで、誰でもユーザー登録をすれば自分が作ったアプリや見つけてきたWebサービスをアップロードすることができます。月間1000万近くのアクセスを稼ぐ巨大サイトなので、それだけ多くの人の目に触れるチャンスがあります。 他にもAlternativeto.netというサイトも集客目的で使っているのですが、アップロード時のレスポンスは明らかにProductHuntの方が上だったので、初期の集客という点ではProductHuntが有効だと思います。 https://www.producthunt.com/ ProductHun

先日 iMac 2019のレビュー記事 に「Web制作にMacが適していると思っている理由は別の記事に書きます」と書いたところ結構反応があったため、この記事にまとめることにしました。 先に、Web制作のためにWindows PCを買った方のために説明しておきますが、Windows PCでもWeb制作はできますのでご安心ください。 ただ、私はいくつかの理由でWeb制作にはMacの方がメリットが多いと感じています。 私がMacでWeb制作するようになったきっかけ 私はWindows 95の頃からWindows PCをずっと使用していました。 Windows 95や98の頃はMacでWeb制作するメリットを感じておらず、多くのWebサイトを問題なく閲覧できるWindows PCがベストだと思っていました。 その後Windows XPやWindows Vistaが搭載されたPCをメインで使用してい

こんにちは！BASE株式会社の藤川（えふしん）です。 2019年10月31日開催されたEOF2019 (Engineering Organization Festival 2019)というエンジニアのチームマネジメントに携わる人達のイベントに、スポンサーとして参加すると共に登壇してまいりました。 こちらが当日の発表資料になります。 2019/10/31 BASE社発表資料 - EOF2019 from 真一 藤川 プレゼンテーションの目的としては、エンジニアのマネジメント業務はクリエイティブな仕事であり、エンジニアリングの延長線上でしかないんだよ！ということを知って欲しい。その結果として、エンジニアリングマネージャに挑戦する人を増やしたいというものです。 なお、BASE株式会社に僕がCTOとしてジョインした時には、すでにエンジニアが何人かいる状態でした。一応、BASE創業直後から技術顧問と

どうも〜こんにちはぁ！　最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ