2020年10月23日金曜日

「こうべ避難ナビ(for Android)」リリースしました!

前回の続きです。

「こうべ避難ナビ(for iPhone/iPad)」バージョンアップしました!

その前に、、、

「こうべ避難ナビ」をAndroid向けにもリリースしました!
Androidスマホをお持ちの方はぜひご利用ください!
Get it on Google Play
iPhone/iPad向けとAndroid向けの違いの一つは、電話をかける操作です。
iPhone/iPad向けでは、ウィンドウ内の電話番号のリンクをタッチします。




















Android向けでは、ウィンドウを長押しします。




















経路の表示方法変更

iPhone/iPad向けVer.1.1では、アプリ内でルートを表示していました。

今回、ルート表示は使い慣れたマップアプリにまかせています。
iPhone/iPad向けではウィンドウ内の画像を、Android向けではウィンドウをタッチすると、マップアプリが起動し、徒歩でのルートが表示されます。

iPhoneとAndroidの両方をお持ちの方は、それぞれが提示する経路を比べてみても面白いかもしれません(笑)


遠く離れた場所ではルートがまったく異なることも。
こんなに遠くまで歩いて避難することはないでしょうけど・・・














またいつか、どこかで。

2020年10月16日金曜日

「こうべ避難ナビ(for iPhone/iPad)」バージョンアップしました!

4年前にリリースしたiPhone/iPad向けアプリ「こうべ避難ナビ」をこの度、バージョンアップしました!
神戸市内にお住まいの方はぜひご利用ください!

Download on the App Store

Ver.2.0の主な変更点は、

  • 緊急避難場所データの更新
  • 緊急避難場所情報の表示変更
  • 経路の表示方法変更
です。

これらを2回にわたり、ご紹介します。


緊急避難場所データの更新

緊急避難場所のデータは元々、神戸市からオープンデータとして提供されていました。
現在はオープンデータポータルサイトから消えていますが、その代わりに

  • Excel/CSV(2017年・位置情報あり)
  • PDF(2018~2019年・位置情報なし)

を、神戸市のサイトからダウンロードすることができます。

オープンデータ・2017年版のExcel/CSVともに、位置情報が正確でないデータが少なからずあり、Ver.1.1では正しい場所を示していない避難場所がありました。避難場所を表示するサイトやアプリは他にもありますが、それらにも同様の誤りを見つけることができます。

今回、市内の全避難場所の位置を地図上で確認し、正しい位置に表示されるよう緯度・経度を修正しました。また、小学校の統合などのため避難場所が変更されており、PDFに記載されている内容に合わせて、情報を更新しました。


緊急避難場所情報の表示変更

Ver.1.1では、避難場所をタッチすると表示されるウィンドウ内のiマークをタッチすると情報が表示されました。(下図左)
Ver.2.0では、ウィンドウ内に情報を表示し、よりカンタンに必要な情報にアクセスできるよう変更しました。(下図右)













またいつか、どこかで。

2020年10月9日金曜日

MacBook Proがやって来た!

社内にMac (iMac(21.5-inch, Late 2015))が一台あります。

MojaveだったかHigh Sierraだったか、OSをバージョンアップしたタイミングでBluetoothが使えなくなってしまい、
以降はキーボードとマウスを有線接続して、使い続けてきました。
その点は不便ではなかったのですが、速度の遅さに耐えかねて、今年発売されたMacBook Proを購入しました。


開封の儀

注文翌日に届きました。早い!


感動の対面!


電源アダプタとUSB-Cケーブルが同梱されています。


メールのバックアップと復元

移行すべきデータが少なく、どちらかと言えばまっさらな状態で使いたかったため、「移行アシスタント」は使わず、メールだけを手動でバックアップ・復元しました。

