こんにちは。初めて投稿するので緊張していますが、がんばって書きます。
さて、今回はタイトルの通りiOSで再生中の曲をTwitterに投稿する方法を紹介したいと思います。
いわゆる「なうぷれ」と呼ばれるやつですね。
作り方はとっても簡単！ショートカットというとっても便利な純正アプリを使って実現させます。

20/5/21 改善しました(＾o＾)ﾉ ｲｴｰ!

目次

1. 完成形
2. 必要なアプリ
3. ざっくりな流れと説明
4. できあがり
   1. 改善(20/5/21)
5. あとがき

1. 完成形

なうぷれ

ショートカットが開けない時は、
iPhoneの設定→ショートカット→信頼されていないショートカットを許可
にチェックを入れると開けるようになります。(※自己責任でお願いします)

ホーム画面のアイコンをタップすると、下のような画面を表示させます。
ちなみにツイートをした後はTwitterアプリが開くようになってます。(理由は後ほど)

2.必要なアプリ

• ショートカット
• Twitter

3. ざっくりな流れと説明

細かいところまで説明するとめちゃくちゃ長くなりそうなのでとりあえずスクショを貼っておきます。
また、説明のため再生中の曲は

タイトル：さよならの今日に
アーティスト：あいみょん
アルバム：さよならの今日に - Single

とします。

1. 「現在の曲を取得」で再生中の曲情報を取得します。再生中の曲がなければそのままTwitterを開きます。
2. 「タイトルを現在の曲から取得」でタイトル名を取得します。
3. 「アーティストを現在の曲から取得」でアーティスト名を取得します。アーティスト情報がなければ空白です。
4. 「アーティスト名」という変数に「 / [アーティスト名]」というテキストを設定(代入)します。
   ここではテキストは「 / あいみょん」となります。
5. 「アルバムを現在の曲から取得」でアルバム名を取得します。アルバム情報がなければ空白です。
6. 「アルバム名」という変数に「 ([アルバム名])」というテキストを設定(代入)します。
   ここではテキストは「 (さよならの今日に - Single)」となります。
7. 「#NowPlaying [タイトル][アーティスト名][アルバム名]」というテキストを作成します。
   ここではテキストは「#NowPlaying さよならの今日に / あいみょん (さよならの今日に - Single)」となります。
8. 「アルバムアートワークを現在の曲から取得」でアートワークのイメージを取得します。
   1. アートワークがない場合
      「テキストをツイート」で先ほどのテキストをツイートします。
   2. アートワークがある場合
      アートワークを600×600にサイズを調整して(一応)、先ほどのテキストと調整したアートワークをリストに追加します。
      「リストをツイート」で先ほどのテキストとアートワークを添付してツイートします。
9. ツイートが完了したらTwitterを開きます。

ここではアーティスト名を正規表現「\s*(.*?)\s*」を用いてアーティスト名に含まれる「()」を含む()内の文字列を全て削除しています。
理由は、アニメなどの曲で「○○○(CV:×××)」や「○○○(×××)」などが複数あると投稿する際にめちゃくちゃ長くなってしまうことがあるためです。
「長くなってもいいからアーティスト名はそのままツイートしたい！」という方は、以下を試してください。たぶんこれで大丈夫です。たぶん。

• 「アーティストの\s*(.*?)\s*を世界に置き換え」と「変数アーティスト名をアップデートされたテキストに設定」のアクションを削除
• その下の「 / [アーティスト名]」のテキスト内の変数を「 / [アーティスト]」に変更

再生中の曲がなかった場合やツイートをした後にTwitterを開く理由は、アクションが終わった後ショートカットアプリの画面が表示されたままなのが嫌だったからです。(個人的に)
また、ツイート画面でキャンセルするとショートカットアプリが開いたままになっちゃいます。たぶんどうしようもない。

公式のTwitterアプリじゃなくてTweetbotとかfeatherとか開きたい

そんな時は「Twitterを開く」を「Tweetbotを開く」「featherを開く」などに変更すれば対応できます。

ツイートのフォーマットを変えたい

テキスト部分をいじくりまわしてください。
自分だけのなうぷれを作りましょう！

4. できあがり

完成したら、ホーム画面に追加しましょう。
これで簡単に再生中の曲をツイートできるようになりました！

ちなみにウィジェットからは実行できません。なんでや。

4.1 改善(20/5/21)

なうぷれ

