CakePHP3 + Vue2で簡単SPAをつくる | Fusic Tech Blog
こんにちは、Fusic二年目吉野です。 今回は、CakePHP3とVue2でSPAを構築するまでを紹介します。 Vueの環境を構築するのは、vue-cliが非常に便利ですが、vue-cliだとフロント側のみのコード生成になります。 また、PHPのフレームワークとしては、Laravelは公式でVueを採用しているため、使用するまでのハードルが低いですが、CakePHP3はハードルが高いです。 CakePHPとVueをうまく組み合わせるには、webpackやBabelなど、たくさんのJSプラグインの知識が必要です。 今回は、手軽にCakePHP3+Vue2の環境を作ることができる、Cake_Webpacker を使って、CakePHP3+Vue2の環境を作っていきたいと思います。 環境 PHP MySQL 初期設定 READMEにそって、まずはリポジトリをCloneします。 $ git clo
ServiceWorkerとCache APIを使ってオフラインでも動くWebアプリを作る - Qiita
はじめに Thetaの360°画像にぼかしを入れるWebアプリSphereBlur.comを作った際に、オフラインでも動くようにするために、HTML5の新しい技術Service Workerを使った。なお、下の動画でホーム画面からネイティブアプリっぽく起動しているのはWeb App Manifestのおかげである。 Service Worker Service Workerは、通常のページの環境とは別に、バックグラウンドで実行されるJavaScript実行環境で、ページからのネットワークリクエストを横取りしたり、ウェブサイトからのPush通知を受けとって表示するといった、今まではできなかった処理をすることができる。Push通知の方は、去年Facebookが使い始めたので有名になったが、今回はPush通知ではなく、ネットワークリクエストを横取りする機能を使ってオフライン対応をした。 ネットワ
第4回 シングルページアプリケーションの基礎を作成する | gihyo.jp
はじめに この連載の前回までの記事で解説にあったように、Vue.jsはシンプルなViewレイヤのライブラリです。もしアプリケーションにシングルページアプリケーションとしての要件がある場合、ライブラリとしてVue.jsのみを使用した実装では少し困難になるでしょう。公式プラグインであるVue Routerを使えば、SPAを簡単に実現できるようになります。連載第4回目である本稿では、Vue.jsとVue Routerを使ったSPAの実装の基本について紹介します。 シングルページアプリケーションとは シングルページアプリケーション（以下SPA）とは、1つのHTMLをロードして、ユーザーインタラクションに応じて動的にページを更新するWebアプリケーションです。通常のWebアプリケーションでは、ページ遷移時にサーバへアクセスしコンテンツをロードしますが、SPAではページ遷移をクライアントサイドで行いま
Vue.js + axios + Vue Routerで作る！シンプルなSPAの作り方 | Public Constructor
この記事では、SPAがはじめてという方向けに、”Vue.js”と”Vue Router”、”axios”を使った、SPAの作り方を紹介します。 そのため、「SPAのアプリケーションを作ってみたいけれど、どこから手をつければ良いかわからない」という方向けの内容となっています。 今回作成するアプリケーションは、「Ajaxで自分のIPアドレスを取得し、表示する」ことを目標としています。 実装する機能としてはシンプルですが、「画面遷移」や「Ajaxによるデータ通信」といった、アプリケーションに欠かせない処理を含んでいます。 この記事を参考にSPAを作ってみて、Vue.jsでSPAを作ることが、どういった感じかを掴んでいただければと思います。 作成するアプリケーションのイメージを下記に記載します。 ホーム画面 IPを表示する画面 SPAとは何か？ SPAは、”Single Page Applicat
【Vue.js】爆速でSPAを作る - Qiita
シングルページアプリケーションが流行っているらしいので、今頃便乗して簡単にできると言うVue.jsを使ってSPAを作ってみます。 Vueとか何もわからないけど、とりあえずやってみたいという人はぜひ参考にしてください。 ただ、多少触ってみてからSPAに挑戦するのをおすすめします。 超簡単にですが前回まとめた記事がありますのでこちらをご覧ください。 https://qiita.com/nagimaruxxx/items/279ca1c57a8ec8325558 開発環境 dockerコンテナ内とかではなくMac上で行います(ここで間違えてつまづいた人) - macOS High Sierra - node.js 10.11.0 - npm 6.4.1 Vue.jsって？ JavaScriptのフレームワークです。 特徴としてあげられることは ・MVVMフレームワーク ・学習コストが低い ・双方
Vue-routerを使って、SPAをシンプルにはじめてみる - Qiita
はじめに Vue-routerを使ってシンプルなSPA(Single Page Application)的なサイトを作ってみる。なかなかシンプルにやりたいことだけやれる説明サイトが見つからなかったのでまとめておきます。 やりたいことは、最初に画面がでてきて、画面内のリンクをおしていくとどんどん次のページへ進んでいくという単純な画面遷移をVue-routerを使って実現すること、それだけです。 むかしはこれだけでもできたら、すぐに"アドベンチャーゲーム"作れるなー とか思いましたが、最近アドベンチャーゲームというジャンルもなかなか聞かなくなりましたね..... 説明は、大事なポイント以外は省略してやりたいことに一直線でいきます。 (2018.11) しばらく放置した結果Vueのバージョンが変わり動かないサンプルコードになっていたので修正しました。。 Vue および Vue-router のイ
中〜大規模な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・コンポーネント志向
SPAを開発するエンジニアこそ知るべき、正しく評価されるためのSEO - Qiita
SPAによるWebサイト開発とSEO 昨今はReactをはじめとするフロントエンドのライブラリやフレームワークの台頭により、比較的多彩な機能を持つWebアプリケーションだけでなく、メディアのようなWebサイトをSPA(Single Page Application)で構築する例も見られるようになってきました。こうしたWebサイトにおいて、SEOは重要な集客手段の１つです。 ところで、SEOに関わっている方や造詣の深い方はディレクターやマーケティング寄りの方が多いようです。そのせいかSPAでサイトを構築する場合のSEOに関する話題はあまり目にしません。またエンジニア界隈では技術寄りのトピックへの関心がメインで、SPAでのSEOといえば、SSR(Server-Side Rendering)の実現方法くらいしか話題にならないように感じています。 筆者はどちらかといえばサーバサイドの方が本職ではあ
React/Redux/Node.jsのSSR/SPAを速くする6つのチューニングポイント
React/Redux/Node.jsのSSR/SPAを速くする6つのチューニングポイント：大規模ブログサイト表示速度改善 大解剖（終）（1/3 ページ） 2004年から続くブログサービス「アメブロ」が2016年9月にシステムをリニューアル。本連載では、そこで取り入れた主要な技術や、その効果を紹介していく。今回は、React/Redux/Node.jsを使ったIsomorphic JavaScript特有のパフォーマンスチューニング手法や実際にあった問題および、その解決方法について。 2004年から続くブログサービスである「アメブロ」は、2016年9月にシステムをリニューアルしました。本連載「大規模ブログサイト表示速度改善 大解剖」では、そこで取り入れた主要な技術や、その効果を紹介しています。 アメブロのリニューアルでは、React/Reduxを採用し、サーバサイドとフロントエンド両方での
AWS をフル活用して「サーバレス」な SPA を実装できる「サーバーレスシングルページアプリケーション」を読んだ - kakakakakku blog
6月末に O'Reilly から出版された「サーバーレスシングルページアプリケーション」を読んだ．ただ読むだけじゃ理解度が浅くなってしまうかもしれないなと感じて，今回は全ての実装を写経してみた．そのため少し時間はかかってしまったけど，フロントエンドには苦手意識があったし，今まで SPA の実装もしたことがなかったので，前半部分は特にワクワクしながら楽しめた．今回，監訳者の id:yoshidashingo にご献本を頂き，本当に感謝しかありません．ありがとうございます！と同時に，ガッツリ読もうと意気込んだタイミングで仕事に忙殺されてしまったりして，書評のタイミングが遅れてしまったのはすみません！ サーバーレスシングルページアプリケーション ―S3、AWS Lambda、API Gateway、DynamoDB、Cognitoで構築するスケーラブルなWebサービス 作者:Ben Rady発売
SPAがネイティブアプリをぶっ壊す：HTML5/Javascriptが変えるWebの未来 - Qiita
はじめに タイトルは半分釣りですが、半分本気で考えてもいます。 近い将来、Webアプリが今のネイティブアプリの市場を超えてくる、と仮説を立てています。 ぜひ、先人のみなさんのご意見やお考えを教えてください。 SPAについて SPAとはなにか（What） 歴史 佐川夫美雄さんのイベントレポートの一部が、非常にまとまっていてわかりやすい部分でしたので、まず引用させていただくこととします。 RIAはアプリケーション利用者に対し高い評価を得ましたが、2010年のAppleショックにより衰退の方向へ向かいます。具体的には2010年にSteve JobsがFlashを激しく批判したことに端を発します。プロプライエタリ(Proprietary Software)なFlashよりオープン性のあるHTML5を推進するようになりました。2011年にはMicrosoftがWeb開発者に対してSilverligh
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
