投稿

Flutter備忘録: pod repo update やっても👈 Exception: Error running pod install エラー

イメージ
「 flutter build ipa 」や「 flutter build applebundle 」といったFlutterのビルドコマンドで、macOSやiOS用のアプリをビルドする際に、 「 pod repo update 」コマンドを実行するように といった エラーメッセージ が返ってくる事がしばしばあります。 そこで、指示の通りにターミナルを開いてプロジェクトのディレクトリで「 pod repo update 」を実行すると、リポジトリ情報は更新されるみたいですが、再度ビルドをしても前と同じエラーが返ってくる場合があります・・・。 この場合、エラーメッセージの指示にある「 pod repo update 」ではなく、別のコマンドを実行すれば次のステップに進める場合がほとんどなのでここに備忘録としてメモしておきます。 キーワード : #CocoaPods [目次] エラーメッセージ 対処方法 最後に エラーメッセージ 問題のエラーメッセージは: Error: CocoaPods's specs repository is too out-of-date to satisfy dependencies. To update the CocoaPods specs, run: pod repo update Exception: Error running pod install で、メッセージの意味は、CocoaPadsのリポジトリ情報が古いので、ターミナルでプロジェクトのディレクトリに移動して「pod repo update」というコマンドを実行して情報を更新してくれ(下さい)という意味になります。 また、最後の「Exception: Error running pod install」の部分から、「pod install」コマンドを実行した時に起きたエラーというのがわかります。 CocoaPads は、macOSやiOSのアプリなどを開発するのに使われるIEDの Xcode において、オープンソー...

[OBS] コメントを逆の順番で表示 (ツイキャス/YouTube)

主にOBSの設定についてやツイキャス用のカスタムCSSを公開している別サイト、 『 kiiのメモ帳 』 で、配信のコメント欄のコメントを逆の順序で表示できないかという質問がありました。 ツイキャスだと新しく投稿されたコメントはコメント欄の一番上に表示されて、新しいコメントから順に上から下に表示される仕様になっています。 コメントを逆順で表示した場合、新しくコメントが頻繫に追加されてコメント欄が動いている場合はまだ良いのですが、動いていない場合だと上下にあるコメントのどちらが新しいのか紛らわしくなってしまいます。 そういう理由で 『kiiのメモ帳』 で公開しているカスタムCSSにはコメントの表示の順番を逆にするオプションは付けていません。 でも、これはあくまでも個人的なこだわりで、逆の順番で表示する事で個性を出したいと思う人もいるかもしれないので、上記の質問の解答をここに記事としてメモしておきます。 [ 目次 ] ツイキャスのコメントオーバーレイ YouTubeのコメントオーバーレイも逆の順番で ツイキャスのコメントオーバーレイ ツイキャスのコメント欄の場合は、「tw-comment-list-view__scroller」クラスのDIVタグの下にある無名のDIVタグの中にコメントが並ぶレイアウトになっています。 (👉「 ツイキャスのコメント欄の構造 (メモ帳) 」) なので、 既存のカスタムCSSの最後に次のCSSを加えると コメントが逆の順番で (新しいコメントが一番下に) 表示される様になるはずです。 . tw-comment-list-view__scroller > div { display: flex; flex-direction: column-reverse; height: 95%; /* 最新コメントがはみ出ない様に必要 */ } . tw-comment-list-view__scroller { transform: none !important; /* 下へスライドするアニメーション効果を無効化 */ }...

キャスポケットツール: 検索の巻 (ツイキャスのユーザー検索とライブ検索)

イメージ
Googleプレイで公開中の キャスポケットツール の 検索機能 の説明をここにメモしておきます。 [目次] 検索結果の上限 ユーザー検索 ユーザー検索結果 ライブ配信検索 ライブ検索結果 関連メモ #キャスポケットツール キャスポケットツール Android版 by kii_memo_jp iPhone/iPad版 by BIBO-HQ 検索結果の上限 「 ライブ配信検索画面 」、又は、「 ユーザー検索画面 」の右上にあるアイコン「 」で検索結果の上限を選択できます。 右上にある「 」ボタンをタップすると検索結果の上限を、30、60、80、100の中から一つ選べます。 ユーザー検索 ツイキャスのユーザーをキーワードで検索する事が出来ます。 「検索キーワード」の欄にキーワードを入力した後に、キーパッド右下の [完了] 、 又は、 をタップすると (使っている日本語入力方法 (IME)によって多少異なります)、 「サ...

[ツイキャス配信・閲覧支援ツール] キャスポケットツール: 初期設定

