2019年4月8日月曜日

ドラッグ&ドロップ(ノンプログラミング)でアプリが作れるサービス2019年まとめ

ビジュアルプログラミングでアプリが作れるサービスをまとめてみました。
いずれもドラッグアンドドロップで、画面設計からプログラミングまでできるので、とても簡単(?)にスマホアプリが作れます。
Monaka に挫折した方や、Buildy、Yappli、アプスタ、BRAND などでは実現できないアプリを構築したい方向けです。

なお、2019年4月8日時点での評価です。

Thunkable

https://thunkable.com/
iPhone と Android の両方で機能するアプリを作ることができます。
無料版だと作成しているもの(プロジェクト)が Thunkable Public Gallery に公開されるという変った料金体系です。
つまり無料版で作られたものは、誰でも自由にプレビューしたりコピーしたりできます。
あまりパーツの種類は多くないですが、基本的なことから Firebase との連携、マネタイズは一通り可能です。

ただ、コミュニティーが、新しい Thunkable X(上記)と古い Thunkable Classic の記事が混在していて(タグ分けはされている)ちょっと混乱します。
個人的にアイコンフォントの利用が、まだできない点が残念です。(Classic だとできる)

AppyBuilder

MIT App Inventor の派生サービス。そのため Android のみです。
その分、利用できるパーツの種類が多く、画面設計や機能の自由度は高いです。
さらに Firebase との連携やマネタイズなども一通り可能な上に、完全に無料という点が驚きです。
ただちょっと全体的に古臭いw

Kodular

こちらも MIT App Inventor の派生サービス。やっぱり Android のみです。
AppyBuilder とできることに大差はありませんが、2017年にスタートしたサービスなので流行りの(?)画面構成などが作りやすいです。
当然のように無料で逆に怖いw

Composer 3

https://www.appgyver.com/
旧 AppArchitect かつ旧 Composer という、ややこしい過去を持つサービスです。
iPhone と Android の両方に向けたアプリを出力できるようですが、正直、利用できるパーツの種類が少なく、上記のサービスに比べると機能面で劣ります。
また、無料試用では実機テストができないようです。というかドキュメントが古い、または不足している印象です。
チャットでお話を伺ったところ、B2E(従業員向け)アプリにフォーカスしていて、最新版がリリース間近とのことです。

stencyl

http://www.stencyl.com/
これは2Dゲーム作成ソフトウェアです。
無料版では Flash や HTML5 での出力が可能です。
スマホアプリとして出力するには年間契約の購入が必要です。
ゲーム作成に特化していますが、それ以外のアプリを作ることも可能です。
ただ、文字入力や日本語表示に難ありw

Ionic Creator

既に完全に放置されているサービスです。おすすめできません。
なお、本家の Ionic フレームワークそのものは順調に進化しているようですw

その他

諸々の理由で評価はしていませんが、以下のようなサービスもあります。

buildfire

店舗向けのアプリ作成サービス。国内サービスを利用したほうが良い。

yapp

基本有料。国内の yapp.li というサービスとは別物。

Appy Pie

主に店舗向けのアプリ作成サービス。機能を選択するだけで作れたりする。

appery.io

基本有料。全然ノンプログラミングじゃないw

applican

今回紹介する唯一の国内サービス。全然ノンプログラミングじゃないw

以上!

おしまーい。

2019年1月28日月曜日

Node-RED v0.19.5 の file ノードで日本語を出力すると文字化けする

まるで v0.19.5 が悪いかのようなタイトルですが、何が原因かは分かってません(ぉぃ)

AWS 上の Node-RED v0.19.4 なら大丈夫なのに Azure 上の Node-RED v0.19.5 だと file ノードで日本語を含むテキストを出力すると、ガッツリ文字化けします。
ちな、どちらも Ubuntu です。

しょうがないので Azure 上の Node-RED v0.19.5 では exec ノードを使ってテキストファイル書き出してます。

こーいうのどこに聞けば良いのかなー?(´・ω・`)

【2019/01/30追記】
Raspberry Pi (Raspbian) の Node-RED v0.19.5 でも文字化けしました。
えー、ダウングレードってどうやるーん?(´・ω・`)

【2019/02/12追記】
一度 npm で削除してから v0.19.4 を再インストールしたら文字化けしなくなりました。
ちなみに v0.20.0-beta.4 では化けました。ぬー…

2019年1月21日月曜日

Node-RED を 80番ポート(port 80)でアクセスできるようにする方法

Node-RED は通常 1880 番 port を使用しますが、ブラウザ(HTTP)でアクセスしたときに使用される標準の 80 番 port でアクセスできるようにする方法です。

なお、環境は Linux (Ubuntu)です。

Node-RED の設定は変更しなくて OK

