こんにちは、@kenji7157です。 私はプラグラミング学習をしていると、色々なところにメモを記録していくので、大量のメモを点在させてしまいます。 そのため「プログラミング学習のメモを気兼ねなく投稿できるサービスが欲しい」と思い、以下のサービスを作…

この記事は JSL (日本システム技研) Advent Calendar 2020 - Qiita 25日目の記事です。 webpackとは ハンズオン準備 作業フォルダの作成 プロジェクトの作成 バンドル対象のファイルを準備 バンドルの実行 webpackとは JavaScriptファイルをひとつにまとめる…

ステップ1：テンプレートの定義 handlebarsライブラリの追加 スタイルシートの追加 HTMLテンプレート（ヘッダーバー）の追加 HTMLテンプレート（リスト）の追加 ステップ2：テンプレートの使用 ローカル変数の追加 renderHomeView関数の修正 findByName関数…

ステップ index.htmlの編集 renderHomeView()の実装 初期化ロジックの修正 keyupイベントの移植 Helpボタンイベントの削除 動作確認 原文/参考記事 次のチュートリアル 前のチュートリアル Single-Page Application(SPA)とは、１つのHTMLページで生成されるW…

ステップ 待機処理の動作確認 スクリプトタグの追加 FastClickの登録 動作確認 原文/参考記事 次のチュートリアル 前のチュートリアル ステップ 待機処理の動作確認 1.iOSデバイスかiOSエミュレータで次の動作を確認してみましょう。 [Help]ボタンをタップし…

ステップ cordova-plugin-dialogsの追加 スクリプトタグの追加 window.alert()のオーバーライド 動作確認 原文/参考記事 次のチュートリアル 前のチュートリアル JavaScriptのアラートは、アプリケーションがネイティブ でないことを伝えています。このセク…

永続化メカニズムの調査 それぞれの永続化メカニズムでアプリの動作を確認 原文/参考記事 次のチュートリアル 前のチュートリアル Cordovaアプリがどのようにして永続的にデータを保持しているのか確認していきます。 永続化メカニズムの調査 以下のファイル…

ステップ wwwコンテンツの削除 サポートファイルのダウンロード コンテンツのコピー ビルドの再実行 アプリの動作確認 原文/参考記事 次のチュートリアル 前のチュートリアル ステップ wwwコンテンツの削除 1.workshop/wwwディレクトリ配下のコンテンツを削…

iOSのビルド手順 Androidのビルド 原文/参考記事 次のチュートリアル 前のチュートリアル この章は任意です。もしModule1でプラットフォームのサポートを追加していない場合は、この章をスキップして次のModule3に進んでください。 iOSのビルド手順 workshop…

ステップ Node.jsのバージョン確認 Cordovaのインストール 作業ディレクトリの準備 Cordovaプロジェクトの作成 Cordovaプロジェクトへ移動 iOS/Androidプラットフォームの追加(任意) プラグインの追加 workshopディレクトリの構造について 原文/参考記事 次…

ブラウザを作り出した天才研究者 HTMLの誕生 ブラウザの誕生 第一次ブラウザ戦争 まとめ ブラウザを作り出した天才研究者 ブラウザとは... パソコンやスマートフォン等を利用してWebサーバに接続するためのソフトウェアであり、ウェブページを表示したり、ハ…

参考記事 作業を行うdocker_djangoディレクトリを作成 web/Dockerfileの作成 FROM python:3.8 ENV PYTHONUNBUFFERED 1 RUN mkdir /code WORKDIR /code ADD requirements.txt /code/ RUN pip install -r requirements.txt ADD . /code/ web/requirements.txt…

事前準備 Cordovaのapkファイル作成時に--releaseオプションを指定する npm run cordova-build-android --release これだけだと、app-release-unsigned.apkという署名なしのapkファイルが作成されることになる 署名付きapkファイルの作成手順 参考記事から引…

デフォルトのアイコンが表示される 以下、Cordovaで作成したandroidアプリのアイコンが未設定の場合 アイコン設定手順 cordova create hogehogeのコマンド実行後に作成される、config.xmlでの設定が必要。 config.xml内の<platform name="android">タグ内に以下を追加 <icon src="res/android/ldpi.png" density="ldpi" /> <icon src="res/android/mdpi.png" density="mdpi" /> </icon></icon></platform>

