SNS映えするWebアプリを...！FirebaseとVue.jsでSPAのOGP画像の動的生成をやってみたら案外楽だった - Qiita
この記事はFirebase Advent Calendar 2018 6日目の記事です。 はじめまして、ゆき(@twitter:yuneco)です。日頃は絵を描いたりちょっとしたWebアプリを個人開発したりして遊んでいます。今日は個人でTwitter連携アプリを開発した際に悩んだSPAの動的な（ページごとの）OGP生成について情報をまとめてみたいと思います。NuxtやSSRは使いません。 作ったもの＆OGPのイメージ 今回作った colorinco*カラーインコ はTwitter連携したユーザの投稿画像やお気に入り画像を表示し、そこから自動的にカラーパレットを生成、Twitterでシェアできるサービスです。共有するとタイムラインに↓こんな感じでコンテンツにあわせた画像が大きく表示されます。 映える！テンション上がる！ SNS連携アプリならOGPは必須 OGP(Open Graph Prot
レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 #エンジニアHub - エンジニアHub｜若手Webエンジニアのキャリアを考える！
レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 10年以上前に作られたレガシーシステムをVue.jsで大規模リプレイスしたエムスリーに、導入して感じたVue.jsのメリットや、活用法を伺いました。 JavaScript（JS）のフレームワークは、何を使うのがベストなのでしょうか。ここ3年ほどで数々のJSフレームワークが誕生していますが、React、Angularという二大巨塔を超えるものはなかなか現れていません。 そんな状況の中、GitHubではReactを上回るスター数を誇っている1のが、2014年のリリース後、着実に進化を重ね、日本でも採用事例が増えてきているVue.jsです。「JavaScript ベスト・オブ・ザ・イヤー」に2016年、2017年と2年連続で選ばれているほか、Ruby on Rails（Rails）やLaravel とい
一休.comレストランのスマートフォン検索ページがSPAになりました - 一休.com Developers Blog
一休.com レストランは今年の 7 月 18 日、スマートフォン向け検索ページのリニューアルを行いました。このエントリーでは、その中身について少し紹介させていただきます。 検索ページの課題 一休.com レストランではスマートフォン向け検索ページに対して「遅い」という課題意識がありました。これは技術面で少しブレイクダウンすると; パーソナライズドを含む複雑な処理を行っているため、サーバーサイド処理が重い。 UI 上無駄な遅延処理を行っているため、クライアントサイドの描画が遅い。 というサーバー側とクライアント側両方の課題がありました。クライアントサイドの「無駄な遅延処理」というのは; 検索結果取得が REST API 化されているにも関わず、再検索の度にページリロードを行い、サーバーサイドの描画からやり直している。 という実装に問題がありました。下図がリニューアル前のページ描画の様子です
ちょっとしたサイトならインクルーシブにSPAで - Qiita
みなさんこんにちは。フロントエンドで頑張ってますか。私はほとんど頑張っていません。なぜって、この界隈、何が何やら分からないです。 ちょっとしたサイトを作りたいだけなのにものすごくめんどくさいことになっています。 トランスパイルが分からない まずもってトランスパイルが分かりません。最新の開発環境は最新仕様のJS書いてBabelで任意のバージョンのJSにする、いわゆるトランスパイルをするのが普通らしいですが、何言ってるのか分からないです。何ですかトランスパイルって。なんでフロントエンドはそんな概念があるんですか。 Babel?Grunt?Gulp?Webpack?何それおいしいの?全然分からないです。 ES6(正式にはES2015らしいですがES6と書きます)以降のJavaScriptを書こうとすると途端にビルドがどうとかトランスパイルがどうとかの話になってしまいます。 なぜこんな状況になって
Nuxt.jsの新規プロジェクトでいい感じのテスト環境をつくる@2018 - Qiita
最新版=>フロントエンドのテストについて考える 現在、新規プロジェクトで、Nuxt.js+TypeScriptを使ったSPAの開発を行っています。この記事では、そういったケースにおいての、Nuxt.jsアプリケーションでのテストに対する考え方と、その方法を紹介します。 TL;DR ユニットテスト/結合テスト=>Jest UIテスト=>Storybookをベースに、Jestで足りない部分を補う プロジェクトの技術スタック Nuxt.js Vue.js Vuex TypeScript Docker テスト種別の整理 簡単に、今回登場するテスト種別の整理をしておきます。より詳しくは、ググったり書籍を読んだりするのをおすすめします。 ユニットテスト - 個別の関数やクラス、コンポーネントをテストする。 結合テスト - 複数の関数やコンポーネントをつなぎこんでテストする。 UIテスト - ブラウザを
PRPL パターンを使用して即時読み込みを適用する | Articles | web.dev
PRPL パターンを使用して即時読み込みを適用する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 PRPL とは、ウェブページを読み込み、 より高速にインタラクティブになります。 遅れて検出されたリソースをプリロードする。 初期ルートをできるだけ早くレンダリングします。 残りのアセットを事前にキャッシュに保存します。 他のルートと重要性の低いアセットを遅延読み込みします。 このガイドでは、これらの手法がどのように連携して機能するかを 個別に使用する必要はありません。 Lighthouse を使用してページを監査する Lighthouse を実行し、PRPL に沿って改善の機会を特定する 手法： Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。 [Lighthouse] タブ
HeadLessCMS + GraphQL + Vue.js でSPA（ブログ）を作ってみる
新しめの技術を勉強したいと思い、HeadLessCMS + GraphQL + Vue.js で簡単なSPA(ブログ）を作ってみました。 その過程で学んだことをチュートリアル形式でまとめます。 なるべく初学者の方にもわかりやすいようスクリーンショットを多めに掲載しています。 概要 headlessCMS、GraphQL、Vue.js、Apolloでブログを作成します。 チュートリアルがメインなので、graphQLのクエリの詳細な説明などは省略しています。 以下各バージョンです。 GraphCMS: 2018.7公開のもの Vue cli: 3.0.1 vue: 2.5.17 vue-apollo: 3.0.0-beta.11 vue-router": 3.0.1 vuetify: 1.2.4 graphql: 14.0.2 作成サンプル このようなのトップページ（投稿一覧）と詳細ページの2
Nuxt.js + Netlifyで爆速構築するサーバーレスSPA開発入門
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 こんにちは、アジアクエスト株式会社でフロントエンドエンジニア(以下、FE)をやっています、かめぽんです。 最近、VueもNuxtも勢いすごくないですか？？ すごいですよね？！？！ そんでもって、FirebaseやAWSを使ったサーバーレスアーキテクチャのアプリケーションも増えてきていますね！ だけど、「覚えること多くてよくわからん！けど、なんか動かしてみたい！」 と、思う方もいると思うのでぜひこの記事を参考にしていただけたらと思います。 サーバーレスSPAの構築方法はたくさんありますが、まずは手軽にモダンフロントエンド周りの知見を
Vue-routerを使って、SPAをシンプルにはじめてみる - Qiita
はじめに Vue-routerを使ってシンプルなSPA(Single Page Application)的なサイトを作ってみる。なかなかシンプルにやりたいことだけやれる説明サイトが見つからなかったのでまとめておきます。 やりたいことは、最初に画面がでてきて、画面内のリンクをおしていくとどんどん次のページへ進んでいくという単純な画面遷移をVue-routerを使って実現すること、それだけです。 むかしはこれだけでもできたら、すぐに"アドベンチャーゲーム"作れるなー とか思いましたが、最近アドベンチャーゲームというジャンルもなかなか聞かなくなりましたね..... 説明は、大事なポイント以外は省略してやりたいことに一直線でいきます。 (2018.11) しばらく放置した結果Vueのバージョンが変わり動かないサンプルコードになっていたので修正しました。。 Vue および Vue-router のイ
Rails+Vue.jsでSPA/PWAな家計簿アプリ作った - Qiita
はじめに 嫁と「家計簿つけなきゃねー」という話になり、勉強していたRails+Vue.jsな環境で早速作ってみた。 こんな感じで、SPAっぽく動作する。ついでに、PWA化もしてあるのでスマホでもPCでもよしなに動いてくれる。 ソースコードはこちら AccountsBook やったこと SPAなひな型を作る 基本的には以下の記事を参考にコンポーネントの作成やデータの送信などを行った。 なので、特別困ることもなるスムーズにできた。 Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた デザイン関係に関しては、愛用させていただいているUmiを使用した。 API周りの認証とかまだ作ってないので、後々のことも考えて以下の記事を参考に実装する予定。 【Rails】RailsでAPIの簡単なトークン認証を実装する 日付を選択できるようにする 家計簿なので支出の日付などを入力で
【まえがき編】Nuxt.js + Contentful + NetlifyでSPAブログを自作する - Qiita
はじめに Nuxt.jsとContentfulとNetlifyでモダンな（？）SPAブログを作りました。こちら これから何回かに分けて構築までの記録を残していきたいと思います。 今日はこういうアーキテクチャにした理由とか、選定するまでに悩んだポイントとかを書きます。 【シリーズの予定】 まえがき編 ← この記事 Nuxt.js編 Contentful編 Netlify編 アーキテクチャについて 今回のキモはNuxt.js、Contentful、Netlifyという３つのフレームワーク or サービスを組み合わせていることです。 それぞれの概要は以下のような感じです。 Nuxt.js Nuxt.jsはVue.jsでつくられたフレームワークです。 SPA（シングルページアプリケーション）の構築が容易であることや、SSR（サーバーサイドレンダリング）に対応していることなど特徴にあげられます。 ま
Nuxt.jsを使うときに、SPA・SSR・静的化のどれがいいか迷ったら
nuxt generateの機能は、静的サイト生成とか、単に静的生成といわれることが多いですが、文中で多用するのがツラいので、より短く「SSG(Static Site Generation)」で統一しています。 Nuxt.jsにおけるビルドの選択肢 Nuxt.jsでは、SPA・SSR・SSGの中から、好きなものを選んで開発できます。 初期設定ではSSRで動作するようになっていますが、流れとして自然なのでSPAから順に利点と欠点をまとめました。それぞれのビルドを行うため設定は、ドキュメントにわかりやすく書いてあるので、そちらでご確認ください。 サーバーサイドレンダリング - Nuxt.js SPA（Single Page Application） 利点 実装しやすい サーバーの準備が楽 欠点 初期表示が遅い SEOに不安がある OGをページごとに設定できない SPAは、最もシンプルに実装でき
Firebase HostingからFirebase Functions を使ってGKEのアプリケーションにプロキシする - GAミント至上主義
Firebase Hostingを使ったサイトで、一部のパス（/api以下等）へのリクエストを別サーバーに投げられる仕組みを考えた。 別サーバーでCloud Functions（Node.js）で出来ないことをしたかった。 結果として動いてしまったけどなぜこんなことしてるのか分からなくなってきたのでまず整理。 １、アプリケーション概要 フロントエンド Vue.jsでビルドしたSPA（Firebase Hostingで配信） バックエンド GKEで動いているヘッドレスChromeやDjango等を使ったAPIサーバー。Cloud Functionsじゃむりぽ。 ２、動機 上記構成を普通につくるとホスト名やSSL証明を分ける必要があり、下記のデメリットが発生する バックエンドではHTTPS Load Balancerを立てる必要があり、SSL証明書の設定が必要 フロントエンドからAPIにリクエ
クラウド認証プラットフォームを使って、セキュアなSPAを作る！『「Auth0」で作る！認証付きシングルページアプリケーション』発行 技術書典シリーズ、８月の新刊
クラウド認証プラットフォームを使って、セキュアなSPAを作る！『「Auth0」で作る！認証付きシングルページアプリケーション』発行 技術書典シリーズ、８月の新刊 インプレスグループで電子出版事業を手がける株式会社インプレスR&Dは、『「Auth0」で作る！認証付きシングルページアプリケーション』（著者：土屋 貴裕）を発行いたします。 『「Auth0」で作る！認証付きシングルページアプリケーション』 https://nextpublishing.jp/isbn/9784844398417 著者：土屋 貴裕 小売希望価格：電子書籍版 1600円（税別）／印刷書籍版 1800円（税別） 電子書籍版フォーマット:EPUB3／Kindle Format8 印刷書籍版仕様：B5判／カラー／本文102ページ ISBN：978-4-8443-9841-7 発行：インプレスR&D ＜＜発行主旨・内容紹介＞＞
ヘッドレスブラウザ(Chrome)を使ってSPAをスクレイピングする - Qiita
一般的なスクレイピング手法とその問題点 スクレイピングというと、HTTPクライアントライブラリを用いてHTML取得し、HTML/XMLパーサーで解析するというのが一般的だと思います。 この手法の場合、以下の場合にうまく処理できません。 ターゲットのページがJavaScriptにより動的にDOMを操作する場合 HTML/XMLパーサーが取得したHTMLを正しく解釈できない場合(正しくないHTMLでもブラウザはなんとか処理するが、パーサーライブラリは正確なHTMLでないと処理できないことがある) 特に問題になるのは前者でしょう。最近のWebサイトではJavaScriptでDOMを操作することは珍しくなくなってきています。SPAであればなおさら難しく、もはやこういった手法によるスクレイピングは不可能でしょう。 ヘッドレスブラウザによるスクレイピング 動的なDOMやパーサーがうまく解釈できないとい
GitHub PagesにサクッとSPAをデプロイする - Qiita
GitHub Pagesとは 概要 GitHub Pages GitHubのリポジトリを静的WEBページとして簡単に公開できるサービス。 公開方法 ユーザー毎に作成可能なページ(例: https://[youraccount].github.io) リポジトリ毎のページ(例: https://[youraccount].github.io/[yourRepository]) 本記事では、リポジトリ毎のページとしてデプロイしてみる。 本記事の構成 アジェンダ GitHubリポジトリ作成 簡単なSPA実装 GitHub Pagesへのデプロイ 使用する言語・ツール みんな大好きVue.js vue-router (ルーティング) webpack (モジュールバンドラ) Yarn (インストーラ) GitHubリポジトリ作成 お手持ちのアカウントでリポジトリを作成。 ローカルへクローンする。
Reactで誰もがやりたかった10の機能。アプリ構想はあるけど作れない人の壁をぶっ壊す。 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事は Reactで今どきなWebアプリを作りたい（あわよくばサーバーレスにしたい） チュートリアルは触ってみたけど、その後はどうしたら良いのか右も左も分からない という人向けに、「こんな感じで実装したら公開できるアプリとしての体裁は整いそうですぞ」というオレオレHowToをまとめたものです。 ーー追記（2019/4）ーー この記事は2018/9に作ったものなので、バージョン周りなど結構古くなっちゃってます。MaterialUIなどは今はV3が出ていてドキュメントを見る時などご注意いただければと思います。参考程度にご活用下さい。 ま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BLOGシステム
GitHub - S-H-GAMELINKS/AccountsBook: Rails+Vue.jsな家計簿アプリ
GitHub - kamatte-me/nuxt-firebase-pwa: Run the Nuxt.js application (SPA * SSR * PWA) on Firebase.