2022-03-20

「角度を変えるとイラストが変わる！キーホルダーワークショップ」に参加してきた

ブログを書くまでがイベントです！

f:id:arcanum_jp:20220320102058j:plain

こちらの公立はこだて未来大学塚田研究室でされている研究の一環としてワークショップを開催したみたいですね。教授の塚田浩二さん、ちょっとググってみたらスピーチ・ジャマーでイグノーベル賞を取った方じゃないですか！すごいぞすごいぞFablabさん・・・有名人と会える！！ぼくのこころは燃え上がった！

www.fun.ac.jp

まずどんなものを作るかというとこんな感じ見る角度で絵が変わるキーホルダーです。

www.youtube.com

昔からある、違う角度から見ると絵柄が変わるシートがありましたが、レンチキュラーという技術みたいです。研究はレンチキュラーの仕組み（レンズ部分）をUVプリンタでー作ってしまうところがミソみたいですね。

UVプリンターの利用研究という形で研究されているそうです。UVプリンターと言ったらアクキーぐらいしか思いつかなかった僕はダメなのです。

なんか仕組み分かるなぁ・・・自分でもこれ作れるんじゃね？とか思いながらググったらありました。レンズの作成方法などは公立はこだて未来大学塚田研究室のサイトで公開されていました。

tsuka-lab.org

詳しいPDF資料はこちら

http://www.interaction-ipsj.org/proceedings/2019/data/pdf/1B-24.pdf

方法としては透明インクを積層してレンズの形状を作り，その上に光沢仕上げで印刷し積層跡を埋めるというものです。書くのは簡単ですがデータ作成が手で作るには鬼のように大変そう・・・あとFablab仙台でUVプリンターを借りる代金がうなぎ上りになる予感・・・

さて、事前に絵を用意しても良いとのことでしたのでこんなのを用意して持っていきました。４枚といえばこれですね・・・

f:id:arcanum_jp:20220320143001p:plain

f:id:arcanum_jp:20220320143011p:plain

f:id:arcanum_jp:20220320143020p:plain

f:id:arcanum_jp:20220320143029p:plain

さぁ何でしょう・・・はい、いつものずん子さんです。あ・・・いや・・・何枚だろうがずん子さんで作ろうとしてましたが・・・

３０年ほど前８ビットパソコンでアホのようにゲームを作ってる頃はグラフィック用紙を買ってきてこんな感じのドット絵を描いてましたな・・・なつかしす・・

ホントはドット絵を用意する必要はなく普通の絵でよかったのですが最後にツールにドット絵に直されるらしく・・・それなら初めからドット絵描いた方がいいかなとドット絵で用意しました。

さて、ワークショップでは絵を描くときは専用のアプリで描きます。これも研究室の学生さんがこの研究のためprocessingで作ったそうです。（写真撮るの忘れた）

で、できたのがこちら。４枚の絵が全部混ざってるのでイミフですがなんとなく・・・あぁ・・ずんだもん？なんて感じがしたり。

f:id:arcanum_jp:20220320113332j:plain

これをレンズシートを通すとこんな感じに見る角度によって絵が浮き出てきます。

f:id:arcanum_jp:20220320113401j:plain

f:id:arcanum_jp:20220320113358j:plain

f:id:arcanum_jp:20220320113426j:plain

f:id:arcanum_jp:20220320113407j:plain

角度がちょっと難しいですが確かに絵が変わります。これはすごい！！これ、確認したら特に自分で作ってみても良いとのことでしたので後日レンズを作る所から挑戦してみたいなと思いました。

おまけ

じつは昔アクリルのタテを作ったりしてる時に参考として色々とググっていた時期があったのですがその時に見つけたこちら。

当時単純にアクリル彫刻を下から光を当てて光らせるだけじゃなくてなんかもっと違う事ができないかなとか思っていたのです。

自分もこういうの作ってみてぇ！って思っていたのですが電子工作が分からず断念していました。

mobiquitous.com

www.youtube.com

実はこれも塚田浩二さん個人の研究ページで・・・色々と聞いてしまいました。そしてFablab仙台さんにarduinoがあるので速攻で仕組みを作ってしまいました。

f:id:arcanum_jp:20220320114409j:plain

これも今後作ってみるしかないじゃないか！（歓喜）

2022-02-28

ずん子さん15パズルを作りました。（Flutter）

掲題の通りです。

f:id:arcanum_jp:20220228073427p:plain

ありゃ？言語が英語になっちゃっててAppleStoreでは"ずん子"では検索できません。"zunko"だと検索できますね・・・

iOS版はこちら

zunko15puzzle

Shinya Hosokawa
Games
Free

apps.apple.com

Android版はこちら

play.google.com

去年（2022年）の年末あたりからFlutterでアプリを作る練習としていくつか作っていたのですがGooglePlay、Apple Storeにまでこぎつけたので公開します。

しかし何度15パズルを僕は作るのだろうか・・・古くはC++でMFCの練習として作ってみたりSwiftの練習で作ってみたり・・・今回はもう３回目かな？以下で以前作ったもののエントリを書いてます（残念ながら前回作ったものは公開していなかったので日の目を見ませんでした）

arcanum.hatenablog.com

遊べるキャラクターは以下です。

ずん子さん
きりたん
イタコ姉
ずんだもん
四国めたん
中国うさぎ
九州そら
大江戸ちゃんこ

サンプルとして以下のような絵で遊べます。

f:id:arcanum_jp:20220228074305p:plain

f:id:arcanum_jp:20220228074319p:plain

f:id:arcanum_jp:20220228074336p:plain

f:id:arcanum_jp:20220228074351p:plain

画面はこんな感じです。

これはiPhone

f:id:arcanum_jp:20220228075800p:plain

これはiPad

