Vue.js Tokyo v-meetup #8 の発表資料 https://vuejs-meetup.connpass.com/event/95678/
![Vue Fes Japan 2018 サイトの速度改善 / High Performance Vue Fes Japan Site](https://cdn-ak-scissors.b.st-hatena.com/image/square/fa1ee0f1d77d6a3202c39924f5d6f31afb42c2de/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F6b3860e635894d34b02490117a2e194c%2Fslide_0.jpg%3F10644714)
はじめに vue で pwa をしようと思うと、 vue-pwa-boilerplate を使うことになると思います。 しかし vue-pwa-boilerplate で npm run build 等と deploy を行うと、dist/service-worker.js が自動的に生成されてしまいます。 chache の操作や設定は以下の URL にあるように設定ファイルから行うことはできますが、 Push 通知の notification などその他イベントの操作方法がどこにも書かれていなかったため、共有します。 https://qiita.com/gyarasu/items/2f18edc4ae251180d89e#3-vuejs%E3%81%AEspa%E3%82%92pwa%E5%8C%96%E3%81%99%E3%82%8B やり方 やり方は簡単で、build/webpack
webサービスのUXを向上させるために、表示速度は非常に大切です。 しかしながら、noteはリリース当初からフロントエンドの実行速度が遅い=表示が遅いという構造的な問題を抱えており、継続率や離脱率など重要指標に悪影響を及ぼすリスクが強くありました。 noteチームはnoteを本格的なメディアプラットフォームへ成長させるスピードを加速していきます。それを踏まえ、手遅れになる前に技術的な負債を解消し、最新のベストプラクティスに沿ったフレームワークに移行することで、高性能なサービスを提供する基盤を作っていくという決断をしました。 本ポストでは、移行プロジェクトの技術的背景や移行手順を説明します。また、途中成果のデモをUPしているのでご紹介します。 技術的な背景noteの現在のフロントエンドはAngular.js 1系で構築されたSPAです。Angular 1系はかなり複雑なUIでも簡単に構築でき
これはcloudpack あら便利カレンダー 2018 の記事です。 Vue.jsでDOMが更新されない問題はわりとよくあたります。 ちょうど昨日社内で相談されたので、せっかくなので記事にまとめてみました。 ビューが更新されないあるある 配列、オブジェクトの更新が検出できない 配列のケース インデックスでアイテムを直接設定するとき 例: vm.items[indexOfItem] = newValue 配列の長さを変更するとき 例: vm.items.length = newLength 解決方法 1. $setを使う 2. Vueが監視出来る配列のメソッドを使う push(), pop(), shift(), unshift(), splice(), sort(), reverse() 参考リンク => https://jp.vuejs.org/v2/guide/reactivity.h
2018年6月19日、第69回となる「HTML5とか勉強会」が開催されました。今回のテーマは「UIフレームワーク最前線」。Angular、Vue.js、Reactという3つのフレームワークにおける第一人者が一同に集い、それぞれの最新動向やおすすめポイントを語ります。「Vue CLI v3」に登場したのは、Vue.js Japanユーザーグループのオーガナイザーとして活躍するkazu_pon氏。Vue.jsアプリ向けのCLIベースの開発ツールである「Vue CLI」の次期バージョンの特徴や目玉ポイントを解説します。 Vue CLI v3の話 kazu_pon氏(以下、kazupon):ご紹介に預かりましたkazuponです。さっそく発表させていただきたいと思います。まず自己紹介です。 Vue.jsのコアチームメンバーとして活動しています。Vue.js Japanのユーザーグループの運営をした
ブラウザで見ることができる3Dアクアリウムを作ってみました。 この3Dの実装は基本的にはHTMLとCSSだけで出来ています。canvasも使っていません。Vue.jsも使っていますが、魚を泳がせたり視点を変更するための用途のため、3D描画自体にはあまり関係ありません。 記事の最後に操作できるCodePenを配置してあるので読むのが面倒な方はそちらを見てしまってください(大泣きしながら)。 作り方 HTML HTMLは単にそれぞれの素材を配置しているだけです。 <div id="app" @mousemove="onMouseMoved" @touchmove="onMouseMoved"> <div class="container" :style="rotation"> <img class="bg" src="bg.jpg"> <img class="water front" src=
VuePressとは こちらの記事にうまくまとまっていました。 VuePress をお試ししてみた - Qiita 個人的な理解としてはNuxt.jsよりもサイト作成に特化した静的サイトジェネレーター という感じです。 Nuxt.jsもさわってみたんですがgenerateされるファイル群の見た目?や使い勝手など VuePressは静的サイトにより特化している印象でした。 執筆時(2018.6.28)VuePressのバージョンは0.10.2 です。 序文 ここ数年、gulpはもう辛いからwebpackオンリーでとかParcelのほうが速いとか 話題になってましたが結局どれ使おうが最終的に書くのはHTML(pug) + css(stylus/sass) + js(jquery) そもそもその構成が辛いよなぁとおもいながら幸せになれる環境を求めていました。 そんな中、2018年4月某日。Vue
はじめに 自己ポートフォリオを作ってたとき、デザインの勉強をしていたところ、パララックス効果(視差効果)を知りました。 デザインで参考にしたサイトは「Digital Smile Academy」さんのサイトになります http://dsa.clinic/ めっちゃかっこいいから作ってみようと。 JavaScriptでのライブラリを使ってもよかったのですが、アニメーションはなんでもCSSブームが自分の中できてたので 【CSS3】話題のパララックス効果をスクリプト無しで実装する方法。 ↑の記事を参考にさせていただき実装しました。 今回の完成形になります。 Chromeでの動作確認のみしています。 - firefoxとsafariとchromeでの動作確認しました。 Demo : https://sgnz-vuejs-parallax.herokuapp.com/ ソース: NozomiSugi
最近は Vue.js で SPA、Go言語で APIサーバーを実装しています。ここで意識するのはフロントエンドとバックエンドの分離です。分離させたい理由は二つ。 アプリ化の際や、今後、他のサービスと連携させるためにも、バックエンドはAPIサーバーに徹したい。Vue.jsで開発中にオートリロードしたい(Vue.jsをビルドして出来たファイルをGo言語でserveする形にすると、毎回ビルドするのが面倒) しかし、これをやろうとすると認証どうするの問題が付いてきます。APIサーバ、フロントの両方をセキュアにしようとするとそれだけで時間取られます。そこで使うのが認証基盤である Firebase Authentication です。これを使うと爆速で認証が作れます。そう、爆速です。 GitHub: https://github.com/po3rin/vue-golang-fireauth Qiita
Vue Native is a framework to build cross platform native mobile apps using JavaScript
ReactやAngular、Vueなどは独自のタグを使ったWebコンポーネント型のシステムと言うこともあって、これまでのHTMLデザインの手法が通じなくなっています。デザインの確認などで苦戦している人も多いのではないでしょうか。 そこで使ってみたいのがVue Designerです。Visual Studio Codeプラグインとして動作するVueデザイン確認ツールです。 Vue Designerの使い方 エディタです。Vueファイルに対応しており、デザイナーを開くと右側にプレビューが表示されます。 もちろんリアルタイムに更新されるので、スタイルタグの内容を変えるとすぐに反映されます。 props、データの確認もできます。 Webブラウザなどで表示を確認するのも良いですが、プログラミングエディタの中に埋め込まれていることで、より確認が簡単にできるようになっています。Vue Designerを
はじめに PWAって知っていますか?(自分は最近知りました👱) では、実際に使ったことがある、あるいは触ってみたことがある方はどのくらいいらっしゃるでしょうか。 色々なPWAの初学者用の記事を見たのですが、どれも丁寧に書かれていてとりあえず使ってみたい私にとっては難しいとかんじてしましまいました…😵 そんな自分のような方向けに、もっと簡単にPWAを初めてみようという主旨で書きました! 今回は、自分が最近触っているvue.jsを利用して組み合わせてみました。 PWAとは そもそもPWAとはなんでしょうか? PWA(Progressive Web Apps)はグーグルがモバイルユーザーのユーザー体験向上を目的とし、今までのWebアプリ(サービス)にWebとアプリの両方の利点を兼ね備えた仕組みのことです。 Googleが取り組むWebのアプリ化プロジェクト「PWA」とは?- WPJ この記事
Vue.jsとNuxt.jsを使用して、スマホアプリで見かけるようなアニメーションを伴った滑らかなページ遷移をWebページに実装するチュートリアルを紹介します。 Native-Like Animations for Page Transitions on the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最近見かけたページ遷移のアニメーション 使用する理由 前提となる知識 始めてみよう フックの設定 最近見かけたページ遷移のアニメーション フロントエンドのUIで、最近私が最も刺激を受けたのは、スマホアプリで見かけるような滑らかなページ遷移(トランジション)です。こういったインタラクションを実装するのは難しそうに見えますが、一度実装方法をマスターしてしまえば、さまざまなUIに使用することができます。 ここで紹介する方
はじめに Vue.js 2.x系を利用してカルーセルを作成しました.作り方を記載します. Vue.jsでカルーセルをつくるではクリックイベントで発火した関数が,表示部分の中身自体を変更しています. 本投稿では,表示したい全要素を含んだ大きなコンテナを用意し,横スライドして表示位置を変更していく方法を取りたいと思います. ちょうど,下図の赤枠の部分が移動することで,表示される内容が変更されるイメージです. リポジトリ 実装した内容は下記リポジトリにアップロード済みです.ご参考にしていただければ幸いです. 本記事執筆時とコードの内容は異なる場合があります. 実装内容 構成 ImageCarousel.vueが今回作成したカルーセルのコンポーネントです. ここにJavaScript(正確にはTypeScript)のコードを記述しています.また,次の要素は別ファイルとなっています. image-c
前置き この記事、本来は Flux には Model がないのではないかと思った覚書 - ナカザンドットネット と Flux の Store が ViewModel かって話からの MVW とかどうでもいいって話 - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く のアンサーとして書き始めた記事だが、前置きだけで別テーマとなったので、前後編に分割する。 僕は元々がゲームクライアント屋だったときの発想を引きずってるのと、既存の Web の開発の文脈に対して距離を置いていることを明言しておく。あとこういうテーマでとある原稿書いていたので、頭の整理も兼ねて。 ActiveRecord の功罪を振り返る このテーマを語るにあたって、まず Rails の MVC について述べなければならない。なぜなら、フロントエンドのアーキテクチャとは、サーバーサイドの MVC の模倣に始まり、破綻し、結果として
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く