「アプリ」の記事 - Crieit

シンプルな買い物リストアプリ「Lisble リスブル」について

2023-07-25T20:16:30+09:00

1. はじめに

シンプルな買い物リスト・メモ - Lisble リスブル
アプリの解説・紹介をするために記事を書きました。

シンプルな買い物リストのアプリです。メモ、ToDoアプリとしても機能します。ログイン・ユーザー登録不要、無料ですぐにご利用いただけます。

「買い忘れ、衝動買い、同じものを買ってしまう、出先での在庫確認、ネットショップとの比較など」考える事が多く、余計な負担だったので、リストをつけることにより改善したいと思いました。
購入履歴の保存機能は、在庫の備忘録にもなります。また買い物中の操作性を重視し、レイアウトの左/右切り替えが可能です。
事前に買うべきものをメモしておくことで、より計画的に買い物をして、結果的に節約につながります。

2. 買い物リストアプリ「Lisble リスブル」について

『買い物リスト・メモ - Lisble リスブル』

iOS,PC	Android

iOS,PCの方は、PWAの為、メニューから｢ホーム画面に追加｣をお願いします。	このアプリは Google Play で入手できます。

2-1. アプリの概要

購入履歴が残せるシンプルな買い物リストのアプリです。メモ、ToDoアプリとしても機能します。ログイン・ユーザー登録不要、無料ですぐにご利用できます。

About	List	History

2-2. アプリの3つの特徴

① 買い物中の操作性(UI,UX)
片手操作での誤操作防止のため編集機能を片側に寄せ、かつ 左/右表示切替可能。
チェックしたメモ、まだしていないメモを切り替え、すぐに確認できるようにしました。

② 購入履歴の保存
日付時間と共に保存をして、入力時に同一品目を色の変化でお知らせをします。
購入履歴を残すことにより、直近で購入したものがわかり、無駄な重複買いと共に在庫を思い出すきっかけにもなると思いました。

③ Amazon検索
入力したメモをそのままAmazon検索できます。買い物中の値段の比較や、欲しいものリストとしてご活用してもらえればと思いました。

2-3. アプリの画面案内

	スマホ
① 購入履歴へ ② メニュー(移動・設定) ③ タブ切り替え ④ ↑↓並べ替え ④ ←色､→削除 ⑤ 編集 ⑥ チェック ⑦ リスト追加 ⑧ ｢チェックあり｣のみ削除 ⑨ すべて削除

	タブレット・PC
① 編集 ② 色 ③ 削除 ④ ↑↓ 並べ替えのみ

2-4. アプリの基本操作

①②③これらの手順だけで簡単操作

	基本操作
① リスト作成 ② 買い物完了でチェック ③ チェック済みを削除 ※これらの手順だけで簡単操作

2-5. アプリの機能一覧

並び替え機能	スワイプ

	←色 →削除※ﾀｯﾁﾃﾞﾊﾞｲｽのみ

タブ切り替え	Amazon検索

すべて、チェックあり、なし	そのままAmazon検索

購入履歴の保存	重複買い防止

1. チェックあり削除 2. 購入履歴の保存	履歴と同じ品目を入力時に色の変化でお知らせ

続けて追加	全削除

＋ボタン、ENTERキｰ	チェック済みは購入履歴に保存

2-6. アプリの設定

テーマカラー	レイアウト	多言語

5種	片手操作での誤操作防止(左利き)	日本語 / 英語

自動削除	入力中のEnterキー操作

終了時に｢チェックあり｣を自動削除(保存)機能	追加 / 改行切り替え

3. 最後に

購入履歴が残せるシンプルな買い物リストアプリ『買い物リスト - Lisble リスブル』です。メモ、ToDoアプリとしても機能します。
購入履歴の保存機能により、無駄な重複購入を防ぎ、在庫の備忘録にもなります。
ログイン・ユーザー登録不要、無料ですぐにご利用いただけます。
もしよかったら、触ってみてください。

『買い物リスト・メモ - Lisble リスブル』

iOS,PC	Android

iOS,PCの方は、PWAの為、メニューから｢ホーム画面に追加｣をお願いします。	このアプリは Google Play で入手できます。

Google Play および Google Play ロゴは、Google LLC の商標です。

「議事録作成の自動化」で会議を大幅効率化！文字起こしアプリ Nottaの活用ポイント

2021-11-03T15:39:46+09:00