イメージ
ツイキャス配信・閲覧支援機能をいくつか搭載したアプリ、 『 キャスポケットツール 』 ( Android | iOS ) を作ってみました。 ツイキャス のユーザーやライブ配信を検索する機能をはじめ、自分のサポート・サポーターを閲覧したり、気になるユーザーを登録してライブ配信の通知を有効にしたりする事が出来ます。 このアプリの機能を使うのには、 アプリを ツイキャスのアカウントに連携 する必要がある他、 Android 13とそれ以前 のAndroidでは、 バックグラウンド処理を有効 にすると、登録した「気になるユーザー」のライブ配信開始の通知を受け取れる確率が上がるので、 ここに『キャスポケットツール』を使うのに 最低限必要な初期設定 をメモしておきます。 [目次] キャスポケットツールの機能 初期設定 バックグラウンド処理の有効化 iOS Android 13とそれ以前のAndroid 備考 関連メモ #キャスポケットツール キャスポケットツール Android版 by kii_memo_jp iPhone/iPad版 by BIBO-HQ キャスポケットツールの機能 メイン画面 現時点では次の機能が搭載されていて、アプリのメイン画面から選択する事が出来ます。 ...

『コメ欄』Lite リリースノート (v0.0.1h 〜 v0.0.1j)

イメージ
👉 『コメ欄』Liteクイックセットアップガイド 👉 サポートページ [ 目次 ] リリースノート v0.1.1j リリースノート v0.1.1i リリースノート v0.1.1h 現在、『コメ欄』Liteにいくつかの機能を追加した拡張版 キャス専門店『コメ欄』✚ のアンドロイド版をGoogleプレイで ベータ 公開しています。 興味のある方は次のリンクからインストールしてみて下さい。 👉 [ Googleプレイ ] 主な追加機能としては、アプリ内表示画面に表示される画像の設定がツールバーのボタンで切り替えが出来る他、次の表示オブジェクトが追加されています: 背景動画の テキストバナー 画面上で移動可能な画像 ※ 『コメ欄』✚の現在のリーリスではホーム画面にコメント欄を表示する「ホーム画面表示モード」は無効になっています。 👉 『コメ欄』✚ (v0.2.x) サポートページ ツイキャス専門店 『コメ欄』Lite (v0.1.1j) 06/Nov/2022 公開 対応アンドロイド(API): Marshmallow (API 23) ~ 更新・修正事項 アプリ内画面表示設定>背景色: カラーピッカーで色の変更をした際に色の変更が反映されなかった不都合を修理 ツイキャス専門店 『コメ欄』Lite (v0.1.1i) 23/Oct/2021 公開 対応アンドロイド(API): Marshmallow (API 23) ~ 更新・修正事項 アプリ内画面表示設定>背景色と背景画像: 画面回転後にプルダウンリストに表示される項目が1つになってしまう不都合を修正。 ...

Flutter備忘録: Tansform.scaleでは親Widgetの大きさが変わらなかった件

イメージ
開発中のスマホアプリ 『コメ欄』 のFlutter版の配信画面に、任意の画像を配置出来る機能を追加するのに、Flutterの Transform ウイジェットの「 Tansform.scale 」コンストラクタを使って Image ウイジェットを縮小・拡大表示させる仕組みにした処、画像は設定した通りの大きさで表示されましたが、画像を表示している親ウイジェットの縦横が元の画像の大きさのままでした。。。 結果として、親ウイジェットの縦横も同様に縮小・拡大させるには Tansform.scale ではなく、 SizedBox や Container ウイジェットで縦横の大きさを指定しないといけなかったので、解決までの道のりをここにメモしておきます。 キーワード : #Tansform.scale #ウイジェットの大きさが変わらない #ImageStreamListener #縦横のサイズが必要 [目次] Tansform.scaleで画像サイズの変更 スタックオーバーフローにあったQ&A コード変更 Tansform.scaleで画像サイズの変更 Tansform.scaleを使った場合 右は、例として383x400のサイズに編集した「 いらすとや 」からのフリー素材の画像「 パスをするサッカー選手のイラスト(男性) 」を、アプリ内でTansform.scaleを使って0.45倍に縮小して、画面解像度が1080x2340のPixel 5エミュレータ上に表示した際のスクショになります。 ウイジェットの大きさが分かり易い様に、 BoxDecoration を使ってウイジェットに緑の枠を付けてありますが、イラストは0.45倍に縮小されて表示されているものの、ウイジェットの枠は元の画像の大きさのままの383x400で表示されて。。。 いや、1080x2340の画面上に388x400の画像を表示した場合なら、 画像の幅は画面の幅の半分位になるはず。。。 理論画素数と物理画素数 ...

Flutter備忘録: DartPadでブログ内にFlutter/Dartコードをページ幅で表示する方法

