長野エンジニアライフ

東京から長野に移住したエンジニアのブログです。🦒🗻⛰

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が作成される。 f:id:kawakeee:20201103220510p:plain

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 ...

(メモ) 実行するとworkshopディレクトリ配下に、platformsとpluginsディレクトが生成される。 f:id:kawakeee:20201103221748p:plain

プラグインの追加

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

(メモ)チュートリアルで指定しているプラグイン名は古いため、修正しています。

stackoverflow.com

workshopディレクトリの構造について

9.workshop配下の構造について説明しておきますね。

  • wwwディレクトリは、HTML/JavaScriptアプリをコーディングする場所です。index.htmlファイルをブラウザで開くと、Cordova CLIによって生成されたデフォルトアプリが確認できます。

    (メモ) 開くとこんな感じ
    f:id:kawakeee:20201103222934p:plain

  • platformsディレクトリは、Cordovaがアプリをそれぞれのプラットフォーム用にビルドした成果物が格納される場所です。このディレクトリに格納されるもの(ビルド成果物)は、Cordova CLIによって自動で生成されます。このディレクトリ内のファイルを編集することはありません。

  • 追加するプラグインpluginsディレクトリに格納されます。

  • config.xmlではアプリ情報(name, author等)が記述されるファイルです。

原文/参考記事

ccoenraets.github.io

次のチュートリアル

kawakeee.hatenablog.com

JavaScriptの歴史(1)

ブラウザを作り出した天才研究者

ブラウザとは...
パソコンやスマートフォン等を利用してWebサーバに接続するためのソフトウェアであり、ウェブページを表示したり、ハイパーリンクをたどったりするなどの機能がある。(wikiから引用)

HTMLの誕生

欧州原子核研究機構に勤めていたティム・バーナーズ=リーは、研究に関する資料文献をコンピュータを使って管理していました。しかし、文書間を関連づけて管理することができずに頭を抱えていました。

「何かいい方法はないか」と悩んでいたティムは、1989年に文書同士をリンクさせて管理する仕組みを作り出しました。この結果、文書から関連する文書へと辿ることができ、研究資料の閲覧/管理が効率化されました。

この時、ティムが考案した文書同士をリンクさせて管理する仕組みが、HTML(HyperText Markup Language)の起源でした。

ja.wikipedia.org

ブラウザの誕生

関連づけて文書管理を行えるようになったティムは、これに満足せずに

「文書管理ができたのだから、この仕組みとインターネットを使って今度は研究者同士で資料を共有できる仕組みを作ろう!」

と動き出しました。その結果、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)

作業を行う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の作成
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

  • djangoサイトのCSS適用 web/settings.pyの修正
# CSSの適用 START
STATIC_ROOT = '/static'
# CSSの適用 END
docker-compose run web ./manage.py collectstatic
  • コンテナの起動
docker-compose up -d

起動後、http://localhost:8000へアクセスできればOK

参考記事

qiita.com

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のリリースファイルとして利用できる

参考記事

qiita.com

Cordovaで作成したandroidアプリのアイコン設定をした時のメモ

デフォルトのアイコンが表示される

以下、Cordovaで作成したandroidアプリのアイコンが未設定の場合 f:id:kawakeee:20200813023019p:plain

アイコン設定手順

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 f:id:kawakeee:20200813024424p:plain

粗いけどok。笑

参考記事

cordova.apache.org

メニューアイコンサイズのガイドラインについて
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アプリとしてインストールできた。

参考記事

vuetifyjs.com

qiita.com

【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

対応方針

  • GCPのコンソール画面からfirebase-adminsdkの鍵をJSON形式で作成
    f:id:kawakeee:20200610013009p:plain

  • functionのソース配下に鍵を配置

  • initializeAppを以下のように呼び出して初期化
const serviceAccount = require('<鍵を配置した階層>')
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: 'https://<project-name>.firebaseio.com',
  storageBucket: '<project-name>.appspot.com''
})

以上で、storageの署名付きURLを取得ができた。

参考記事

qiita.com

node.jsからサービスアカウント使ってFirebaseへ接続する時のメモ · GitHub