改善というか無駄な部分をバッサリ無くしたバージョンです。
上では8枚分のスクショにまとめていましたが今回は4枚で済みました。
基本的に機能は同じなので、説明は省きます。(ちなみにアーティスト名をいじる機能を無くしています。)

「変数アーティスト名をテキストに設定」らへんも省略できますが、流石に可読性が低くなるので残しています。

5. あとがき

iOSのショートカットアプリは最近見つけたのですが、その自由度の高さに正直驚きました。
コーディングをビジュアル化している感じで直感的に組んでいくことができます。
思った以上に面白いことができるのでぜひ皆さんも遊んでみてください。

今回紹介した中で、ここめっちゃ無駄じゃない？ってところがあるかしれません。
もしこっちの方がいいよ！とかあったらぜひ教えてください。

ではまた！

皆さんアプリ開発楽しんでますかー？？

どうも初めまして、okeと申します。

この度、Flutterで初めての個人アプリリリース、
そしてSwiftで２度目の個人アプリリリースを二つ合わせて1ヶ月程度で行いました。

私は最近「個人開発」というものにハマっております！！とても楽しい！

しかしながら、これまでアプリのリリースは一度も行ったことはなかったため、
いざ自分のアプリを世に出そうとした時に、

「早くこの情報知りたかった…」

という泣きたくなる出来事が山ほどありました。

特に私はモバイルアプリ開発をFlutterから入ったため、
SwiftやKotlinというネイティブ側の知識に乏しく、
Flutterの記事で時々見かける、

「ここはいつものネイティブの開発のように…」

の「いつも」がわからない状態でした。

しかしながら私のように、
Flutter人気も上昇してきて、ネイティブを触らずにFlutterからアプリ開発に入る方もいらっしゃるかと思います。

この記事では、
リリース手順やFlutterの基礎をまとめているわけではなく（他に良い記事はごまんとあるので）、
モバイル開発 & Flutter初心者の私がリリースに至るまでの失敗を元に、
皆さんが私の二の舞とならぬよう、
アプリ開発を始める前に知っておきたかった情報を書いております！！
（長文ですので、ゆったりと腰掛けてご覧ください！）

第1章　アプリ開発・リリースが初めての方へ
第2章　Flutterでの開発をこれから始める方へ
という構成で進めて参ります！！

対象読者

• Flutterからモバイルアプリ開発に入った方
• モバイルアプリ開発が初めての方
• これからスマホアプリを開発していきたい方

第１章 アプリ開発・リリースが初めての方へ

アプリ開発を始める前に…

皆さん、App StoreやGoogle Playの「ガイドライン」って読みましたか？？
読んでいないなら、開発を始める前に読んでください！！！

というのも…

私が作成したアプリ「Lyrics（リリックス）」は、
"音量ボタンの制御を奪って、歌詞のスクロールに使用する"
という発想から成るものでした。

Bluetoothシャッターを使えば音量ボタンが作用して「足でもスクロールできる」ことを思いつき、

Bluetoothとか良く知らないけど、何となくできそうだし、、

「とりあえず作ってみるか！」

と意気込み、Flutterで実装をしていきました！！

そして1週間半後、なんとか形になりました！！

そしてリリース前に、
「リリースするし、一応ストアのガイドラインでも読んでおくかなー」

と、「近所のスーパーに行く」くらい気楽な気持ちで読み始めました。

そして、、、

ガイドラインを見た私は唖然としました。

音量を上げる/下げる、サウンドオン/オフといった標準スイッチの機能、および他のネイティブユーザーインターフェイスの要素やその挙動を変更または無効にするAppは却下されます。

「　おいおい……　まってくれよ…　」

音量ボタン操作ありきの開発だったので、頭が真っ白になりました。
音量ボタンが使えないと、初心者本によく載っている「ただのメモアプリ」と化します。

今までのアプリ開発をしてきた２週間が走馬灯のように駆け巡りました（？）。

「でもせっかく作ったアプリだし！」

と思って、

ダメ元で審査に提出したら…

「通ったーー！！！！」

きちんとApp Reviewのメモにも

「音量アップボタンを使用してスクロールするようにしています。
そのため、音量アップボタンが使用できませんが、注意事項としてその旨を記載しています。」

と記載していた上で通ったので、大丈夫だったのだと思います。
（よくよく考えてみたら、カメラアプリとかも音量ボタンで撮影できますもんね…。）

結果としてリリースはできたのでよかったのですが、

ガイドラインを見た瞬間は、まじで超焦りました(汗)