元記事：https://www.notta.ai/blog/notta-speech-to-text-tips

「毎日毎日会議づくし・・・せめて議事録には余計な時間を使いたくない」

「会議のテンポが速すぎて議事録メモが追い付かない」

「日本語の議事録を、翻訳して海外オフィスに展開しないと・・」

‍

こんな会議の「議事録」にまつわるお悩みはありませんか？

実は、上記のお悩みを一挙に解決できるアプリがあるんです！

‍

それは、自動で文字起こしをしてくれるアプリ“Notta”。

文字起こしをNottaに任せておけば、会議中は会議内容に集中するだけ。さらに「翻訳機能」までついているので、海外オフィス展開前の「議事録英訳しなきゃ！」という要望にまで応えられるんです。

この記事では、議事録作成でNottaを最大限活用するためのポイントをお伝えしていきます。

‍

Nottaの活用ポイント① | 議事録作成を任せる

一番ベーシックなNottaの活用方法は、文字起こし機能を使った議事録作成。

Nottaで会議中に音声を録音しておくだけで、自動で文字起こしが行われます。文字認識精度が非常に高く、誤字脱字が少ないので、後々の編集もラクラク。

また、アプリで録音していなくても、他の音声データを取り込んで文字起こしすることも可能。「リアルタイムで録音してなかった！」「過去の音声データから文字起こししたい」という時にも対応できます。

議事録編集の際、画像を挿入も可能なので、見やすく美しいビジュアルの議事録が作成できることもポイント。

議事録作成に費やす時間を最小化できる、嬉しい機能です。

‍

Nottaの活用ポイント② | 共有機能で、簡単共有＆編集

Nottaで文字起こししたメモは、他の人と共有可能。

即時の展開が必要なときに、リンクを送るだけでメモ内容が共有でき、とても便利です。

また、共有した相手と同時に編集することで、編集作業の効率化も実現できます。例えば会議内容が非常に長い場合は、複数人で手分けして編集する、といったことも可能。

議事録作成だけでなく、時間をかけず共有まで行うことができます。

‍

Nottaの活用ポイント③ | すぐに翻訳、すぐに展開

次に紹介するのは、Nottaの翻訳機能。

グローバル化が進む今、海外オフィスと会議内容を共有している人も多いのではないでしょうか。

「まずは日本語で議事録作成して、見直して、完成したら今後は英語に翻訳して・・・」

‍

こんなフローに時間を費やしている方は、実は少なくないのでは。

ただでさえ議事録作成に時間がかかるのに、さらに翻訳作業もしていると、肝心な本業に費やす時間がどんどん削られてしまいますよね。

‍

Nottaなら、文字起こしで作成した議事録を、さらに同アプリ内で翻訳することが可能。140言語に対応しているので、英語以外の言語でも活躍します。

議事録作成から翻訳作業まで、一括でNottaに任せて、大幅な効率アップが可能に。

‍

Nottaの活用ポイント④ | アプリでも、Webでも

Nottaはスマートフォンのアプリでも、またウェブ版（PC）でも使用可能です。「スマートフォンを忘れてしまった」「PCが無い」という時でも対応可能。お持ちのデバイスで気軽に使用できます。

また、アカウント登録することで同期ができるので、デバイス毎にデータが分散してしまう、ということはありません。

忙しくてバタバタしていても、１つデバイスがあればその場で簡単に議事録の文字起こしが可能。どこでもいつでも効率化を実現できます。

‍

まとめ

今回紹介したポイントを押さえてNottaを活用すれば、議事録作成プロセスが何段階も効率化すること間違いなしです。

ぜひ、次回の会議で試して、どのくらい作業効率がアップするのか、実感してみてくださいね。

Nottaは無料体験できますので、試してみましょう。
‍
‍Web版
‍‍Google ChromeやMicrosoft EdgeからWeb版をアクセスできます。（無料）
‍
‍Chrome拡張機能
‍Chrome web storeからNotta拡張機能をインストールできます。（無料）
‍
‍アプリ版‍
iOSアプリはApp Storeからダウンロードできます。（無料）
AndroidアプリはGoogle Playからダウンロードできます。（無料）

仕事はもっと効率化できる！記録作業は、文字起こしアプリ”Notta”で高性能AIにアウトソース

2021-11-03T11:59:33+09:00

元記事：https://www.notta.ai/blog/notta-app-turn-audio-to-text-in-minutes