iMacの「メール」でメールボックスを書き出します。
MacBook Proの「メール」でメールボックスを読み込みます。
「Apple Mail」を選択します。
書き出したZipファイルを解凍し、選択します。
読み込む項目を選択します。
(画面では全項目を選択していますが、実際には送信済みとゴミ箱は選択しませんでした。)
無事にインポートされました。

一週間使ってみて

最新機種なので、速度は大満足です。
(現在、iOSアプリ開発の終盤に差し掛かっていますが、もっと早く購入していれば余計なストレスがなかっただろうなあ、と。)

Touch Barはほとんど使っていませんが、音楽再生時の音量変更、再生位置変更、早送りなどは便利ですね。


またいつか、どこかで。

2020年10月2日金曜日

AndroidアプリのDBファイルを取り出してみた!

Xamarin.Formsでモバイルアプリを開発しています。
デバッグしているAndroid端末からSQLiteのデータベースファイルを取り出す方法のメモです。

まず、DBファイルの場所を確認します。
Visual Studioの「ツール」-「Android」から「Android Adb コマンド プロンプト」を起動します。
シェルを起動し、パッケージ名を指定してrun-asコマンドを実行します。


> adb shell
(デバイス名):/ $ run-as jp.co.aimek.xxxxx


リリースビルドされたアプリでは


(デバイス名):/ $ run-as jp.co.aimek.xxxxx
run-as: package not debuggable: jp.co.aimek.xxxxx


となるので、デバッグ版が必要です。

アプリのフォルダを確認します。


(デバイス名):/data/data/jp.co.aimek.xxxxx $ ls
cache code_cache files shared_prefs


filesフォルダの中に入ります。


(デバイス名):/data/data/jp.co.aimek.xxxxx $ cd files
(デバイス名):/data/data/jp.co.aimek.xxxxx/files $ ls -a
. .. .__override__ .config .local


.localの中をさらにたどっていくと、DBファイルが見つかりました。


(デバイス名):/data/data/jp.co.aimek.xxxxx/files $ cd .local
(デバイス名):/data/data/jp.co.aimek.xxxxx/files/.local $ ls
share

(デバイス名):/data/data/jp.co.aimek.xxxxx/files/.local $ cd share
(デバイス名):/data/data/jp.co.aimek.xxxxx/files/.local/share $ ls
XXXXX.db3


シェルを終了し、adbコマンドでDBファイルを取り出します。


> adb exec-out run-as jp.co.aimek.xxxxx cat files/.local/share/XXXXX.db3 > XXXXX.db3


またいつか、どこかで。

2020年9月23日水曜日

VSCode + Python + Flask + Docker で環境構築 #03. 運用環境を構築してみる

どうも、最近うちの娘(3歳)が「アレクサ、テレビ付けて」と
リモコンを使わなくなったことに一抹の不安を覚える
もりもりです。

今回はFlaskアプリやサービスを作って公開する場合の運用環境についてです。

#01. Flaskアプリをdocker上で動かしてみる
#02. vscodeのRemote Developmentでデバッグしてみる
今回はこちら → #03. 運用環境を構築してみる

まずは

第1回、第2回で作ったコンテナをそのままどこかのクラウドサービスへ
デプロイしたらダメなの?というところですが
公式ドキュメントでは以下のように書かれています。

When running publicly rather than in development,
you should not use the built-in development server (``flask run``).
The development server is provided by Werkzeug for convenience,
but is not designed to be particularly efficient, stable, or secure.

Instead, use a production WSGI server.

ということのようです。
flask runで実行した開発サーバーを本番環境で使用するべきではないと。
効率性、安定性、セキュリティを意識して設計してはいないよと。

代わりに本番環境ではWSGIサーバーを使ってねと。

てなわけで、WebサーバーとAppサーバーを用意し
WebサーバーとFlaskを繋ぐインターフェース
WSGI (Web Server Gateway Interface) を利用して
通信する環境をコンテナで作成していきます。

今回使用するWSGIサーバーはuWSGIです。
Flask + Docker + Nginx + uWSGI で環境を作っていきたいと思います。

