新規Flutterアプリ
とりあえず手作業でFlutterアプリを構築していく。
認証とか基本的なところは、以前作ったアプリの流用で。
こういう自分テンプレみたいのをそろえていくと良いのだろうな。
POSTS
とりあえず手作業でFlutterアプリを構築していく。
認証とか基本的なところは、以前作ったアプリの流用で。
こういう自分テンプレみたいのをそろえていくと良いのだろうな。
FlutterFlow - Build Native Apps Visually
前にチュートリアルやって、確か途中で分からなくなって放置してた。
FlutterFlowのススメを読んで、再度挑戦する気になってやってみた。
やっぱりよくわからなかった。
慣れの問題かもしれないけれど、いきなり何でもできる状態に放り込まれると、逆に何をしたらよいかわからなくなる状態。
コードだとサンプルをコピペして、というところがGUIベースだとパラメータの設定がどこにあるのか探して入力していく感じなので、かえって手間がかかる感じ。
Read moreちょっとしたアプリを作るのに、どちらが良いのか迷っている。
ExpoはWindows環境でもiOS実機で動作確認ができるのが魅力。
ただ、「ちょっとした」アプリでそこまでする必要があるのかというと微妙。
やっぱりFlutterの習熟度を上げていくのが良いのかなぁ。
WSL2 の localhostForwarding 機能がうまくうごかない - mrk21::blog {}
この記事を見ながらやってみたけど、うまくいかない。 もしかしたら経路のどこかでブロックされているのかもしれない。
うまくいったとしても、QRコードがWSL2のIPで作られているので、手打ちでWindows11のIPを打たないといけないのは面倒。
以前一度使ってみたことがあるExpoに再入門。
前にやったときはWSLだとダメでラズパイで動かしていたけど、もう1年以上たっているしいけるのでは?という期待を込めてWSL2でやってみる。
$ sudo npm install --global expo-cli
$ cd photomap
$ expo init .
✔ Choose a template: › tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript
✔ Downloaded template.
📦 Using npm to install packages.
✔ Installed JavaScript dependencies.
✅ Your project is ready!
To run your project, run one of the following npm commands.
- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- npm run android
- npm run ios # requires an iOS device or macOS for access to an iOS simulator
- npm run web
Project is already inside of a git repo, skipping git init.
$ npm start
> photomap@1.0.0 start
> expo start
Starting project at /home/umemak/workspace/photomap
Starting Metro Bundler
› Metro waiting on exp://127.0.0.1:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
› Press a │ open Android
› Press w │ open web
› Press r │ reload app
› Press m │ toggle menu
› Press ? │ show all commands
Logs for your project will appear below. Press Ctrl+C to exit.
✔ It looks like you're trying to use web support but don't have the required dependencies installed. Would you like to install
webpack-dev-server@~3.11.0, @expo/webpack-config@~0.16.2? … yes
✔ Installed webpack-dev-server@~3.11.0, @expo/webpack-config@~0.16.2
CommandError: Missing package "webpack-dev-server" in the project. Try running the command again. (cwd: /home/umemak/workspace/photomap)
Expo GoでQRスキャンしても、LAN内のIPアドレス指定してマニュアル接続してみても接続できなかった。
Read moreWebViewを使うとして、MDMMLのJS版を公開する場所をFirebase Hostingにした。
久しぶりにFirebase使ったらオプションが色々増えている気がする。
$ firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/home/umemak/workspace/mdmml_js
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Hostin
g: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys, Hosting: Set up GitHub Action deploys
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: mdmml-285c0 (mdmml)
i Using project mdmml-285c0 (mdmml)
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? Yes
✔ Wrote public/404.html
✔ Wrote public/index.html
i Detected a .git folder at /home/umemak/workspace/mdmml_js
i Authorizing with GitHub to upload your service account to a GitHub repository's secrets store.
Waiting for authentication...
✔ Success! Logged into GitHub as umemak
? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) umemak/mdmml_js
✔ Created service account github-action-487458244 with Firebase Hosting admin permissions.
✔ Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT_MDMML_285C0.
i You can manage your secrets at https://github.com/umemak/mdmml_js/settings/secrets.
? Set up the workflow to run a build script before every deploy? Yes
? What script should be run before every deploy? npm ci && npm run build
✔ Created workflow file /home/umemak/workspace/mdmml_js/.github/workflows/firebase-hosting-pull-request.yml
? Set up automatic deployment to your site's live channel when a PR is merged? Yes
? What is the name of the GitHub branch associated with your site's live channel? main
✔ Created workflow file /home/umemak/workspace/mdmml_js/.github/workflows/firebase-hosting-merge.yml
i Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/89cf50f02ac6aaed3484
i Action required: Push any new workflow file(s) to your repo
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
GitHub Actionsとの連携も入れてみた。
Read more<
が消えるのはエスケープ処理を入れることで回避できた。
https://github.com/umemak/mdmml_js/commit/7227e554490538dca2a2dce428fb0382297100f4
ここまでできたら、アプリ化したい。 Flutterは言語が違うけど、WebView的なものでラップすればいけるかな。
JSONをマークダウンに変換するのは比較的簡単にできた。
mdmmlに組み込んでサンプル鳴らしてみたらなんかおかしい。
よく見ると<
と>
に囲まれたところが消えている。タグ扱いされてしまっているようだ。
JSONに保存するタイミングで<
などが<
などに変換されているなぁ。
codex-team/editor.jsの出力をIonicaBizau/json2md: A JSON to Markdown converter.に入れてみた。
思ってはいたけど、ダメだった。
面倒でも自作しないといけないか。。
以前調べたマークダウンエディタ、codex-team/editor.jsは保存形式がJSONだったのであきらめたけど、JSONとマークダウンを相互変換できればやりたいことが実現できるのではないか?