cordovaのどおうにゅう node環境 v12.10.0 対象プロジェクト配下にて npm install -g @vue/cli vue add cordova ※vue add cordovaにてsrc-cordovaが作成されず、エラーが発生する場合がある error: ENOENT: no such file or directory, open '/Users/hogehog…

事象 [Firebase] Functionからstorageの署名付きURLを取得しようとしたら 以下のエラーが発生(コンソール画面からIAM APIは有効に設定済み かつ トークン作成者の権限も付与済) Error: 7 PERMISSION_DENIED: Missing or insufficient permissions. 原因 IAM…

事象 [Firebase] Functionからstorageの署名付きURLを取得しようとしたら 以下のエラーが発生(コンソール画面からIAM APIは有効に設定済み) Error: Permission iam.serviceAccounts.signBlob is required to perform this operation on service account proj…

事象 Functionからstorageの署名付きURLを取得しようとしたら以下のエラーが発生した。 Error: Identity and Access Management (IAM) API has not been used in project 原因 GCPのコンソールにて、Management (IAM) APIが無効になっていたことが原因。 対…

起こったこと firebaseのfunctionをデプロイしたら以下のエラーが発生 ✔ functions: Finished running predeploy script. i functions: ensuring necessary APIs are enabled... ✔ functions: all necessary APIs are enabled i functions: preparing functi…

インストール可能なバージョンの確認 nodebrew ls-remote バージョンを指定してインストール nodebrew install-binary v8.14.0 バージョンを切り替える nodebrew use v8.14.0

事象 storageから画像を参照すると以下のエラーが発生 TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_13___default.a.storage is not a function 原因/対応 firebaseの設定ファイルでimport 'firebase/storage'のimport文が必要のため追加した 参考記事…

やりたいこと optionsを渡すのは非推奨 対応 やりたいこと 以下の警告を消したい。 Options props is deprecated, add sortable options directly as vue.draggable item, or use v-bind. optionsを渡すのは非推奨 以下のように、propsでoptionsをしているの…

やりたいこと バッチ書き込みを利用 参考 やりたいこと Firestoreにて、複数のドキュメントに対して一括で更新を行いたい。 バッチ書き込みを利用 .batch()で生成したオブジェクトにupdateしたいパスとオブジェクトをガンガン足していく。batch.commit()した…

Vue.Draggableパッケージをinstall 使用したいコンポーネントで呼び出す (補足) 参考記事 Vue.Draggableパッケージをinstall $ npm install --save vuedraggable 使用したいコンポーネントで呼び出す <template> <div class="board-task-contents" > <draggable> <div v-for="i in 20" :key = "`${i}`" class="task-card"> <h3>番号： {{ i }}</h3> <p>タスク詳細内容</p> </div> </draggable></div></template>

[:contens] eslint関連のパッケージをインポート package.jsonに以下を追加 { ... "husky": "^4.2.5", "lint-staged": "^10.2.2", ... "eslint-config-standard": "^14.1.0", "eslint-plugin-import": "^2.18.2", "eslint-plugin-node": "^10.0.0", "eslint-…

vue-routerの追加 rouoter用のindex.jsを作成 main.jsにrouterを追記 App.vueで<router-view>に書き換え 参考記事 vue-routerの追加 $ npm install --save-dev vue-router rouoter用のindex.jsを作成 src/router配下にindex.jsを作成 import Vue from 'vue'; import VueRo</router-view>…

Vueプロジェクトの作成 Vuetify、PWAの準備 manifest.jsonの追加 firebaseにデプロイ 動作確認 とりあえず Vueプロジェクトの作成 $ vue create the-simplist Vuetify、PWAの準備 $ vue add vuetify $ vue add pwa manifest.jsonの追加 /publics配下にmanife…

事象 対応方針 参考記事 vue createしたら発生 事象 ERROR Error: spawn yarn ENOENT Error: spawn yarn ENOENT at Process.ChildProcess._handle.onexit (internal/child_process.js:232:19) at onErrorNT (internal/child_process.js:407:16) at process._…

VueCLIの用意 既存のVueプロジェクトをPWA化 manifest.jsonの作成 参考記事 VueCLIの用意 VueCLIが用意できていなかったので npm install -g @vue/cli 既存のVueプロジェクトをPWA化 vue add @vue/pwawを実行 -> % vue add @vue/pwa Installing @vue/cli-pl…

事象 対応 事象 internal/modules/cjs/loader.js:583 throw err; ^ Error: Cannot find module 'sass' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Function.Module._load (internal/modules/cjs/loader.js:507:25) at…