１週間ちょいだったからまだしも、長期に渡って開発をしていたら、、、
と考えたらゾッとします（怖）。

今回に関しては大丈夫でしたが、
アプリを制作する前に、きちんと目を通して確認しておくべきだと感じました…。

ここでの心得、、

" 時間を無駄にしたくない若者よ、まずはガイドラインじゃ"

Apple App Store Review ガイドライン
Google Play デベロッパーポリシーセンター

AndroidとiOSをリリースするときはアイコンにも気をつけて！！

FlutterだとAndroidとiOSを両方一気に作成でき、超便利。

で、デザインに疎い私は、
意気揚々と友達にアイコンの案を伝えて、
デザインしてもらいました。

それがこちら。

どうですか？まあまあ良くないですか？

それで、これをflutterの便利パッケージを使用して反映！！！
https://pub.dev/packages/flutter_launcher_icons

iPhoneで確認したら…

良い感じ！！！

この調子で、またまた意気揚々とAndroidのアイコンを確認したら…

「Google Pixelのアイコンは丸型…だと…」

アイコンは四角く作るものと思っていた私はこれまた唖然。

「めちゃくちゃにちいせぇ…。」

(驚きすぎてスマホですぐ写真を撮りました)

そこでアイコンについて調べていると（はじめに調べとけというご意見、ごもっともです）
「アダプティブアイコン」なるものが！！！

3分で分かる？Android OのAdaptive Iconに対応しよう

これでいける！と思い、早速試してみると、

「めちゃくちゃにでけぇ…」

(驚きすぎてスマホですぐ写真を撮りました part2)

まあ、元が四角の前提で作っている時点でだめですよね…。

友達に深く謝り、再度アイコンを作り直してもらい、
なんとか上手くいきました。
（友よ、すまぬ！！）

しかし、これまた初めに確認しておけばよかった…
と大変後悔しました。。

ここでの心得、、

"アイコンはアプリの顔。 イケメンかどうかよく確認するのじゃ！"

ストアの申請って結構めんどくさい

アプリが無事完成しました！
ってなったら、いよいよApp StoreやGoogle Playへの申請ですよね？？

で、申請しようと思った時にふと、
「Webサイトでよく見るプライバシーポリシーみたいなんっていらんのかな？」
と思いました。

でも、私のアプリはローカルで完結する、言ってしまえばただの「メモアプリ」であり、
さすがにいらんだろうなーと思いつつ、Twitterに呟いてみると、
親切なことに、返信がきました！！（kazumatさんありがとうございます！！！）

ローカル完結も利用規約入りますよー！
私が初めて作っ時は、必要なスクリーンショットの多さと、利用規約ページ作成にびっくりしました。
私はgithub pagesを使って利用規約書いてます〜

— kazumat@Flutter (@kzmat2) May 8, 2020

「なぬーーーーー！？」

ローカルしか使ってないのにいるのか…。

調べてみると、iOSはプライバシーポリシー必須とのこと…。
以下、Appleの公式文章抜粋です。

プライバシーポリシー：すべてのAppには、App Store Connectのメタデータフィールドと各App内にアクセスしやす>い形で、プライバシーポリシーへのリンクを必ず含める必要があります。プライバシーポリシーはわかりやすく明確なもの>である必要があります。
https://developer.apple.com/jp/app-store/review/guidelines/

そこで、GitHub Pagesを使用して、プライバシーポリシーページを作成しました。
テンプレートも多くあり、ものの３０分で完成しました！！
https://pages.github.com/

肝心の内容ですが、、

広告（Admob）を使用していたため、その旨を記載したら、
審査に通りました！！

下記の記事の文言そのまま記載しました。
AdMob, Firebase付きAndroidアプリのプライバシーポリシー、こうしてみました(要経過観察)

プライバシーポリシーを書いて一件落着と思ったのも束の間、

「スクリーンショットもこんなにたくさん撮らないといけないの…」

という感じでした。。

AndroidとiOS用にそれぞれ作成しないといけないのですが、
作らないといけないサイズの種類が多いこと…。

Androidの方はある程度自由がききます。
サイズとしては、
1辺の最小の長さ: 320px
1辺の最大の長さ: 3840px
であれば良いようです。(2020年５月現在)

しかし、フィーチャーグラフィックなるものを作成する必要があるようで、Android用に作成しました…。
こちらは
横 1024 x 縦 500
であれば良いようです。(2020年５月現在)

