You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
概要 http://localhost:3000/sample?hoge=abc123 のようにRequestされた場合に、 abc123 を画面に表示してみる asyncDataを使う pageコンポーネントの場合、asyncDataというメソッドを使うと、Context経由でリクエストの情報を取得できる。 asyncDataはレンダリング前に呼びだれ、結果はdataとマージされる。 Queryパラメータの場合は context.query で取得できる pages/sample.vue はこんな感じになる。 <template> <div> <p>hoge: {{hoge}}</p> </div> </template> <script> export default { data: function() { return { // asyncDataで上書きされる hoge: 'de
One of the biggest selling points of Nuxt.js is that it can help your application with Search Engine Optimization (SEO) and to rank better on Google. In this article, we’ll go over the best practices to make sure that your Nuxt application is set up properly to rank on search engines. Disclaimer: This article is not an SEO guide or a guide on how to rank well on Google. It’s a technical article on
この間、友人と焼き肉を食べていて、「Nuxt.js で Vuex の結合テスト書くのどうやってますか?」という話になったので、考えてみました。 Vuex の結合テストの定義 この記事では、アクションやミューテーション単体ではなく、 アクションをディスパッチした結果のステートやゲッターが意図通りになっているか確認するテストのことを、Vuex の結合テストと呼びます。 方針 Vuex の結合テストで課題となるのは、テスト対象の Vuex Store インスタンスの生成です。 今回は、(少し強引ですが)Nuxt.js のドキュメントのエンドツーエンドテストのサンプル( 開発ツール - Nuxt.js )をベースに Store インスタンスの生成を Nuxt.js に任せることにしました。 最初、モジュールモードの場合に Nuxt.js が内部でおこなっている Store オプションの組み立て(
Nuxt7(Nuxt.js+Framework7)について、今回つくったサンプルとともに紹介です。 Nuxt7に加え、カレンダーはFullCalendar、Google Signinで認証し、Google CalendarとAPI連携します。静的コンテンツで動きます。 Github: https://github.com/hide212131/nuxt7-googlecal-example/ Demo: https://next7-googlecal-example.netlify.com/ きっかけ モバイルアプリやフロントエンドの開発経験ないままは嫌だなあと思ってる中、身内でちょっとしたアプリを作ると喜ばれる機会があり、作ってみることに。 機能は少なめ。お金をかけずに短時間で。 ネイティブアプリの必要はないが、iOS/Androidの操作感はほしい プロトタイプを早く作り、感触を知りた
概要 公式サイトのGet startedの 1. install と 2: Configure editor の手順に沿って、Flutterの環境構築を行った。 手順通りに進めていきつつ、気になったところをピックアップした。 SDKのバージョンが古い? Get startedにリンクが貼られているSDKは flutter_macos_v0.5.1-beta.zip なんだけど、どうやらバージョンが古い模様。 手順通り一時的にpathを通したあと、確認のためバージョンを確認するコマンドを実行したところ、WARNINGが出力された。 % flutter -v ╔════════════════════════════════════════════════════════════════════════════╗ ║ WARNING: your installation of Flutter
やりたいこと Gmailに日々大量のメールが届く どんなメールが、どのくらい届いているのか可視化したい まずは宛先別に分類してみる 日別にどの宛先に何件届いているのか集計してグラフ化する 完成したコード //実行時間を細かく制御するための関数 //https://qiita.com/sumi-engraphia/items/465dd027e17f44da4d6a function setTrigger() { var triggerDay = new Date(); triggerDay.setHours(23); triggerDay.setMinutes(59); ScriptApp.newTrigger('aggregateGmail').timeBased().at(triggerDay).create(); } // その日のトリガーを削除する関数(消さないと残る) funct
フィードバックを送信 サポートされているプラットフォーム、フレームワーク、ライブラリ、ツール コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。
ほぼほぼ良いとこ取りやんけ… というわけで まじやばい ぐうぐるの超技術が超手軽に ←まじやばい 真のサーバレス @1amageek さんが言ってて良いなぁと思ったんですが Firebase realtime databaseは本当の意味でのサーバレスなんですね Firebaseでアプリを開発するならClient Side Joinを前提にすること lambdaとかFaaSは結局サーバサイドに過ぎないわけで そこんとこFirebaseは本当にサーバレス 今回のCloud Firestoreはそれを更に普及させるもんだと思います 余談 今更だけど,上の表書きながら,やっぱぐうぐるの超技術はあたまおかしいとおもいましたまる 直接今回の話ではないけど,ぐうぐるの超技術気になるかたは↓ここらへんご参考にー YAPC Asia 2015「Google Cloud Platformの謎テクノロジーを掘
Cloud Firestoreファーストインプレッション リリース発表をついに来たか!って思いました。そしてFirestoreとFirebase Realtime Databaseがどう違うのかを読んで、大きく進化したなぁって思いました。そして実際に使ってみて、これはもはや別物って思いました。 FirestoreとFirebase Realtime Databaseの違いについてはすでにこちらでまとめられていたのでこちらをご覧ください。 https://qiita.com/Yatima/items/54ea22d0cea1acc6cbcb Cloud Firestoreのすごいところ FirestoreにはBoringSSLが使われている BordingSSLはGoogleによるOpenSSLのfork。2014年にForkを発表して、すでにAndroidなどでは使われていたようですが、本
「健康診断の結果ちゃんと管理してないな」 ↓ 「スキャンしてGoogle Driveに保存すると良いよ!」 ← 神の声 ↓ 「そういえばGoogle Drive + Flutterやったこと無いな」 ↓ 「Flutterで健康診断結果をGoogle Driveに保存するアプリを作ろう」 ということで作ってみました 開発は帰宅してから寝るまでという制約で短時間で出来ることのみに絞って開発しました。求める機能は「簡単にGoogle Driveにアップロード」と「簡単にアップした画像を閲覧」という2点です。 設計図 まずはお絵かき まずはイラストに落としてみると頭の整理がしやすいので自分さえ理解できれば良いのでアナログですが絵を書いてみることをオススメします。 完成したアプリ ログイン直後 右下のアイコンからカメラかギャラリーを選択できます 一覧画面 健康診断レポートを2枚アップロードした状態の
やりたいこと Nuxt.js良いですよね。 【npm】nuxt@dotenv を使って、 バックエンドのAPIを投げ分けている設定をしているのですが、Generateの度に「.env」ファイルを書き換えなくてはいけない!という問題を解決すべく、以下のコマンドを作りました。 [環境] Webアプリ開発 ・フロントエンド:Nuxt.js ・バックエンド(API):Ruby on Rails [前提] npm-script Node.js+npm での package.json の機能の1つです。今回はタスク管理機能を使って実現しました。 タスク管理 ビルドやユニットテストの実行などをタスクとして定義できる。 タスクは Shell スクリプトとして記述し、定義されたタスクは Teminal から npm run TASKNAME コマンドで実行可能。 参考サイト) npm-scripts で W
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く