さて、そもそも Node-RED の setting.js には uiPort という設定項目があるので、そこを変えればいいのかと思いきや、1024 以下のポートは root の権限が必要になるので、その方法では  Node-RED を root で実行しなければならなくなります。
しかし、それはセキュリティ的に良くないので、一般的には 80 番ポートへのアクセスを 1880 番へ転送する、という手法が取られます。

なので、uiPort の設定を変更する必要はありません。

80 番ポートから 1880 番ポートへリダイレクトする設定

では、具体的にどのようにリダイレクトさせるのかというと、Linux に標準でインストールされている iptables というツールを利用します。
iptables はパケットフィルタリングや NAT などの設定を管理することができるツールですが、詳細についてはググってくださいw

とにかく手順だけ説明しますw
次のコマンドを実行することで、1880 番ポートから 80 番ポートへ転送されるようになります。
sudo iptables -A PREROUTING -t nat -p tcp --dport 80 -j REDIRECT --to-port 1880
ただし iptables は設定をメモリ上に記憶しているだけなので Linux が再起動すると設定が消えてしまいます。

iptables の設定を保存・永続化する

そこで、多くの場合は iptables-save と iptables-restore というコマンドを利用して、iptables の設定をファイルに書き出して、システム再起動時に読み込ませるという手法が取られています。

しかしここではより手軽に、インストールするだけで設定を永続化できる iptables-persistent というツールを利用することにします。
下記コマンドでインストールします。
sudo apt install iptables-persistent
インストール中に現在の設定で IPv4 と IPv6 の設定ファイルを作成するか聞かれるので、どちらも Yes を選択します。
これだけで、再起動しても iptables の設定が有効なままになります。わー便利!

ちなみに、設定ファイルは以下の場所にあります。
/etc/iptables/rules.v4
/etc/iptables/rules.v6