「会議やインタビュー中、議事録や文字起こし作業ではなく、話の内容に集中したい・・・」そんなモヤモヤを解消してくれるのが、自動文字起こしアプリ。今回は、文字起こしを全て自動で行うAI音声認識文字起こしアプリ『Notta』の概要と、使用方法について説明。きっと「これは使える！」と思う機能が見つかるはずです。

■Nottaのミッションと実績

Nottaが届けたい思い

ユーザーの無駄な手間を省き、ストレスフリーへ導くことがNottaのミッション。音声を自動で「編集・検索・共有可能なテキスト」へ変換し、さらなる作業効率化へ導きます。

Nottaの実績

Nottaは日本語を始め、104言語に対応。日本では非常に高い評価を得ており、特に音声認識の性能は多くのユーザーから高精度というフィードバックが見られます。漢字変換能力も高く、後々のマニュアル編集の必要性が少ないことも、魅力のポイントの一つと言えます。

＜Nottaの魅力＞

・高性能のAI文字認識

・他人との共有機能

・テキスト翻訳機能

・マーキング機能

・テキスト編集や画像挿入編集が可能

・同期（Web版/アプリ版）機能

■Nottaの活用シーン

Nottaの活用シーンはさまざま。

一番よく使われる場面は「会議」や「インタビュー」。業務効率改善を目的とした利用が最も一般的です。一方で、「授業やセミナー」のメモ代わりに利用するユーザーも17％と多く、集中して講義内容に耳を傾けたい人にも使われている様子。

また、相手の会話内容をリアルタイムで文章認識できることから、主に聴覚障害のある方向けに「会話補助」として利用されることもあります。

他にも、医療現場（カルテ記録）で活用されるなど、工夫によって使用用途はさまざまな可能性があります。

■Nottaを使いこなす！仕事や日常をもっとラクにする、さまざまな機能

Nottaの機能は、基本の文字起こし機能だけでなく、作業をより楽にする機能が豊富にあります。自分にあった使い方を見つけて、作業効率化の幅を広げることができます。

文字起こし機能

Nottaの一番基本的な機能。AIが読み取った音声を、リアルタイム＆自動で文字起こししてくれます。AI機能で漢字変換や句読点追加もされるなど、精度の高い結果を期待できます。

対象言語は104言語と非常に多く、例えば聞き逃しやすい英語の会議でも、会話内容をしっかり記録しておくことが可能です。他にも、勉強中の他言語スピーチを音声記録して、後から文字としてゆっくり見直すことも。

なお、録音以外にも、既存の音声ファイルをアップロードし、その音声記録を文字起こしすることも可能。「リアルタイムで録音してなかった！」という時でも大丈夫です。過去に記録した音声ファイルを、文字にしてコンパクトなファイルサイズで保存しておきたい、という場合も便利です。

＜使い方（例：iOS）＞

①対象言語を設定（104言語から選択可能）

②「録音ボタン」をタップして、録音を開始

③「停止ボタン」で録音を終了

④「文字起こし」をタップで、文字起こしが自動で開始

データ同期機能

複数のデバイスでNottaを利用している場合、同じアカウントでログインしていれば、デバイス間でデータが自動同期されます。どのデバイスを使っても同じデータにアクセスすることができます。

例えばスマートフォンのアプリで音声記録と文字起こしをした場合、その後の編集作業はPC上のウェブ版で行うなど、その時々の状況や環境に合わせたサービスの利用が可能です。

また、「うっかりPCを忘れてしまった・・」ということがあっても、スマホで記録しておけばOK。後々ウェブで確認＆編集することができます。

テキスト編集・共有機能

読み取った音声から作成されたテキストを、マニュアルで編集することができます。不自然な箇所を分かりやすく言い換えたり、お好みの表現にしたり、細かな編集が後からできるので、安心。

さらに、画像挿入もありますので、会議や授業中に撮影した写真や、参考資料を挿入して、さらに視覚的に分かりやすい議事録やノートを作成することができます。

また、複数のデバイス間（PC・スマホなど）のデータ同期に加え、他人にデータを共有することも可能です。共有はとても簡単で、データ毎に付与されているリンクをコピーして、シェアしたい人にリンクを送付するだけ。

共有した相手もデータを閲覧・編集できますので、情報共有も編集もとてもスムーズ。作業効率化が一段階アップします。

マーキング機能