f:id:arcanum_jp:20220228075714p:plain

実機でも見てみましたがなんとなくいいですね。体感速度はiOSは問題ないですがAndroidはゲーム開始時のグラフィック描画が遅くてちょっと待たされます。ちょっとどころじゃないですが・・・

f:id:arcanum_jp:20220228095547j:plain

遊んでみた感想、キャラ以外の部分がどこのタイルなのか？が分からないなぁと自分ながら思いました。。。例えばヒント表示のボタンを推してる間だけ正解画像が表示されるとかヒント表示ボタンを推してる間だけ１−１５の番号が各タイルに描画されるとかそういった親切設計が必要かもしれないなぁと・・・

2022-02-26

FlutterでiOS側のリリースメモ

本当にメモね。色々リリースに関するエントリは見かけるけどそれらをやりながら躓いた所とかメモ。

参考にしたのはこことか、

zenn.dev

こことか・・・

enoiu.com

順番としては

デバッグモードからリリースモードに変更
1. debugShowCheckedModeBanner: false,にする（下参照）
XCODEからアップロード
1. flutter build ios を打ってipaファイルをビルド
2. XCODE側でシミュレータの選択で「Any iOS Device」を選択
3. [product]->[arhive]を実行
4. ここで注意として、build identifierなどがcom.example.xxxxになってないか注意
AppConnectでアップロードされたファイルを選択しながらアプリケーションの情報なんかを入れていく
1. 著作権情報は 2022 arcanum.jp などを入力

デバッグモードからリリースモードにする

main.dart内のMyApp#buildで返すWidgetにdebugShowCheckedModeBanner: false,をせっとする。

f:id:arcanum_jp:20220227095011p:plain

これをやっておかないと以下の問題で却下されます。

Guideline 2.3.10 - Performance - Accurate Metadata

あと、スクリーンショットはこの状態で撮りましょう。じゃないと画面右上にdebugの表示がある状態なので、以下の問題で却下されます。

Guideline 2.5.10 - Performance - Software Requirements

2022-02-25

FlutterでAndroid側のパッケージ名間違ってちゃった・・・

AndroidStudioでFlutterプロジェクトを作るとパッケージ名は com.example.Prj名となっています。うっかり作成する際にパッケージ名を設定せずにリリースまで行っちゃうとへんな名前で登録されちゃうのですよ、お父さん！

修正する場所をメモ

/android/app/src/main/AndroidManifest.xml

2行目ね

/android/app/src/main/にある自動生成されたActivity

/android/app/src/debug/AndroidManifest.xml

2行目ね

/android/app/build.xml

50＋α行目

2022-02-23

Flutterでアイコンを変更

他のサイトとか見てのメモを残しておきます。（完全に自分メモ）

Android, iOSで各種端末、環境で使うアイコンはサイズが色々あります。

qiita.com

こんなサイズ全部作ってたら日が暮れちまうのでFlutterのライブラリで作ります。

pub.dev

上記のサイトから。dev_dependenciesにアイコンのライブラリを宣言して別途flutter_iconsとしてソースを設定します。サイズは1024 * 1024で作成しておきます。

dev_dependencies:
  flutter_launcher_icons: "^0.9.2"

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon/icon.png"

pub getまたはEditorの[pub get]してから以下のコマンドを実行。

flutter pub run flutter_launcher_icons:main

場合により以下のようなエラーが出る

flutter pub run flutter_launcher_icons:main

════════════════════════════════════════════

FLUTTER LAUNCHER ICONS (v0.9.1)

════════════════════════════════════════════

✓ Successfully generated launcher icons

Unhandled exception:

FormatException: Invalid number (at character 1)

^

#0 int._handleFormatError (dart:core-patch/integers_patch.dart:129:7)

#1 int.parse (dart:core-patch/integers_patch.dart:55:14)

#2 minSdk (package:flutter_launcher_icons/android.dart:309:18)

#3 createIconsFromConfig (package:flutter_launcher_icons/main.dart:94:47)

#4 createIconsFromArguments (package:flutter_launcher_icons/main.dart:60:7)

#5 main (file:///Users/hosokawashinya/libs/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_launcher_icons-0.9.2/bin/main.dart:6:26)

#6 _delayEntrypointInvocation.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:295:32)

#7 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:192:12)

pub finished with exit code 255

エラーメッセージで検索すると以下のgithubが引っかかる。

github.com

pubspec.ymlの宣言は以下に修正

flutter_launcher_icons:
git:
url: https://github.com/Davenchy/flutter_launcher_icons.git
ref: fixMinSdkParseFlutter2.8

再度flutter pub runする。

% flutter pub run flutter_launcher_icons:main
════════════════════════════════════════════
FLUTTER LAUNCHER ICONS (v0.9.1)
════════════════════════════════════════════

• Creating default icons Android
• Adding a new Android launcher icon
• Overwriting default iOS launcher icon with new icon

✓ Successfully generated launcher icons

すると以下のファイルが変更されていたり追加されていたりします。あとは実行してみるとアイコンが変わってる事がわかります。

modified: android/app/src/main/AndroidManifest.xml

modified: ios/Runner.xcodeproj/project.pbxproj

modified: ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png

modified: ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png

modified: ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png

modified: ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png

modified: ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png

modified: ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png

modified: ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png

modified: ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png

modified: ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png

modified: ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png

modified: ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png

modified: ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png

modified: ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png

modified: ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png

modified: ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png

android/app/src/main/res/mipmap-hdpi/launcher_icon.png

android/app/src/main/res/mipmap-mdpi/launcher_icon.png

android/app/src/main/res/mipmap-xhdpi/launcher_icon.png

android/app/src/main/res/mipmap-xxhdpi/launcher_icon.png

android/app/src/main/res/mipmap-xxxhdpi/launcher_icon.png