また、任意のタイミングで保存や読み込みをさせたい場合は、以下のコマンドを用いるようです。(動作未確認)
sudo netfilter-persistent save
sudo netfilter-persistent reload
おしまいヽ(=´▽`=)ノ

2018年12月20日木曜日

VirtualBox の使い方まとめ 2019年

自分用のメモなので、断片的だけど何かの役には立つかも。
VirtualBox のバージョンは 5.2.22
ホスト OS は win10
ゲストは win7 とか ubuntu とか CentOS7 とかです。

VirtualBox で 64bit の OS が選択できない時の対処法

VirtualBox へ 64 bit 版の OS をインストールしようと思ったのに、Windows7(32bit) とか Ubuntu(32bit) とかしか選択肢に表示されなくて困っていたら、どうやら BIOS設定 で CPU の 仮想化支援を有効(Enable)にする必要があるようです。

Intel 製 CPU なら Intel Virtualization Technolog (IntelVT)、AMD の場合は AMD Virtualization (AMD-V) という機能です。
なお、AMD-V の場合は BIOS設定で無効になるようなことはないそうなので、そもそも 64bit CPU なのに 32bit しか選べない、なんてことはないみたい。

環境によって BIOS の画面って違いますが、私の hp パソコンでは何故か Security の欄にありました。
頑張って探してくださいw

VirtualBox で VM VirtualBox Extension Pack がダブルクリックでインストールできない時の対処法

なんか落とした Extension Pack のファイルをダブルクリックすれば、VirtualBox 立ち上がってインストールできるらしいですが、私の環境(Windows10)の VirtualBox だと、立ち上がるだけで何もしてくれなかったので、以下のように手動(?)でインストールしましたとさ。
  1. VirtualBox マネージャーの環境設定を開く
  2. 拡張機能を選択
  3. なんか追加するっぽいボタンをクリック
  4. ダウンロードしておいた Extension Pack のファイルを選択
  5. おしまい

外付け USB ハードディスク を使いたい

そもそも USB を使うには上記 Extension Pack をインストールしておく必要があります。
なんで最初から組み込まれていないのか知らんけど、おそらくライセンスが違うからだと思います。仕事で使う時は注意です。
で、HDD の場合はさらに以下のような設定も必要です。
  1. VirtualBox マネージャーから当該仮想マシンの設定を開く
  2. 設定メニュー「USB」で USB コントローラを有効化して USB 3.0 とかを選択
  3. 続けて「USB デバイスフィルター」に利用したい HDD を追加すれば OK
  4. 仮想マシンを起動し直すのも忘れずに

ゲスト OS へネット経由でアクセスしたい

何も設定しないとゲスト OS は NAT でネットに接続されている状態なので、これだと外部からはポートフォワーディングしないと見えません。
サクッとアクセスしたい場合は以下の設定をするのです。
  1. VirtualBox マネージャーから当該仮想マシンの設定を開く
  2. 設定メニュー「ネットワーク」で「割り当て」を「ブリッジアダプター」にする
  3. 仮想マシンを起動!
  4. わーい
ブリッジアダプター以外の項目については
が分かりやすいでした。

ゲスト OS とフォルダ共有したい

ゲスト側に Guest Addition を入れると設定から簡単に共有できるようになります。
  1. ゲスト OS のウインドウメニュー「デバイス」から「Guest Additions CD イメージの挿入」を選択
  2. 指示に従い Guest Additions をインストール
  3. ゲスト OS をシャットダウン(再起動では以降の設定が反映されない)
  4. VirtualBox マネージャーから当該仮想マシンの設定を開く
  5. 設定メニュー「共有フォルダー」でホスト OS の共有したいフォルダを追加する
  6. 設定のオプション「自動マウント」を ON にしておけば、ゲスト OS を起動するだけで自動的にマウントされるので楽ちん
  7. ばんざい

2018年11月14日水曜日

redir コマンドでポートフォワードする方法

普通は iptables で転送するところを、わざわざ redir をインストールして実現する意図がよくわからない方法の備忘録。
なお、Raspberry Pi (Raspbian) で動作を確認。

使い方は
https://github.com/troglobit/redir
を参照。

そもそもインストールされていないので、まずはインストールする。
んで、ドキュメントに倣い以下のように実行。
sudo redir :80 127.0.0.1:8080
ポート番号は適宜変更しましょう。
例えば 1880 番の Node-RED に 80 番でアクセスできるようにするには
sudo redir :80 127.0.0.1:1880
です。

たぶん再起動のたびに実行しないとダメだよねコレ。
(ドキュメントに /etc/inetd.conf への追記サンプルあり)

2018年11月7日水曜日

Node-RED で簡単に Crypto を利用する方法(LINE の Bot とかで)

下記のノードを追加するだけで Crypto モジュールが使えるようになります。
settings.js(bluemix-settings.js)を書き換える必要はないです。

node-red-contrib-crypto-js

HMAC の MD5 とか SHA-2 とか使いたいぜ!ってときにサッと使えて便利です。(Encode と Decode が使い難いけどw)

LINE の X-Line-Signature 検証での利用例

そもそも必須じゃない処理を意地でも Node-RED でやろうという奇特な方向けの情報ですw
※LINE WORKSだと「X-WORKS-Signature」

LINE の改ざん検証用署名「X-Line-Signature」の検証方法

ニッチなので雑ですが、これでいけます↓
意地でもノードを使うの図
function ノードを使えばもっと簡単にできるところを、あえてノードを駆使してみましたw
ポイントは decode ノードの設定を Hex にしておくことです。
それ以外だと異なる値になります。

JSON 貼ると化けるブログなので、上の図を参考に各々頑張ってくださいw

settings.js を書き換える方法

ちなみに下記のようにすることで、function ノード内で crypto を利用することも可能になります。

1.settings.js の functionGlobalContext に追記
functionGlobalContext: {
  crypto: require( "crypto" )
},
2.Node-RED 再起動
3.function ノードで利用
const crypto = global.get('crypto');
上記ノードには含まれていない機能を利用したいときは、この方法にしましょう。

2018年10月19日金曜日

Oculus GO アプリ内で WebView (ブラウザ)を表示する方法

Oculus GO のアプリ内で WebView みたいにブラウザ機能を利用できると一気に便利なるので、なんかいい方法はないか調べてみました。(試してみたとは言っていないw)
先に言っておきます「まともなものはない」と。

なお、Unity を利用することが前提です。
また、空間上にブラウザを配置(テクスチャとして利用)できることが条件です。

以下、2019年4月追記。

3D WebView for Android

超高いが Oculus GO にも対応している様子。
$200

以下、2018年10月以前の情報

Mobile Web View (Android, iOS)

https://assetstore.unity.com/packages/tools/gui/mobile-web-view-82142
ほぼ理想通りの機能を提供してくれるアセット!
でもレビューを見る限りかなりビミョーな様子……
$45 で人柱になれます。

UniWebView 3

Android にも対応しているけど、最前面に表示されるタイプなので残念ながら無理のようです。
$25

Embedded Browser

https://assetstore.unity.com/packages/tools/gui/embedded-browser-55459
一見 VR にも対応しているようだが、これは PC プラットフォームの VR に対してであり、Android がベースの Oculus GO には対応していない様子。
お値段が高いので試せないw
$80

WWebView

Windows のみ!
$20

unity-webview

gree のやつです。
残念ながら VR 非対応。

Popup Webview Android Ios

なんか見た感じダメっぽい。
$5

In-App Web Browser

全画面のみっぽい。
$5

Android Webview Texture (VR compatible)

検索するとよく出てくるし、いい感じなんだけど提供終了みたい。

ULiteWebView

情報少なすぎ。
$5

OculusGoWebView

まさにそのものズバリな名称だけど開発中なのかな…


あれ?もしかして無理なんじゃね?(爆)
神アセット待ちかなー。