ちなみにWSGIの読み方は「ウィズギー」だそうです。

ディレクトリ構成


flask-product
  ├── app
  │ ├── Dockerfile
  │ ├── requirements.txt
  │ ├── run.py
  │ └── uwsgi.ini
  ├── web
  │ ├── Dockerfile
  │ └── nginx.conf
  └── docker-compose.yml

ソースコードはGithubにあります。


app/Dockerfile


WORKDIRを変更し、CMDを追加します。

# base image
FROM python:3.8.5

ARG project_dir=/var/www/

# workdir にファイル等追加
COPY requirements.txt $project_dir

# workdir
WORKDIR $project_dir

# upgrade pip
RUN pip install --upgrade pip
RUN pip install --no-cache-dir -r requirements.txt

CMD ["uwsgi","--ini","/var/www/uwsgi.ini"]

追加したCMDですが、 docker-compose.ymlに下記を追加しても問題ないと思います。(また試しときます。)
command: uwsgi --ini /var/www/uwsgi.ini

app/equirements.txt & run.py


uwsgiをインストールするので追加します。
Flask
uwsgi

app/uwsgi.ini


uWSGIの設定ファイルです。
[uwsgi]
wsgi-file = run.py
callable = app
master = true
processes = 1
socket = :3031

web/Dockerfile


公式イメージをベースとします。
# base image
FROM nginx:latest

CMD ["nginx", "-g", "daemon off;", "-c", "/etc/nginx/nginx.conf"]

web/nginx.conf


Nginxの設定ファイルです。
user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    upstream uwsgi {
        server app-server:3031;
    }

    server {
        listen 80;
        charset utf-8;

        location / {
            include uwsgi_params;
            uwsgi_pass uwsgi;
        }

    }
}

31行目のホスト名にはdocker-compose.ymlで指定したapp側のホスト名を指定します。

docker-compose.yml


コンテナをapp-serverとweb-serverの2つに分けます。
ホスト名も忘れずに設定しておきます。
version: "3"

services:
    app:
        container_name: app-server
        hostname: app-server
        build: ./app
        volumes:
            - "./app:/var/www/"
        ports:
            - "3031:3031"
        environment:
            TZ: Asia/Tokyo
  
    web:
        container_name: web-server
        hostname: web-server
        build: ./web
        volumes:
            - "./web/nginx.conf:/etc/nginx/nginx.conf"
            # nginxのログをホストOS側に出力
            - "/tmp/nginx_log:/var/log/nginx"
        links:
            - app
        ports:
            - "4231:80"
        environment:
            TZ: Asia/Tokyo

コンテナを起動して動作確認


$ docker-compose up -d

コンテナが起動すればブラウザから下記にアクセスするだけです。

http://localhost:4231


はい、運用環境用のコンテナができました。
あとはNginxやuWSGIの設定を本番用にちゃんと設定してから
どこかのクラウドサービスへデプロイしてあげればよさそうですね。



以上、もりもりでした。

2020年9月15日火曜日

Blogger.comでSyntaxHighlighterからPrism.jsに乗り替え

どうも、もりもりです。

ソースコードなどをキレイに見せてくれるシンタックスハイライト。
以前はSyntaxHighlighterを使用していたのですが
公式サイトがなくなってしまい? アクセスできなくなっていたため
ブログの表示がものすごく遅くなっていました。
(Githubにはソースはあるようですが)
そのためテーマから削除することに。。。

で、そのまま放置していたのですが、今回もりもりの連載
ソースコードなどを載せることがあったので他にイイのがないか
探してみました。
そこで見つけたのが Prism.js でした。
設定方法や使い方をメモとして残しておこうと思います。

プラグインの選定

まずはプラグインを選定します。
今回は下記のプラグインを使用します。
・Line Numbers
  行番号を表示
・Line Highlight
  指定行をハイライト