会議や会話の中で、「ここがポイント！」という場面をマーキングすることが可能。マーキング機能によって、重要なポイントの見直しが各段に楽になります。見直しが簡単にできることによって、議事録作成も効率的に行うことができます。

テキスト翻訳機能

高精度の文字起こしによって議事録作成が各段に楽になりますが、その一歩先の「あったらいいな」にも答えるNotta。

Nottaはなんと翻訳機能も搭載しており、音声データから作成したテキストを、そのまま多言語に翻訳することが可能です。対象言語は140言語ですので、きっとお探しの言語が見つかるはず。

例えば、この翻訳機能を使うことで、海外オフィスとの素早い情報共有が可能に。「海外オフィスには翻訳してから情報共有するから、いつも展開が遅くなるな・・」という悩みが解決されます。他にも、海外の友達やクライアントとのコミュニケーションへの活用など、いろいろなシーンで活躍する機能です。

もう何度も聞き返したくない！聴覚障害者におすすめのアプリは？

2021-11-01T20:00:28+09:00

元記事：https://www.notta.ai/blog/notta-transcription-communicating-with-people-with-hearing-loss

聴覚障害を抱える人の悩み

コミュニケーションに誤解が生まれやすい

聴覚障害の程度によりますが、会話をキャッチできないことからコミュニケーションに齟齬が発生しやすくなります。
自分がAであると解釈していたものが、相手は実はBだったのにも関わらず、それに気付かずに会話を続けてしまい、相手との間に誤解が発生しまうことが多くなるからです。
また、自分が誤解しやすい状況であると理解をしていたとしても、常にそれを意識して会話ができるわけではないため、なかなか対策がしづらいというのも現実です。

会議や授業が理解できない

誰か1人が話し、それをずっと聞く形式の会議や授業の場合はそこまで問題にはなりません。
しかし、複数の人が同時に話したり、入れ替わり立ち替わりに発言者が変わったりする状況の場合、一体誰がどんな話をしていたのかがわからなくなってしまう方も多いです。
こうした状況は、特に発言者が分かりづらいオンライン会議やオンライン授業でよく発生します。
また、それが可能であったとしても、それにずっと注意を向けるのは非常に大変で疲れ切ってしまうため、自然と「聞いた振り」をしてしまい、結局他のメンバーとの誤解が生じてしまう……といったこともよくあります。

何度も聞き返してしまい、相手に負担をかけてしまう

上記のような問題を抱えているため、必然と相手にもう一度言ってもらうように頼むことが多くなりますが、これも何度も繰り返すと、あからさまに面倒臭そうな顔をする人もいます。
また、仮に相手が親切でそういったことがなかったとしても、自分が「何度も聞いて申し訳ない」と罪悪感を覚えてしまう方も多いです。
くわえて、相手に迷惑をかけたくない思いから、聞き取れなかったとしても、そのまま曖昧にしてしまうといったこともあります。

聴覚障害者の悩みの解決策は？

補聴器を購入

単純に音が聞きやすくなるだけでなく、他の人から見て聴覚に障害を抱えていることがわかりやすくなるため、一番良い解決策と言えます。
しかし、問題は補聴器の値段の高さです。
通常、安くても3万円ほどかかり、高いものなら30万円もします。
障害の程度や好みもありますが、手軽に試せる金額ではありません。

周囲の人へ配慮をお願いする

ゆっくり大きな声で話してもらうようにお願いしたり、静かな場所で一人一人発言してもらうようにしたりすることで、聞き取りやすくなります。
特に必要なものもなく手軽ですが、誰でも配慮してくれるわけではありませんし、可能な環境も限られてしまいます。
また、「他人にお願いをするのが苦手」という方は、そもそもこの手段を取りづらいかもしれません。

聴覚障害者向けのツールやアプリを活用する

スマートフォンやパソコン向けに、聴覚障害者向けのツールがあります。
この場合、誰かに配慮をお願いする必要もないですし、無料のものや補聴器と比較して、はるかに安い価格で使用できるため、手軽に導入できます。
この方法の問題は、数が多すぎてどれが良いかわからないということです。
中には、(無料のものによく見られることですが) 使い勝手が悪かったり、品質が良くなかったりするものもあります。
また、すべてを試すわけにもいかないため、自分の用途に合ったものを見つけるのも大変です。

文字起こしアプリ「Notta」は聴覚障害がある人におすすめ

