花園温泉 sauna kukka（サウナクッカ）｜公式自慢の天然温泉は、地下1000mから湧き出る源泉。 それは、美肌の湯とも呼び得る上質な天然温泉です。 サウナ風呂は、「サウナ界のレジェンド」と呼ばれる 著名人から頂いたご意見・エッセンスを取り入れるべく、 全力で挑戦致しました。 こだわり抜いた空間で、極上の「やすらぎ」と 「ととのい」を是非ご体感ください。
Angular - Wikipedia
Angular（アンギュラー）は、GoogleのAngularチームと個人や企業のコミュニティによって開発されているTypeScriptベースのオープンソースのフロントエンドWebアプリケーションフレームワークである。 概要[編集] AngularJSにはパフォーマンス面と機能の分かり易さについて多くの欠点があったため、AngularJSを構築した開発チームが1年かけて1からコードを書き直した[3]。一部の機能や名称は引き継がれているが、基本的に別のフレームワークである。 Angularはコンポーネントベースのアーキテクチャを採用している。すべてのAngularアプリケーションには、ルートコンポーネントと呼ばれる少なくとも1つのコンポーネントがある。各コンポーネントには、ビジネスロジックの処理を担当する関連クラスと、ビューレイヤを表すテンプレートがある。複数のコンポーネントを積み重ねてモジ
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-routerでページ遷移を検知して、GAのpageviewを送信する - Qiita
合同会社kumanoteのTanakaです。 vue-router使用時にページ遷移を検知して、Google AnalyticsのBeaconを飛ばす実装の紹介になります。 ページ遷移の検知 $routeという変数をwatchすることで、ページ遷移を検知することができます。 単一のrouter-viewを使っている場合は、一箇所実装することで 全てのページ遷移に反応して、処理を行うことができます。 （※ 複数のrouter-viewを使っている場合は別の作り込みが必要になります。） 具体的には以下のような感じになります。 <template> <router-view></router-view> </template> <script> export default { watch: { '$route': function (to, from) { if (to.path !== fr
wordpress で SNS や SEO に優しい簡単 SPA 作り - Qiita
SPA と wordpress を組み合わせたら意外と SPA の問題を解決できた。という記事です。 経緯 経緯は、もともと存在する SPA のサイトを wordpress で管理されている記事コンテンツ配信サイトに リニューアルしたいというお話をいただいたことでした。 リニューアル前のサイトのインタラクションが良かったので、 その雰囲気は残しつつ、クローラー対策などの作り込みを行い ちゃんと記事メインのサイトとして耐えうるものを目指しました。 課題と対応 1. クローラーにページ独自の meta 情報を認識させる 動的に生成されたページを検索エンジンや SNS のクローラーに 認識させるためには、プリレンダリングでファイルを用意するか SSR（サーバサイドレンダリング）の対応が必要になります。 今回は wordpress の利用が前提だったので、 アクセス開始されたページのみ、<head
【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 のイ
ReactJSで作る今時のSPA入門（基本編） - Qiita
GitHubサンプルをbabel7に対応しました。 GitHubサンプルコード：GitHub （※この記事のサンプルはすでに古いです。最新版のサンプルと説明はGitHubのreadmeに書いてあるのでそちらを見てください） ReactJS使ってナウいウェブアプリケーション作ろうぜってことでまとめてみようと思います。 以前はウェブアプリケーション作る時はBracketsやAtom使っていたのですが プラグインのアップデートとかバグった時がめんどくさかったり、エディタが重かったりしたので 最近はVisual Studio Code(VSCode)に乗り換えました。 （必要な便利な機能もプラグインいれなくても揃ってるし、デフォルトでJSXサポートしてるから楽） VSCode環境構築：VSCodeで爆速コーディング環境を構築する(主にReactJS向け設定) ちょこっとReactJSを試したいとき
中〜大規模な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ページを開く
Fusic Tech Blog
React製のSPAのパフォーマンスチューニング実例