・Toolbar
  ツールボタンを表示するバーを追加
  Copy to Clipboard, Download Button, Show Language 使用時に必要
・Copy to Clipboard
  コピーボタンをツールバーに表示
・Autoloader
  ハイライトする言語を自動的にロード
・Command Line
  コマンドライン用

設定方法

bloggerのテーマ→カスタマイズ→HTMLの編集でHTMLを開き
</head>と</body>の直前に下記を追加します。

<head>
    ・・・
    ・・・
    <!-- Themes -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-tomorrow.min.css" />
<!-- All Themes
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-coy.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-dark.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-funky.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-okaidia.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-solarizedlight.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-tomorrow.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-twilight.min.css"/>
-->
    <!-- Line Numbers -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/line-numbers/prism-line-numbers.min.css" />
    <!-- Line Highlight -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/line-highlight/prism-line-highlight.min.css" />
    <!-- Toolbar (Copy to Clipboard, Download Button, Show Language 使用時に必要) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/toolbar/prism-toolbar.min.css" />
    <!-- Command Line -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/command-line/prism-command-line.min.css" />
</head>

<body>
    ・・・
    ・・・
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/prism.min.js"></script>
    <!-- Line Numbers -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
    <!-- Line Highlight -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/line-highlight/prism-line-highlight.min.js"></script>
    <!-- Toolbar (Copy to Clipboard, Download Button, Show Language 使用時に必要) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/toolbar/prism-toolbar.min.js"></script>
    <!-- Copy to Clipboard -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
    <!-- Autoloader -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/autoloader/prism-autoloader.min.js"></script>
    <!-- Command Line -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/command-line/prism-command-line.min.js"></script>
</body>
追加したいプラグインのlinkやscriptタグは下記から選択できます。

後から知ったのですが、下記の方がラクかも。

使い方

■ Line Numbers

<pre class="line-numbers">
<code class="language-cs">if (string.IsNullOrEmpty(str)))
{
    // Nullまたは空文字の場合
}
else
{
    // Nullでも空文字でもない場合
}</code>
</pre>
こんな感じで<pre class="line-numbers">と指定すると
下記のように行番号が表示されます。
language-xxxlang-xxxでもOKです。
if (string.IsNullOrEmpty(str)))
{
    // Nullまたは空文字の場合
}
else
{
    // Nullでも空文字でもない場合
}

■ Line Highlight

<pre class="line-numbers" data-line="1,5-8">
<code class="lang-cs">if (string.IsNullOrEmpty(str)))
{
    // Nullまたは空文字の場合
}
else
{
    // Nullでも空文字でもない場合
}</code>
</pre>
こんな感じで<pre data-line="1,5-8">と指定すると
下記のように指定行がハイライト表示されます。
if (string.IsNullOrEmpty(str)))
{
    // Nullまたは空文字の場合
}
else
{
    // Nullでも空文字でもない場合
}

■ Command Line

※近々更新します!!!

なかなかイイ感じですね。
今回はテーマをTomorrowNightにしてますが他にも7種類あります。
サポートされている言語も多いですし今風な感じで気に入りました。
公式サイトでテーマやサポート言語、プラグインなど確認できます。
過去の記事でSyntaxHighlighterを使用していた箇所も
随時修正していきたいと思います。


以上、もりもりでした。

2020年9月13日日曜日

VSCode + Python + Flask + Docker で環境構築 #02. vscodeのRemote Developmentでデバッグしてみる

どうも、もりもりです。

今回はPython + Flaskの開発環境をDocker上に持っていき
コンテナ上にあるソースをvscodeでデバッグしてみます。

#01. Flaskアプリをdocker上で動かしてみる
今回はこちら → #02. vscodeのRemote Developmentでデバッグしてみる
#03. 運用環境を構築してみる

拡張機能「Remote Development」をインストール


まずは拡張機能をインストールします。


Extension Packとなっており、インストールすると下記の3つがインストールされます。