Nottaは、スマートフォン・パソコンを問わず使用できる文字起こしアプリですが、聴覚障害を抱える方にもおすすめできる理由が3つあります。

AIを活用した高精度な音声認識

最先端のAI技術を駆使し、高い精度で音声を認識、文字起こしが行えます。
そのため、後で何を言ったのかを確認する際に、相手に聞くことなく内容を把握できます。
「何度も何度も相手に聞き返したくない！」と思っている方に特におすすめです。

時間や重要なキーワードから発言内容を確認できる

会話をしていて、後で発言を確認したくなったとき、「いつ言ってたっけ？」とわからなくなることも多いと思います。
そして、相手に「○○って、何て言ってたんだっけ？」と聞き返す……となると、相手に迷惑をかけたくないからアプリを使っている場合、本末転倒ですね。
Nottaの場合、開始時刻からストップウォッチのようにタイムスタンプが記録されていくため、「たしか、会話してから30分後ぐらいに言ってたかな？」といった時間によるものや、「○○に関することについて話しているときだった」といったような、特定のキーワードから発言内容を推測して簡単に検索できます。

手軽に使えるので、相手に負担をかけない

会話の開始時に、Nottaを開いてアプリ内の [+] をタップするだけで録音・文字起こしが開始されます。
この操作は、スマートフォンでもパソコンでも同じです。
その作業を行うのも自分であるため、会話をしている相手に負担をかけることも一切ありません。
これなら、何の気兼ねもなく誰とでも会話できるようになりますよね。

まとめ

聴覚障害を抱える方の悩みは、補聴器を付けていない限りは目に見えないため、中々周囲の理解を得られません。
また、理解を得られたとしても、毎回それを他人にお願いするのは気が引けてしまいます。
そのため、「自分でなんとかできることは、できる限り何とかしたい」と思っている方も多いでしょう。
色々な対策が考えられますが、Nottaだと補聴器と比べて低価格で利用できますので、まずは一度試してみてみると良いでしょう。

自動文字起こしサービスNottaが選ばれる理由

2021-10-29T16:26:28+09:00

元記事：https://www.notta.ai/blog/notta-vs-alternative-voice-transcription

AI自動文字起こしサービスNottaは2020年5月以来、80万DLを突破する会社員・フリーランス・学生等向けの文字起こし・記録・翻訳サービスを提供しています。

使用範囲ーー音声ソースの収録範囲が幅広い

スマホアプリ（iPhoneやAndroid）に対応、場所を問わずにどこでもリアルタイム文字起こし
Zoom会議に自動・代理出席機能つき、Web会議内容を記録して議事録作成がより効率的に
Chrome拡張機能によりWebページの音声コンテンツをワンクリックで録音・文字起こしできる

Nottaがあれば、あらゆる音声コンテンツの録音・文字起こし・翻訳は、楽々こなせます。

‍

使用方法ーーテキスト編集・翻訳など様々な機能にも対応

日本語・英語・中国語・韓国語・ドイツ語・フランス語など104ケ国に対応する
アプリで文字起こしPCで手軽に編集し、また画像の插入もできるので議事録の作成が楽々
文字起こし結果の翻訳（４２言語に対応）ができるから多言語の学習に役立つ
テキストや音声データのエクスポート・リンクで他人と簡単共有

Nottaは、基本の文字起こし機能だけではなく、作業をより楽にする機能が豊富にあります。自分にあった使い方で、作業効率化の幅を広げることができます。

‍

R社サービスとの徹底比較

高精度の文字起こしかつ多種な機能をお手頃な価格でご用意しています。無料会員プランもありますので、お気軽にお試しください。

Nottaは無料体験できますので、試してみましょう。

‍Web版
‍‍Google ChromeやMicrosoft EdgeからWeb版をアクセスできます。（無料）
‍
‍Chrome拡張機能
‍Chrome web storeからNotta拡張機能をインストールできます。（無料）
‍
‍アプリ版‍
iOSアプリはApp Storeからダウンロードできます。（無料）
AndroidアプリはGoogle Playからダウンロードできます。（無料）

過去に思いついたWebサービス/アプリのアイデアを吐き出す

2020-12-09T12:01:40+09:00

僕はWebサービスを作るのが好きなのだが、ZennというWebサービスを開発しているため、しばらくは実際に作ることが難しい。そこで、アイデアを書き出しておくことにする。中にはすでにサービスとして存在するようなアイデアもあると思われる。