iOSの用意するサイズは下記のサイトが参考になりました。
https://r-abo.com/2019/11/05/aso018/

また、サイズ変更は下のサイトが便利でした！
https://bulkresizephotos.com/ja?preserve_aspect_ratio=true&resize_type=exact&resize_value=1242&secondary_resize_value=2688

そーやってやっとの思いで申請を行ったのですが、
iOSの方だけリジェクトされました（泣）

内容を読んでみると、タイトルがだめというご意見。

当時私は
「Lyrics -歌詞メモを見やすく便利に」
というタイトルにしていたのですが、
調べてみると、どうやらサブタイトルのようなものをタイトルにするのはダメな模様…。
https://cocoamix.jp/archives/7706

ということで、
「Lyrics（リリックス）」
に修正し、ハイフン以下をサブタイトルに移動すると…、

審査が通りました！！

晴れてストアに私のアプリが並ぶことができました！！！

個人開発だとなかなかに作業量が多く、
アプリは完成しているのにリリースできない、
もどかしい時間が長く続きます。。

ここでの心得、、

"アプリリリースまでが開発。根気よく頑張るのじゃ！"

第２章　Flutterでの開発をこれから始める人へ

Flutterだけでは実現できないこともある！

私はFlutterを万能なツールだと思ってました。

「iOSもAndroidも両方一気に作れるじゃん？」
「マジで超最高じゃん？」

そんなイキってた時期もありました。

しかし、音量ボタンでスライドする機能を作成する過程で、

「音量ボタンでスライドはできるけど、音量ゲージが表示されるじゃん…」
という状況に陥りました。

でもFlutterは最強だと思っていた私は、

「誰かパッケージ出してるっしょ！！」

と、そんなミルクティーよりも甘い気持ちでいました。

しかし、、

探しても探しても見つからない！！！

めちゃくちゃ時間を費やしました。
しかし、見つかりませんでした。
悲しかった。全俺が泣いた。

でも1つの突破口は知っていました。
検索していたらたくさん出てきました。

「ネイティブ言語で実装」

目を背けていました。

Flutterは一気にiOSとAndroidのアプリできて最高だぜって友達に自慢してた俺。
SwiftとかKotlin？ 時代はFlutterだぜとか意味わからないことを思っていた俺。

全て桜のようにはかなく散っていきました。

そして、藁にもすがる思いでSwiftとKotlinを勉強し、実装した結果…

「できたーーーー！！」　（よかったーー！）

音量ゲージを表示せずに、画面をスライドすることができるようになりました！

Flutterだけで全て完結できると思っているFlutter初心者諸君への心得、、

"Flutterで完結できることもある。でも、できないこともある。"

因みに、今回はネイティブ側からFlutterへの通知のみ行ったので、
EventChannelというものを使用して、実装しました。
Flutter EventChannel APIの使い方

パッケージってすっごく便利！！

Flutter初心者の方、下記のサイトは見ていますか？？
https://pub.dev/

もうね、先人たちがものすごくいいパッケージをたくさん作ってくれてるんです。

アニメーションとかも簡単に実装出来たり、
チュートリアル画面も簡単に実装出来ちゃったり、
アラート画面をいいー感じにしてくれたりするんです！！

下記の記事を見ると、
「こんなことが簡単にできちゃうのー！？」
ってなります。
【Flutter】アプリ開発_初心者のアプリをプロっぽくする最強のpackageを紹介
アプリをおしゃれにデコレーションする Flutter パッケージ

「なんかいいー感じにできないかなー」
って思ったときは、パッケージを探してみてください！！楽しいですよ！！

因みに、「Lyrics(リリックス)」では下記のパッケージを使用しているページがあります。
背景が炭酸水みたいになって面白いです。良かったら探してみてください！
超絶簡単に実装できました。
https://pub.dev/packages/animated_background

ここでの心得、、

"便利かついい感じにしてくれる最強パッケージを見逃すでない！！"

SNSを大いに活用しよう！！

わざわざ書くほどのことでは無いかもしれませんが、私自身が助けられたので記載します。

Flutterの記事はまだまだ多いというわけではなく、
不足している情報や、理解できない情報もあると思います。

そんなときに役に立つのが、
「Twitter!!!!」

Flutterについて詳しい方々が、
最新の情報や、
便利と思った情報を投稿してくださります。
その情報を参考に、自分の実装を考えることも多かったです。