・Remote - WSL
・Remote - Containers
・Remote - SSH

今回はコンテナ上のソースをデバッグするので「Remote - Containers」を使用。

ディレクトリ構成


flask-dev
  ├── .devcontainer
  │ └── devcontainer.json
  ├── .vscode
  │ └── launch.json
  ├── docker-compose.yml
  ├── Dockerfile
  ├── requirements.txt
  └── run.py

ソースコードはGithubにあります。


Dockerfile


前回と違い、今回はproject_dirは宣言するだけで、値を指定しません。

# base image
FROM python:3.8.5

ARG project_dir

# workdir にファイル等追加
ADD requirements.txt $project_dir

# workdir
# なければ新規作成
WORKDIR $project_dir

# upgrade pip
RUN pip install --upgrade pip
RUN pip install -r requirements.txt

docker-compose.yml


project_dirをここで設定します。
volumesで作業場にマウントします。

version: '3'

services:
    web:
        container_name: dev_flask
        build:
            context: .
            args:
                project_dir: "/work/"
        ports:
            - "5000:5000"
        volumes:
            - ".:/work"
        environment:
            TZ: Asia/Tokyo
            FLASK_ENV: "development"
        command: "sleep infinity"

requirements.txt & run.py


前回のファイルそのままです。

devcontainer.json を追加


ウィンドウ左下の赤枠をクリックし、
「Remote-container: Add Development Container Configuration Files...」を選択
docker-compose.ymlから設定ファイルを作成するため
「From 'docker-compose.yml'」を選択
これでdevcontainer.jsonが作成されるので編集します。
dockerComposeFileにyamlファイルが2つ指定されていますが、
一つ上の階層にあるファイルのみ使用するため、
設定ファイルと同階層にあるdocker-compose.ymlは削除します。

{
    "name": "RemoteDevFlask",
    "dockerComposeFile": [
        "../docker-compose.yml",
        // "docker-compose.yml"
    ],
    "service": "web",
    "workspaceFolder": "/work",
    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
    },
    "extensions": [
        "ms-python.python",
        "ms-python.vscode-pylance"
    ]
}

また、vscodeでPythonの開発するために必要な拡張機能を
コンテナにインストールするため、extensionsにPython関連の拡張機能を指定します。
指定する値は下記の赤枠のように、拡張機能名の右に表示されているIDです。

コンテナを開く


再度ウィンドウ左下にある赤枠部分をクリックし、
「Remote-Containers: Reopen in Container」を選択します。
無事にコンテナ上のProjectDir「work」を開くことができました。
vscodeの拡張機能を確認すると、コンテナ上には下記二つがインストールされていることがわかります。
(アイコン右下にリモートだと認識できるマークが付いている)
インストールされていないようであれば、通常と同様にコンテナに対して
画面から拡張機能をインストールすることが可能です。

デバッグ用設定ファイルを作成


vscodeのデバッグメニューを選択すると、まだデバッグするための設定ファイルがないため
下記のような表示になっています。
※ run.pyを開いた状態でデバッグメニューを選択する必要あり。

まずはlaunch.jsonを作成します。
今回はFlaskアプリのため「Flask」を選択
「run.py」を入力


ソースコードの任意の場所にブレークポイントをはり
いざデバッグ実行。
無事にデバッグできるようになりました。

開発環境をDocker化してしまえば、以下のようなメリットがありますね。
・自分のPCに無駄なものをインストールする必要がない
・メンバー全員が同じ環境で開発できる
・環境構築の手間が省ける
・運用環境と同じ環境でデバッグができる

ただイイことばかりではなく、WindowsPCだとDocker環境の構築が少しややこしそう?
Windows10のバージョン2004からはWSL2(Windows subsystem for linux 2)のおかげで
Hyper-VなしでもLinuxコンテナを動かせるようになったとか?
まだ2004にアップデートしてないのでアップデートしたら試してみようと思います。


以上、もりもりでした。