画像出力前提のTwitter用ブログサービス

Twitterと連携することを前提としたミニブログ投稿サービス
ツイッターでちょっとした長文を書きたいときに使う
書き終えると「タイトル」1枚 + 「本文」最大3枚の画像が出力されるので、この画像をTwitterに流せる
- よく長文をメモアプリとかのスクショで投下する人がいるが、あれをもっとやりやすく最適化したイメージ
- Twitterでちょうど見やすいように画像サイズや文字の配置などを調整する
Twitter APIを使って、自動で4枚の画像をツイートできるようにする
- 「こういうツイートがされます」と公開前にプレビューを分かりやすく表示できるのがポイント
画像では読みにくい人のために本文はサービス上で読めるようにする
- Twitter APIで投稿する場合は、本ツイートへのリプライで「全文はこちら」というリンクを自動で貼るようにする

40字制限のTwitter

140字って意外と書けるよね。だから意識高いこととか書いちゃう
- 僕もTwitterに意識高いこと書いてるよ。もう後戻りできないよ
40字制限にすれば意識高いことを書きづらくなり、みんな「にゃーーん」とかしか言えなくなるのでは
代わりに投稿に対するリアクションでSlackみたいに色々使えるようにするといいんじゃないかな

TwiPicks

News Picksのコメント欄をツイートに代替したもの
APIで自動でツイート取得。
記事（URL）ベースでアグリゲーション
よく考えたらこれニュートピがやってることか
UIの工夫次第では時間を潰せる場所になりそう

でぶレシピ

ファミチキを買ってきて米の上にのせてマヨネーズとベビースターラーメンかけて出来上がりです！みたいなデブための簡単レシピだけを集めたサイト
全部のレシピの手順をTwitterであるあるな感じにする「騙されたと思ってさ…ごはんの上にファミチキのせて、ベビースターラーメンとマヨネーズぶっかけてみて…。悪魔みたいな旨さになるから…」。ひたすらこういうのがサイトに並んでるというカオスな感じ。
- はてぶ民に嫌われそう
Twitterで拡散されることを前提にサイトを作る

保護犬の良さみを広めるためのwebメディア

これは僕がやりたいだけ
保護犬はいいぞ。みんなペットショップで犬を飼おうとする前に保護犬を探してみたらどうだい？
全国の保護犬を飼ってる人たちにインタビューして胸アツエピソードとか残していきたい
ページビューが増えたら、犬を保護しているNPOとかと連携して、保護が必要な犬の情報も載せる
Twitterで拡散されやすいようにうまく設計できれば、もしかすると不幸なワンコたちを減らしていけるかも？

OSSのアイデア

オープンソース絵文字

これはWebサービスではなくただのアイデア
現状だとサービスに導入しやすいオープンソースの絵文字はTwemojiくらい。でもTwemojiってあまり映えない絵文字が多かったりする。
イラストを練習がてら全種類の絵文字を描いて、オープンソースとしてGitHubに公開する
- イラストが綺麗で統一感があれば、多分ものすごくStarがつく。僕もつける
- SVGとPNGの2種類が必要だと思われる。SVGだけでもいいかも
世界的に普及すればFontAwesomeっぽいビジネスが可能かも

macho.css

茶色っぽいゴリゴリでテカテカのWebサイトを作るためのCSSフレームワーク
キャッチコピー「Light weight and well built CSS frame work that lift up your website.」
コンポーネント
- ボタンはとても立体的に隆起したテカテカしたものを
- チェックボックスやラジオボタンなどのフォーム部品も思わず押したくなるような筋肉みたいなテカテカしたものを
- 「style--thin」とか「style---well-built」とか筋肉を想起させるようなクラス名にする
サイトのフッターに「Buy me protain」という寄付を募るリンクを貼る

他にもありますが、力尽きたのでこんなところで。

Flutterに入門してつまったところ。電卓アプリを作りながら。その１

2019-11-04T05:43:52+09:00

最近、やっとFlutterに入門。。

こんな電卓アプリを作りながら、Flutterのことを理解している最中。
その際に、悩んだ点や調べた内容の備忘録。

とりあえず、ボタンを押すと、上の絵が変わるところまでできた(*´ω｀*) pic.twitter.com/Ty8npyo3eO
— 積読ハウマッチ📚きらぷか (@kira_puka) November 3, 2019