イメージ
最近、 FlutterのAPIドキュメント を良く眺めていますが、ドキュメントのページ内に含まれるサンプルコードの一部はブラウザ上で実際に実行して結果を確認出来る仕様になっています。 例: AnimatedList 、 FutureBuilder 、 PhysicalShape クラスなど 少し気になったので仕組みを検索した処、Webページのソースに『 DartPad 』というJavaScriptで書かれたオープンソースのスクリプトを組み込む事でFlutter/Dartで書かれた任意のコードがブラウザ上で実行可能になるそうです。 このサイトで、これまでに、いくつかのFluterコードを含む備忘録をメモしているので、今後のメモに使えるのではと思い、『 DartPad 』を使ってみました。 DartPadのWikiの 組み込みガイド にはGitHubのgistを表示する方法(①)と、タグ内にコードを埋め込む方法(②)の2つが紹介されていますが、この備忘録では後者の②を使った方法を簡単に紹介しています。 悲報: ②サポート終了 ②の方法はページが比較的重くなるという理由で廃止になった様です。 組み込みに使うスクリプト「inject_embed.dart.js」が削除されているので、以前②の方法でDartPadを表示していた場合は読み込みエラーになるのでDartPadは表示されなくなっています。 でも 、上記のガイドの通りにするだけだと、実際にページ内に表示されるDartPadの幅が300px程度しかなく、小さすぎて使い物になりませんでした。 そこで、CSSやJSを使って修正を加えたらDartPadをページ幅で表示が出来たので、 解決方法 もこの記事で紹介しています。 キーワード : #DartPadが小さい #DartPadをページ幅で表示する方法 [目次] DartPad組み込みガイド Converting code blocks to DartPad (コードブロックをDartPadに変換) ...

『コメ欄』Lite リリースノート (v0.1.1e ~ v0.1.1g)

イメージ
👉 『コメ欄』クイックセットアップガイド 👉 サポートページ [ 目次 ] リリースノート v0.1.1g リリースノート v0.1.1f リリースノート v0.1.1e ツイキャス専門店 コメ欄 (v0.1.1g) 20/Aug/2022 公開 対応アンドロイド(API): Marshmallow (API 23) ~ 更新・修正事項 ビルドターゲットをAndroid 11 (API 31)からAndroid 12 (API 32) に更新。 各Android SDKモジュールのバージョン更新。 UIの更新 プリセットカスタムCSSの更新 アプリ内表示モード: ドロワーメニューに「メイン画面に戻る」を追加。 横画面表示中に、アプリ内表示モードで背景色/背景画像を選択する際に表示される選択アイコンの大きさを改善。 背景画像設定画面: インポートされた画像の削除機能の追加。 ヘルプ画面: カスタムCSSの外部リンクの更新。 ツイキャス専門店 コメ欄 (v0.1.1f) 30/Dec/2021 公開 対応アンドロイド(API): Marshmallow (API 23) ~ 更新・修正事項 Android SDKのcameraXモジュールのバージョン更新 ホーム画面表示モード終了後、アプリのメイン画面が再表示される仕様に変更。 「クイックスタートガイド」のリンクテキストを「クイックセットアップガイド」に更新。 ツイキャス専門店 コメ欄 (v0.1.1e) 17/Dec/2021 公開 対応アンドロイド(API): Marshmallow (API 23) ~...

Flutter備忘録: AnimatedSwitcherとフルスクリーン表示 (BoxFit)

イメージ
AnimatedSwitcher ウイジェットを使って、2つのウイジェットの表示をアニメーション効果付きで切り替える際、前後で表示されるウイジェットに BoxFitプロパティで全画面に拡大表示しているウイジェットがあると 実際の表示が全画面にならない場合があったのでその解決法をメモしておきます。 キ-ワード : #AnimatedSwitcher #全画面表示 #layoutBuilder #カスタムLayoutBuilder [目次] AnimatedSwitcherウイジェット AnimatedSwitcher.defaultLayoutBuilder Stackウイジェットを親ウイジェットの大きさに合わせる 結果 現在、開発環境をFlutterに移行中のスマホアプリ 『コメ欄』 に、設定した複数の画像から1つをアプリの背景画像として表示させる画面があります。 画像の表示には Image ウイジェットを使っていますが、表示する画像の画素サイズが、スマホ画面の大きさとは違う場合がほとんどなので、Imageウイジェットの fit プロパティに BoxFit を指定して背景に設定する画像を画面の大きさに合わせて拡大、縮小や、引き延ばしをして表示出来る様にしています。 例:『コメ欄』の画面 (1080x2220) 画素が610x800 (①)と 808x808 (②)の画像が画面上に拡大表示されています (BoxFit.cover) 背景画像表示例 ① 背景画像表示例 ② 背景画像表示例 として「 いらすとや 」のサンプル素材を背景画像として使わせてもらいました。 AnimatedSwitcherウイジェット 背景画像は複数設定可能なため、アプリ内で切り替える事が出来ますが、その際に瞬時に画像が切り替わるのではなく、フェードアウト・フェードインを組み合わせたクロスフェ...