Flutterで検索して、日本人で記事を書いている方はだいたいTwitterをやっています（偏見です）。
その方々をフォローするとともに、自分自身も参考になった情報等を発信していきましょう！！

そうすることで、少しずつフォロワーが増え、
先ほど書いたプライバシーポリシーの件のように、
自分の疑問に答えてくださる方もいらっしゃいます。

是非活用していきましょう！！！

ここでの心得、、

"便利なツールはどんどん使っていくのじゃ！！"

最後に

ここまで読んでいただき、ありがとうございました。

アプリ開発は楽しく、やりがいをもってできる最高の娯楽だと思ってます。（私だけでしょうか笑）

そんな娯楽ライフをさらに有意義なものにするため、
少しでも皆さんのお役に立てればと思っています。

これからも何か得た知見等あれば発信していくので、よろしくお願いします！！
@oke331

（因みに今回作成したアプリはCMも作成しました。良かったらご覧ください。）
↓Swiftで開発
MOJI PIC（モジピク） CM

↓Flutterで開発
Lyrics（リリックス） CM 〜自称シンガー編〜

概要

Worldmap情報を保存するとAR空間全体の状態を保存できる。

アプリ再起動後にオブジェクトを同じ位置に配置したい場合や複数端末で空間を共有したいときに便利

Worldmapのロード

let worldMap = try! NSKeyedUnarchiver.unarchivedObject(ofClass: ARWorldMap.self, from: data)
configuration.initialWorldMap = worldMap

Worldmapの保存

self.sceneView.session.getCurrentWorldMap(completionHandler: { (worldMap, error) in
    guard let map = worldMap else {
        return
    }
    let archived = try! NSKeyedArchiver.archivedData(withRootObject: map, requiringSecureCoding: true)
    UserDefaults.standard.set(archived, forKey: self.worldMapKey)
})

オブジェクトの位置の復元

オブジェクトの復元はUserDefaultsに座標を保存しておき、rendererメソッドで描画を行う。
（SCNVector3はUserDefaults非対応なので配列として保存する）

ARWorldMap

Flutterで複数画像が選択できるパッケージ「multi_image_picker」でカメラが動かない（アプリが停止する）現象があったのでその原因メモ。

結論

・multi_image_picker
・image_picker_flutter

上記のパッケージを併用してると発生する模様。
pubspec.yamlに追記しただけで、実際はimage_picker_flutterの方はどこでもimportしておらず機能も使ってなかったが、パッケージが併存しているだけでNGな模様。
image_picker_flutterをpubspec.yamlから削除してPackage upgradeをかけてやれば解消した。

以上

flutter初心者（自分）がアプリを作るにあたり最初に困ったのでメモ。
おそらく初歩的過ぎてちゃんと説明してるところがあまり見当たらなかったので。

よくあるサンプルコードは大体こんな感じになってることが多いです。

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('main画面のタイトルバー'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('ボタン'),
        ),
      ),
    );
  }
}

ふむふむ、main処理のrunAppメソッドでMyApp クラスを呼び、MyAppクラスで画面全体のウィジェットをビルド・・・なるほど。

これはこれでなるほどよく分かるのですが、「じゃあボタンを押して新しい画面を開くには」どうすればよいか？

画面（ビュー）はScaffoldウィジェットが親になる、と考えて良いかと思います。（Scaffoldはアプリケーションバーやbodyを持つウィジェットです）。

なので新しい画面を開くには
・新しい画面をビルドするクラスを定義する。
・このクラスはScaffoldをリターンする。

とすればOKです。この新しいクラスを別ソースファイルにすることで、画面ごとにファイル分割が可能です。

上記を改修したサンプルはこちら

main.dart

import 'package:flutter/material.dart';
import './newview1.dart';  //★１ 外出ししたファイルのインポート

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('main画面のタイトルバー'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('ボタン'),
          //★２ 画面遷移のボタンイベント
          onPressed: () => Navigator.of(context).push(MaterialPageRoute(builder: (context) {
            return NewView1();
          })),
          //★２追加ここまで
        ),
      ),
    );
  }
}

★１、★２を追記

newview1.dart （新しい画面用のファイル/クラス）

import 'package:flutter/material.dart';

class NewView1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text('NewView1のタイトルバー'),
      ),
      body: Center(
        child: Text('NewView1'),
      ),
    );
  }
}

これで、初期表示画面の上に新しい画面が表示されます。
このような形で画面/機能ごとにソースファイルを分割していくことが可能です。