以下の記事の続き的な内容。
1. Flutterに入門する前に集めたリンク集 - くらげになりたい。
2. Flutterに入門して疑問に思ったことと、そのとき調べたこと - くらげになりたい。

背景画像をつけたい

Containerのdecorationを使うといける

class Background extends StatelessWidget {
  Background({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage("images/background.png"), fit: BoxFit.fill),
      ),
    );
  }
}

参考: Flutterで画像背景を設定して透過ヘッダーにする - Qiita

AppBarがないときに、ステータスバーにかぶらないようにしたい

SafeAreaで囲むといけた

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: //...,
      ),
    );
  }

参考: SafeArea | Flutter開発する前に知っておきたい35のWidget一覧 - Qiita

HexColorで色を指定したい

標準ライブラリにはないっぽい？
標準クラスをextendsして自作した。

import 'dart:ui';

class HexColor extends Color {
  static int _getColorFromHex(String hexColor) {
    hexColor = hexColor.toUpperCase().replaceAll("#", "");
    if (hexColor.length == 6) {
      hexColor = "FF" + hexColor;
    }
    return int.parse(hexColor, radix: 16);
  }

  HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
}

使い方はこんな感じ。

import './HexColor.dart';
class ColorText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      "123456789",
      style: TextStyle(
        color: HexColor("#4D4DAC"),
      ),
    );
  }
}

参考: colors — Flutterで16進数のカラー文字列を使用する方法

ImageButtonみたいに、画像にクリックイベントをつける

ImageをGestureDetectorで囲むと、イベントを取得できるっぽい。

return GestureDetector(
  onTap: () => debugPrint("onTap"),
  child: Image.asset("image/button.png"),
);

参考: Create a button with an image in Flutter? - Stack Overflow
参考: How to add on click event to Image in Flutter

コンソールログを表示する

いろいろ書き方があるっぽい。

// stderr.writeln
stderr.writeln('print me');

// print, debugPrint
print("print messaage");
debugPrint("debugPrint messaage");

// developer.log
developer.log('log me', name: 'my.app.category');

developer.log('log me 1', name: 'my.other.category');
developer.log('log me 2', name: 'my.other.category');

// developer.log + error
developer.log(
  'log me',
  name: 'my.app.category',
  error: jsonEncode(myCustomObject),
);

参考: Debugging Flutter apps programmatically - Flutter
参考: Flutter で print 出力を得たい - Qiita

Dev ToolのWidget Inspectionを使う。
AndroidのLayout Inspectorみたいなやつ。

参考: Debugging Flutter apps - Flutter

HotReloadが効かない(buildしても再生成されない書き方をしてた)

buildしても再生成されない書き方をしてた...

だめな例。

class _PageState extends State {
  Widget _widget = Text("aaaa"); // ←だめなところ

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _widget,
    );
  }
}

良い例。

class _PageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text("aaaa"),
    );
  }
}

追記

つぶやいたら、monoさんから詳細を教えてもらえた(´ω｀)
一連のリプの解説にもある通り、constをつけないと、キャッシュが使われるよう。

WidgetのキャッシュとHot Reloadが効くか否かの関係はこんな感じ(　´･‿･｀)https://t.co/fjG2ropgXs https://t.co/H4PUhW3v3u pic.twitter.com/kqqBFFvOt1
— mono 🎯 @自宅 (@_mono) November 3, 2019

公式ドキュメントではここ(Hot reload - Flutter)に、monoさんの別の記事でも解説されている。

フォーマッターでいい感じに整形されない

末尾のコンマをつけていないので、いい感じにならないっぽい。
参考記事をみると「末尾コンマは大事」と書いてあった。

Dartの末尾コンマは大事
Dartの末尾コンマはその有無によってdartfmt結果が変わったりします。
Using trailing commasに以下の図とともに説明されているように、
基本的には末尾に ”,” を入れた方がきれいかつ横幅もコンパクトに整形されます。

参考: Flutterでの開発をスムーズに行うためのTips集 - Flutter 🇯🇵 - Medium

おわりに

以下の記事、IDEの機能の紹介やリファクタのTipsもたくさんあるので、
開発前に以下の記事に目を通すとだいぶ楽になる。。
- Flutterでの開発をスムーズに行うためのTips集 - Flutter 🇯🇵 - Medium

やっと、UIができた感じなので、すこしずつ作っていく。
また進んだら、「その2」を調べたところをまとめていく予定〜

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