kii-memo-dev (開発メモ)

👉 『コメ欄』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) ~ 更新・修正事項 アプリ内画面表示設定>背景色と背景画像: 画面回転後にプルダウンリストに表示される項目が１つになってしまう不都合を修正。 ...

開発中のスマホアプリ 『コメ欄』 の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の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に変換) ...

👉 『コメ欄』クイックセットアップガイド 👉 サポートページ [ 目次 ] リリースノート 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) ~...

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

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...

「 メモ帳 」と「 kii-memo-dev 」で公開しているツイキャスのコメント欄のオーバーレイ用のカスタムCSSについて、 「!important」を使わない方法はないですか? という質問をいただいた事があるので、そんな質問への回答をここに置いておきます。 一般のWebコンテンツを制作する際には 『できるだけ「!important」を使わない方が良い』 と言われているので、いただいた質問はその言葉に沿った質問だろうと推測しますが、元になるのページのCSS設定で「!important」が既に使われている場合は「!important」を使わないとその設定を上書きする事が出来ないので、カスタムCSS上で「!important」を使わないといけないので使っている場合がほとんどです。 そもそも、カスタムCSSの様に、既に存在するページまたはオーバーレイなどのWebコンテントに追加で読み込むCSSを制作中に、 元のコンテントのCSSに「!important」が使われていなければ、後で読み込むCSSに「!important」を使わなくても済むのに。。。 となるので、必要が無いのなら『「!important」を使わない方が良い』と言われる由来になっているのだと思います。 付け加えて、オーバーレイ用のカスタムCSSの場合は、そのカスタムCSSが読み込まれる時点で、表示されるコンテンツはHTMLから読み込んだDOMをグラフィックへとして処理されます。 グラフィックに処理されると これ以上CSSを読み込む事は出来ない 為、オーバーレイのカスタムCSSで「!important」を使っても使わなくてもその後で影響を受ける人はとても限定的になります。 多分、表示に使うアプリの開発者が、アプリが処理出来ないので「!important」を使って欲しくない。。などとなる位でしょうか？ 一方で、一般的なWebコンテンツの場合は表示されているWebコンテンツにCSSを加えて変更を加えたいという場合もあるので「!important」は使わない方が良いと言われているはずです。 [追記] 誤解が無いように書いておきますが、不必要な「!important」は使わない方が良...

時々、HTMLドキュメントをテキストエディタで編集しながらページを作ることがあるのですが、そんな時にコピペで使えるHTML5のベーステンプレートをここに置いておきます。 [目次] HTML5のテンプレート (UTF-8) 日本語用 HTML5のテンプレート (UTF-8) テンプレートの右下にある クリップボードにコピー ボタンを押すとHTMLコードがクリップボードにコピーされます。 HTML5のテンプレート (UTF-8) <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>タイトル</title> </head> <body> </body> </html> クリップボードにコピー 日本語用 HTML5のテンプレート (UTF-8) 加えて、日本語専用のテンプレートも。 <!DOCTYPE html> <html xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="ja" /> <title>タイトル</title> </head> <body> </body> </html> クリップボードにコピー

関連サイトの「 kiiのメモ帳 」で公開している『 L◯NEの会話画面風のツイキャスコメ欄カスタムCSS (シンプル版) 』ですが、 『 コメ欄 』のアプリ内表示モードでカメラ機能を使う場合に、吹き出しの背景に映る部分の画像が吹き出しの色と似ていると、コントラストの関係で吹き出し部と背景が同一化してしまうので、吹き出し部に 囲いの線 又は 色付きの影 のどちらかを追加で表示出来る様に変更してみました。 因みに以前のカスタムCSSでは、吹き出しの根元部は「◣」を使って再現していましたが、今回はカール付きで弧を描いているので少し再現度が向上しています。 このページの後方にある 設定 の部分で囲い線と影の他に、文字の大きさや色などをクリックでCSSをカスタマイズする事が出来ます。 カスタマイズ後は カスタムCSS の下にある CSSをクリップボードにコピー をクリックするとカスタムCSSがクリップボードにコピーされます。 [目次] 囲いの枠線と影の例 カスタムCSS LINE風 (コメ欄用) 設定 (Part-1) サンプル 設定 (Part-2) スマホアプリ 『コメ欄』での使用例 影を吹き出しの下方向に表示する方法 更新履歴 L◯NEの会話画面風のツイキャスコメ欄カスタムCSS シンプル版 @ メモ帳 (別サイト) x４バージョン : アイコンサイズ変更可 @ メモ帳 (別サイト) 幅細めバージョン : 狭い幅で表示したい時用 @ メモ帳 (別サイト) 『コメ欄』用カスタムCSS : 吹き出しの周りに枠線又は影の表示が可能 (このページ) 囲いの枠線と影の例 次に吹き出しに囲い線/影を設定した場合のコメント欄のスクショを例のとして貼っておきます。 囲い線と影の色は設定で、違う色にする事が可能なのと、ユーザー名やユーザーI...