投稿

2022の投稿を表示しています

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

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

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

イメージ
ツイキャス配信・閲覧支援機能をいくつか搭載したアプリ、 『 キャスポケットツール 』 ( Android | iOS ) を作ってみました。 ツイキャス のユーザーやライブ配信を検索する機能をはじめ、自分のサポート・サポーターを閲覧したり、気になるユーザーを登録してライブ配信の通知を有効にしたりする事が出来ます。 このアプリの機能を使うのには、 アプリを ツイキャスのアカウントに連携 する必要がある他、 Android 13とそれ以前 のAndroidでは、 バックグラウンド処理を有効 にすると、登録した「気になるユーザー」のライブ配信開始の通知を受け取れる確率が上がるので、 ここに『キャスポケットツール』を使うのに 最低限必要な初期設定 をメモしておきます。 [ 目次 ] キャスポケットツールの機能 初期設定 バックグラウンド処理の有効化 (Android 13とそれ以前限定) 備考 #キャスポケットツール キャスポケットツール 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ウイジェット 背景画像は複数設定可能なため、アプリ内で切り替える事が出来ますが、その際に瞬時に画像が切り替わるのではなく、フェードアウト・フェードインを組み合わせたクロスフェ

Flutter備忘録: TextFieldに入力された文字列の一部のスタイルを変更する方法

イメージ
Googleのストアで公開しているAndoridアプリの 『コメ欄』 Lite ( ライト ) は、これまで Android SDK ベースの開発環境下でJava/Kotlin言語で開発していましたが、現在は、Googleの Flutter(フラッター) というアプリ開発環境下に移行しようと作業を進めています。 Java/Kotlin言語で開発した『コメ欄』Liteでは、URLの入力の際に、 TextField を使っていますが、入力された文字列の 正しくない部分だけを赤字で表示 するJava/Kotlin言語のコードが組み込まれています。 このコードをFlutter版のコードに変換する時に、一筋縄には行かなかったのでここに備忘録として記録しておきます。 キーワード : #TextField #TextEditingController #buildTextSpan #buildTextSpanをオーバーライド [目次] Android SDKからFlutterへ移植 マテリアルデザインのTextField 間違えている部分を赤色で表示: Android SDKでは比較的簡単に可能 Flutterでは? 例: TextFieldに入力された文字列の一部を赤字で表示する方法 (buildTextSpanをオーバーライド) 終わりに Android SDKからFlutterへ移植 Android SDK はその名の通り、Android専用のアプリを制作するソフト開発キット(SDK)で、Androidアプリしか制作する事しか出来ません ※ 。 iOS用のアプリを制作したい場合は別に iOS SDK を使ってSwift又はObject-C言語で直接開発するか、Swift/Object-Cに互換性のある開発環境を使う必要があります。 上記の Kotlin もAndroid SDKがKotlinに対応している上に、KotlinがiOS SDKのAPIを呼ぶ事も出来ます。 なので、Kotlin上で、Android特有の機能の場合はAndro