Module 1: Creating a Cordova Project(和訳)
ステップ
Node.jsのバージョン確認
1.最新バージョンのNode.jsがシステムにインストールされていることを確認して下さい。
(メモ) 本記事では
v12.10.0
で進めます👍
$ node -v v12.10.0
Cordovaのインストール
2.Macの場合は[ターミナル]を、Windowsの場合は[コマンドウィンドウ]を開いてください。
次に、Cordova CLI
をインストールするために以下のコマンドを実行します。
$ npm install -g cordova
Macの場合は以下を実行
$ sudo npm install -g cordova
既にCordovaをインストール済みの場合は、最新バージョンにアップデートして下さい。
$ npm update -g cordova
または
$ sudo npm update -g cordova
作業ディレクトリの準備
3.作業するディレクトリに移動しておいて下さい
(メモ) 本記事では
study-cordova
を作業用ディレクトリとして進めます。👍
Cordovaプロジェクトの作成
4.Cordova CLIを使用して、workshopディレクトリにWorkshopという名でCordovaプロジェクトを作成しましょう。
$ cordova create workshop com.yourname.workshop Workshop
(メモ) 実行するとworkshopが作成される。
Cordovaプロジェクトへ移動
5.プロジェクトのディレクトリに移動します。
$ cd workshop
iOS/Androidプラットフォームの追加(任意)
6.iOSプラットフォームのサポートを追加します。
$ cordova platforms add ios Using cordova-fetch for cordova-ios@~4.5.1 Adding ios project... Creating Cordova project for the iOS platform: Path: platforms/ios Package: com.yourname.workshop Name: Workshop iOS project created with cordova-ios@4.5.5 Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project Failed to restore plugin "cordova-plugin-whitelist" from config.xml. You might need to try adding it again. Error: Failed to fetch plugin cordova-plugin-whitelist@1.3.4 via registry. Probably this is either a connection problem, or plugin spec is incorrect. Check your connection and plugin name/version/URL. Failed to get absolute path to installed module --save flag or autosave detected Saving ios@~4.5.5 into config.xml file ...
7.Androidプラットフォームのサポートを追加します。
$ cordova platforms add android Using cordova-fetch for cordova-android@~6.3.0 Adding android project... Creating Cordova project for the Android platform: Path: platforms/android Package: com.yourname.workshop Name: Workshop Activity: MainActivity Android target: android-26 Subproject Path: CordovaLib Android project created with cordova-android@6.3.0 Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project Failed to restore plugin "cordova-plugin-whitelist" from config.xml. You might need to try adding it again. Error: Failed to fetch plugin cordova-plugin-whitelist@1.3.4 via registry. Probably this is either a connection problem, or plugin spec is incorrect. Check your connection and plugin name/version/URL. Failed to get absolute path to installed module --save flag or autosave detected Saving android@~6.3.0 into config.xml file ...
プラグインの追加
8.workshopディレクトリで、以下のコマンドを実行して基本的なプラグインを追加してください。
$ cordova plugin add cordova-plugin-device Installing "cordova-plugin-device" for android Installing "cordova-plugin-device" for ios Adding cordova-plugin-device to package.json Saved plugin info for "cordova-plugin-device" to config.xml
$ cordova plugin add cordova-plugin-console Installing "cordova-plugin-console" for android Installing "cordova-plugin-console" for ios Plugin doesn't support this project's cordova-ios version. cordova-ios: 4.5.5, failed version requirement: <4.5.0 Skipping 'cordova-plugin-console' for ios Adding cordova-plugin-console to package.json Saved plugin info for "cordova-plugin-console" to config.xml
なんかスキップされてるけど無視でok
workshopディレクトリの構造について
9.workshop配下の構造について説明しておきますね。
www
ディレクトリは、HTML/JavaScriptアプリをコーディングする場所です。index.htmlファイルをブラウザで開くと、Cordova CLIによって生成されたデフォルトアプリが確認できます。(メモ) 開くとこんな感じ
platforms
ディレクトリは、Cordovaがアプリをそれぞれのプラットフォーム用にビルドした成果物が格納される場所です。このディレクトリに格納されるもの(ビルド成果物)は、Cordova CLIによって自動で生成されます。このディレクトリ内のファイルを編集することはありません。config.xml
ではアプリ情報(name, author等)が記述されるファイルです。
原文/参考記事
次のチュートリアル
JavaScriptの歴史(1)
ブラウザを作り出した天才研究者
ブラウザとは...
パソコンやスマートフォン等を利用してWebサーバに接続するためのソフトウェアであり、ウェブページを表示したり、ハイパーリンクをたどったりするなどの機能がある。(wikiから引用)
HTMLの誕生
欧州原子核研究機構に勤めていたティム・バーナーズ=リーは、研究に関する資料や文献をコンピュータを使って管理していました。しかし、文書間を関連づけて管理することができずに頭を抱えていました。
「何かいい方法はないか」と悩んでいたティムは、1989年に文書同士をリンク
させて管理する仕組みを作り出しました。この結果、文書から関連する文書へと辿ることができ、研究資料の閲覧/管理が効率化されました。
この時、ティムが考案した文書同士をリンクさせて管理する仕組みが、HTML(HyperText Markup Language)の起源でした。
ブラウザの誕生
関連づけて文書管理を行えるようになったティムは、これに満足せずに
「文書管理ができたのだから、この仕組みとインターネットを使って今度は研究者同士で資料を共有できる仕組みを作ろう!」
と動き出しました。その結果、1991年にティムは同僚達と世界で初めてのブラウザとなる World Wide Webを開発し、遠方にいる研究者と文書の共有を実現しました。
そして、ティムの所属していた欧州原子核研究機構は、1993年4月30日にWorld Wide Webのフリーソフトウェアにし、ソースコードや仕組み公開しました。
簡単にインターネット上で文書(ドキュメント)を共有することができるブラウザの仕組みは、世界が注目しました。その結果、続々と新しいブラウザが誕生しました。これがブラウザ戦争の幕開けになることは誰も予想していませんでした。。。
第一次ブラウザ戦争
つづく
まとめ
1989年 HTML誕生 by ティム 1991年 初のブラウザ World Wide Web誕生 by ティム 1993年 欧州原子核研究機構がWorld Wide Webをフリーソフト化 ...
※技術勉強を色々な観点からもしたくなり残しているメモ記事です。自分の理解を深めるために、登場人物の発言は少々歪曲しています。
(WIP)DockerでDjango環境を構築した時のメモ(1)
- 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の作成
Django==3.1.1 uwsgi mysqlclient
- docker-compose.ymlの作成
version: '3' services: # nginxコンテナの設定 nginx: image: nginx ports: - "8000:8000" volumes: - ./nginx/conf:/etc/nginx/conf.d - ./nginx/uwsgi_params:/etc/nginx/uwsgi_params - ./static:/static depends_on: - django # DBコンテナの設定 db: image: mysql:5.7 command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci ports: - "3306:3306" environment: MYSQL_ROOT_PASSWORD: root MYSQL_DATABASE: todoList MYSQL_USER: user MYSQL_PASSWORD: password TZ: 'Asia/Tokyo' volumes: - ./mysql:/var/lib/mysql - ./sql:/docker-entrypoint-initdb.d # djangoコンテナの設定 web: build: ./web command: uwsgi --socket :8001 --module app.wsgi --py-autoreload 1 --logto /tmp/mylog.log volumes: - ./src:/code - ./static:/static expose: - "8001" depends_on: - db
GRANT ALL PRIVILEGES ON test_todoList.* TO 'user'@'%'; FLUSH PRIVILEGES;
- uWSGIの設定(ここの手順は不要っぽい) nginx/uwsgi_paramsファイルの作成
uwsgi_param QUERY_STRING $query_string; uwsgi_param REQUEST_METHOD $request_method; uwsgi_param CONTENT_TYPE $content_type; uwsgi_param CONTENT_LENGTH $content_length; uwsgi_param REQUEST_URI $request_uri; uwsgi_param PATH_INFO $document_uri; uwsgi_param DOCUMENT_ROOT $document_root; uwsgi_param SERVER_PROTOCOL $server_protocol; uwsgi_param REQUEST_SCHEME $scheme; uwsgi_param HTTPS $https if_not_empty; uwsgi_param REMOTE_ADDR $remote_addr; uwsgi_param REMOTE_PORT $remote_port; uwsgi_param SERVER_PORT $server_port; uwsgi_param SERVER_NAME $server_name;
- 設定ファイル(nginx/conf/app_nginx.conf)の作成
upstream django { ip_hash; server python:8001; } server { listen 8000; server_name 127.0.0.1; charset utf-8; location /static { alias /static; } location / { uwsgi_pass django; include /etc/nginx/uwsgi_params; } } server_tokens off;
デフォルトでは/etc/nginx/conf.d配下にはdefault.conf(以下)が存在する
- Djangoプロジェクトの作成
docker-compose run web django-admin.py startproject app .
- mysqlとの接続 src/app/settings.pyの修正
""" Django settings for app project. Generated by 'django-admin startproject' using Django 3.1.1. For more information on this file, see https://docs.djangoproject.com/en/3.1/topics/settings/ For the full list of settings and their values, see https://docs.djangoproject.com/en/3.1/ref/settings/ """ # mysqlの設定 START DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'todoList', 'USER': 'user', 'PASSWORD': 'password', 'HOST': 'db', 'PORT': '3306', } } # mysqlの設定 END
- マイグレーションの実施
docker-compose run web ./manage.py makemigrations docker-compose run web ./manage.py migrate
- 管理者の設定
docker-compose run web ./manage.py createsuperuser
userName: admin email:admin@nagano.com password:hogefuga1
# CSSの適用 START STATIC_ROOT = '/static' # CSSの適用 END
docker-compose run web ./manage.py collectstatic
- コンテナの起動
docker-compose up -d
起動後、http://localhost:8000へアクセスできればOK
参考記事
apkファイルからリリースファイルの作成までのメモ
事前準備
Cordovaのapkファイル作成時に--releaseオプションを指定する
npm run cordova-build-android --release
これだけだと、app-release-unsigned.apk
という署名なしのapkファイルが作成されることになる
署名付きapkファイルの作成手順
参考記事から引用
鍵の生成 keytool -genkey -v -keystore <鍵ファイル名> -alias <エイリアス名> -keyalg RSA -validity <有効期間> 署名apkの作成 jarsigner -verbose -tsa http://timestamp.digicert.com -keystore <鍵ファイル名> <apkファイル> <エイリアス名>
apkファイルの最適化
zipalign -v 4 <元のapkファイル> <最適化後のapkファイル>
最適化後のapkファイルは、Google playのリリースファイルとして利用できる
参考記事
Cordovaで作成したandroidアプリのアイコン設定をした時のメモ
デフォルトのアイコンが表示される
以下、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 src="res/android/hdpi.png" density="hdpi" /> <icon src="res/android/xhdpi.png" density="xhdpi" /
src-cordova/res
配下に該当メニューアイコンを作成して置いておく。
再度デバッグして確認して、アイコンが指定したものが表示されていればok
粗いけどok。笑
参考記事
メニューアイコンサイズのガイドラインについて
blog.excite.co.jp
cordovaの導入メモ
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/hogehoge.../src-cordova/www/.gitignore'
ビルド手順
対象プロジェクト配下にて
cordova create src-cordva npm run cordova-build-android
警告が出力される
No platforms added to this project. Please use
cordova platform add <platform>
.
src-cordova配下で
cordova platform add android
再度、対象プロジェクト配下にて
npm run cordova-build-android
ビルド完了時にapkファイルが作成される
BUILD SUCCESSFUL in 30s 43 actionable tasks: 43 executed Built the following apk(s): ...
デバック手順
実機をUSB接続した状態で以下のコマンドを実施
npm run cordova-serve-android
アイコンはcordovaのマークだが実機にandroidアプリとしてインストールできた。
参考記事
【Firebase】Functionからstorageの署名付きURLを取得しようとしたらError: 7 PERMISSION_DENIED: Missing or insufficient permissions.
事象
[Firebase] Functionからstorageの署名付きURLを取得しようとしたら 以下のエラーが発生(コンソール画面からIAM APIは有効に設定済み かつ トークン作成者の権限も付与済)
Error: 7 PERMISSION_DENIED: Missing or insufficient permissions.
原因
IAM有効にすると、この辺りの認証情報の初期設定が必要になるっぽい? firebase.google.com
対応方針
const serviceAccount = require('<鍵を配置した階層>') admin.initializeApp({ credential: admin.credential.cert(serviceAccount), databaseURL: 'https://<project-name>.firebaseio.com', storageBucket: '<project-name>.appspot.com'' })
以上で、storageの署名付きURLを取得ができた。