SNS映えするWebアプリを...！FirebaseとVue.jsでSPAのOGP画像の動的生成をやってみたら案外楽だった - Qiita
SNS映えするWebアプリを...！FirebaseとVue.jsでSPAのOGP画像の動的生成をやってみたら案外楽だったOGPSPAVue.jsFirebaseFirebaseCloudFunctions この記事はFirebase Advent Calendar 2018 6日目の記事です。 はじめまして、ゆき(@twitter:yuneco)です。日頃は絵を描いたりちょっとしたWebアプリを個人開発したりして遊んでいます。今日は個人でTwitter連携アプリを開発した際に悩んだSPAの動的な（ページごとの）OGP生成について情報をまとめてみたいと思います。NuxtやSSRは使いません。 作ったもの＆OGPのイメージ 今回作った colorinco*カラーインコ はTwitter連携したユーザの投稿画像やお気に入り画像を表示し、そこから自動的にカラーパレットを生成、Twitterでシェ
SPA が、ウェブ開発のベストプラクティスになる時代 - mizchi's blog
最近のフロントエンドに関するお気持ち。正直まとまってはない。 最近、こんな感じのツイートや記事が増えた。 web 技術をキャリアの中心にしない シングルページアプリケーション (以下SPA) の台頭により、私の観測範囲ではモダンな Web サイトは SPA で作られるようになった。サーバーサイドは JSON を返す API サーバーとなり、DB やバックエンドシステムのプロキシのような存在になりつつある。 私はサーバーサイドエンジニアとしてキャリアを積んできた。SPA が流行りだした頃、いずれサーバーサイドエンジニアは不要になって自分のキャリアを考え直さなくてはいけない時期がくるのではないかと戦々恐々としていた。 自分も元々、SPA を他サイトとの「差別化技術」と定義していた。ブラウザのタブページのライフサイクルにおいて、初期化プロセスを一回にまとめてシームレスな遷移を実現する技術。たとえ
SPAサイトのCSRF対策 - 親バカエンジニアのナレッジ帳
CSRF対策について CSRFとは？ CSRFによる被害 通常のCSRF対策 SPAサイトのCSRF対策 方法1 リファラで判断 方法2 ログイン時に発行したトークンを照合 方法3 CORSと組み合わせてOriginをチェック CSRF対策について CSRFとは？ このページに来られた方ならもう理解している方も多いとは思いますが、CSRFについて簡単に説明します。 CSRFはリクエスト強要(CSRF：Cross-site Request Forgery)という意味で、クロスサイト(Cross-site)の名の通り、正規のサイトとは別のサイトからリクエストを送らせる偽造工作です。 Webでサーバサイドの開発をしている方ならご存知だとは思いますが、例えばフォームのPOST処理は必要な項目やURLさえわかっていればどこからでもリクエストすることは可能ですよね。(リクエスト先が受け付けてくれるかは
Vue.jsで作るSPAデータ更新フォーム | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
JavaScriptVue.jsフロントエンド 開発チームの井川です。 今度とある案件にて、項目数がとても多いデータ更新画面を作ることになりました。 まだ未定ですが200項目くらいはあるかもしれません。 弊社のサービスの管理画面として社内で利用される予定です。 管理画面なのでデザイナーによるデザイン制作はなく、エンジニアがUIを担当します。 そこで、ユーザにとって使い勝手がよく、開発としても余計な画面遷移がなく、繰り返しのコードが少なくなりそうなSPA(Single Page Application)のデータ更新画面を作ろうと考えました。 今回は項目数がとても多い画面を作るため、データの状態（変更やエラーがあるかなど）をDOMに反映させるコードを全部書くと、とんでもないコード量になりそうです。 SPAを作るには、データの状態に応じてDOMを操作してくれるライブラリがあった方が良さそうです。
![Vue.jsで作るSPAデータ更新フォーム | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f8715288a81c853deab527fd7a5dc26fcbc0af02/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2018%2F04%2F4553f669-s.png)
中〜大規模なSPAを開発する時に抑えておきたい10のポイント - KAYAC engineers' blog
こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をReactやVueで書くこともありますが、今回はそのケースではありません。 1. フレームワーク 数年前とは事情が変わり、 フレームワークを使わないという選択肢は昨今だともう無いでしょう。丸腰のJSでDOMを弄っていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。 人気フレームワークの台頭になっている React + Redux Vue + Vuex をこの1年使ってきましたが、書き方は違えどFluxアーキテクチャ・仮想DOM・コンポーネント志向
Vue.js ではじめるシングルページアプリケーションの開発 - HDE BLOG
Vue.js は JavaScript フレームワークです。 ウェブアプリケーションのユーザーインターフェイス開発を支援する様々な仕組みを提供します。 管理画面はもちろん、HTMLエディタのようにユーザの入力に対して即応性が必要なアプリケーションを簡単に作ることができます。 例えば、テキストエリアに文字を入力すると、 デザインしたページの特定のDIV要素がリアルタイムに更新されるといったデータ反映の仕組みを備えています。 また、JavaScript で大規模なユーザーインターフェイスの開発を行う場合、HTMLファイルのテンプレート化、 JSファイルの依存関係、グローバル変数汚染など様々な課題に直面します。 Vue.js は、コンポーネントという仕組みと Webpack というモジュール管理ツールと組み合わせることで、 これらの課題にうまく対処できるようになっています。 今まで jQuery
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
