ブログのWebパフォーマンス改善（PRPL） | hellopeople
前回の記事でPHPベースからREST API + Nuxt.jsのアーキテクチャに変更したことでブログのパフォーマンスを改善したことを書きました。 今回、HTTP/2やServiceWorkerなどの技術を取り入れることで、さらにWebパフォーマンスを改善することができました。これは完全に適用できている訳ではありませんが、PRPLパターンを参考にしています。 ▼改善後にLighthouseで検証した結果 Webパフォーマンスの改善にあたって、取り組んだことは以下です。 Firebaseへ移行してHTTP/2を利用 @nuxtjs/pwaを使ってPWA化 ServiceWorkerを使ったリソースのキャッシュ ResourceHintsを使ったリソースの先読み Firebaseへ移行してHTTP/2を利用 これまでレンタルサーバーを使っていたので、残念なことにHTTP/2を利用することが出来
vue-cli 3.0で立ち上げたアプリに複数のエントリーポイントを用意する - Qiita
概要 エントリーポイントを分けることで、コードの見通しは良くなり、余分なコードのダウンロードを避けることができます。 今回、vue-cli 3.0 で立ち上げた趣味アプリに複数のエントリーポイントを用意したのですが、 思いの外苦戦したので設定方法を共有したいと思います。 設定方法 vue-cli の2系までは webpack.config に entry を記述することで、複数のエントリーポイントに対応する事ができました。1 しかし、vue-cli 3.0でセットアップしたプロジェクトには webpack.config が生成されません。 その代わりに vue.config.jsに vue-cli の設定を記述することができます。2 この中で pages オブジェクトとして、複数のエントリーポイントを定義することができます。 この状態を multi-page mode と呼びます。 vue
Google Homeで受付システム作ってみた - Qiita
Google Homeで受付システムを作ってみました。 東京の本社にはiPadを使った受付システムがあるのですが、大阪支店は諸事情により導入が遅れています。。。 今回は、スプレッドシートに来訪者情報を記録し、その情報を検知するとSlackに通知が行くようにしました。 現状 大阪支店は紙とペンと呼び鈴の超アナログ仕様ですｗ これに会社名と名前を記入して呼び鈴を鳴らすと奥から社員がやってきて対応しています。 完成動画 Google Homeで受付システムを作ってみた。 #GoogleHome #Slack #Googleアシスタント pic.twitter.com/O0bFoIuBCx — がおまる@HoloLens研究者 (@gaomar) 2017年12月6日 構成図 構成はIFTTTでスプレッドシートに来訪者を記録し、値が変更されたことをトリガーにして Slackに通知を投げています。
Googleスプレッドシートの変更履歴をGoogleスプレッドシートに書き出す。ついでにSlackにも通知する - ぼくはまちちゃん！
こんにちはこんにちは！！ Googleスプレッドシート使ってますか！ 複数の人がブラウザ上で同時に閲覧・編集できるエクセルです！ これ超便利ですよね。 (パワーポイントみたいなやつも便利ですね！) 最近はエクセルの代わりに これをチーム向けの情報共有ツールとして使ってる人も多いんじゃないでしょうか。 これさえあればもう、 バグ管理リスト.xls バグ管理リスト最新版.xls バグ管理リスト5月12日ver.xls バグ管理リスト最新版のコピー.xls— はまちや２ (@Hamachiya2) 2010, 5月 12 こんなことにもならなくて済みますよね。ああ良かった！ そんなGoogleスプレッドシートなんですが、欠点もあって…、 変更履歴が超見づらい＞＜ んですよね…。 シートが複数あるようなものだと、一体どこを変更したのやら……といった感じです。 そこで、タイトルにあるように、 Goo
4873ba51646bda84d6ca
概要 Google Apps Script（通称GAS）に最近興味を持ち始めました。 Gmailと組み合わせたり、いろいろと出来るのですが、今回はGoogle Translateを利用して、Slackからの日本語投稿を英語などに翻訳して返すBotを作ります GASは、JavaScriptの文法で書かれているため、JavaScriptをまだ触ってない方は、一旦JavaScriptの文法を一通りやってみてもいいかもしれませんが、簡単なチュートリアルなら、コード内容からどんなことをやってるかわかるかと思います。 今回の記事は、大きく２つのプロセスとなっています - GASの作成 - SlackBotの作成 順番に説明していきます GASの作成 ここらへんの記事を参考にプロジェクトを作っていきます。 プロジェクト作成後、SlackがPOSTリクエストなので、doPost関数を使います。 GASの場
自分の為のまとめサイトをNetlifyにNuxtで作って公開した - Qiita
import axios from 'axios' import CardlItem from '~/components/Qiita/CardItem.vue' const BASE_URL = 'https://qiita.com/api/v2/tags/' export default { components: { CardlItem }, data () { return { tag: '', // 検索時にリクエストに含めるタグ postList: [] // APIレスポンスを格納する器 } }, created () { // 初回ページ描画時にキーワード「nuxt.js」でQiitaのAPIをコール this.tag = 'nuxt.js' this.sendRequest(this.tag, 1) }, methods: { search (tag, page) { t
ReactでNetlifyのFormsを利用する方法 - Qiita
Reactで作ったプロジェクトをNetlifyでホスティングしている時に、NetlifyのFormsを使おうと思ったら素直には行かなかったので。 「ここ」に書いてあることです。 通常NetlifyでFormsを利用する場合は、formにnetlify属性を追加することでNetlifyがHTMLをパースする時にコレを読み取ってFormsが利用できるようになりますが、残念ながらReactのプロジェクトでは単純にJSXにnetlify属性を追加しただけではFormsを利用することはできません。 シンプルにフォームを作成する １番簡単にReactでフォームを実装する方法は次のような形になります。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Contact</title> <script src="h
HTTPSの静的コンテンツをホストするならs3よりNetlifyが俺の求めていたものだった - Qiita
事の発端 社内から静的コンテンツをホストしてHTTPS使える環境が欲しいんだよねー。と要望を受けた。 私はAWSが得意なので考えた。 「静的コンテンツならs3か」 「s3でHTTPSならs3の前段にCloudFrontでSSL証明書入れるか（ちょっと面倒だな）」 「CloudFrontにSSL入れるなら無料のACMだな」 「ACM使うならメール認証だしSES要るな（面倒くせぇ）」 「SESでメール受信するならs3・・・・・・・・・・」 ガシャーン！（ちゃぶ台の音） 「俺がしたいのはこれじゃない感」 ということで 何か上の環境を一発で作れるツールあるかなぁ。と調べているとNetlifyというサービスが引っかかった。 Netlifyってなに？ どうも静的コンテンツをホストしてくれて、SSLが使えるとな。Githubと連携して？ ふむふむ。使ってみよう。 ということでGithubにリポジトリを作
最速静的Webデプロイ - Qiita
先に言うとNetlify最強。 静的コンテンツをホストしてHTTPSで表示させたい。 S3 + CloudFront でできるのだが、ちょっと手間かなと思ってた。 参考 AWS得意な人がS3よりNetlifyをオススメしててすごい参考になった。 - HTTPSの静的コンテンツをホストするならs3よりNetlifyが俺の求めていたものだった やってみる ドメイン取得 → 名前.comで取得 Netlifyでアカウント作成（要 GitHubアカウント） 2-1. GitHubアカウントつなぎこんで、公開したいサイトに対応するリポジトリを選ぶ。 2-2. 公開ブランチとディレクトリを選び、ビルドコマンドを入力する（デフォルトでgulpコマンドが入力されてた） 2-3. Netlify DNS 使用するボタンポチッとしてアドレスもらう。 2-4. お名前.com で DNSの nameserver
Angularを、高機能ホスティングサービス「Netlify」でつかって高速化/Lighthouse高得点とるためのビルドファイルを公開しました - Qiita
Angularを、高機能ホスティングサービス「Netlify」でつかって高速化/Lighthouse高得点とるためのビルドファイルを公開しましたAngularCDNNetlifyLighthouse rdlabo/netlify_build_angularを公開しました。タイトルの通り、AngularをNetlifyという高機能ホスティングサービスで使うためのビルドファイルです。 やることは、次の4つです。 robot.txtを生成します wwwつきURLに自動的にリダイレクトするための _redirects を生成します ServerPushするための _headers を生成します CSSをインライン化します Angularは、ビルド時にビルドファイルを生成するフォルダを再生成します。また、--prodがつくと、ファイル名に乱数がつくようになります。（main.jsがmain.f1ec
Github+Netlifyでお手軽静的ファイル公開 - Qiita
やりたいこと 作ったhtml,cssをお試しで誰もがwebで見られるようにしたいな フロントのコーディングを自分以外の人に頼んでいるとかで、プレビューサイトをお手軽につくりたいな 手順 コーディング用のリポジトリを作成 適当にhtmlファイルを作成 $ git clone git@github.com:yomasaa/sample-netlify.git $ vi index.html test $ git add index.html $ git commit -m "Add 'index.html'" $ git push これで、超適当なhtmlが作成されて、githubにpushされた...! netlifyで新規プロジェクトを作成 ※ アカウント未作成の人はあらかじめ作成しておく https://app.netlify.com/ にアクセス...! 「New site from
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
プリロードを無効にする - Qiita
Myjson - A simple json storage and hosting service
【簡単】Gmailでメールを定期的に送信する方法【GAS】 - Qiita
Pricing and Plans | Netlify