SPINS CRE@TION勉強会¶

2023-03-28 tue¶

AI系¶

• 実際に何かで遊んでみよう
• Phind
  • URL
  • 【重宝確定】エンジニアからの技術的な質問に最適化された検索エンジン『Phind』が激アツ！ ・検索結果の要約と同時にサンプルコードを生成 ・文脈を理解しチャットAIにもなる ・リアルタイムデータで解答 ・出典元も一緒に教えてくれる ChatGPTよりPhindの方が開発現場では使えそうだな〜
• URL
  • ChatGPTとペアプログラミング
  • SymPyでも同じような補助がもらえるのでは?
• 「エラーが出たんですが」「エラーメッセージをちゃんと読め」→どうすれば良いんですか
  • エラーを読んで解決策をもらう
  • エラーを読むのは難しい場合はよくある
  • ChatGPTでTerraformのエラーメッセージから原因を特定できるか試してみた

Web・アプリ¶

• ダメなUIを作るコツ
• 2022年に起きたフロントエンドの変化
  • spearkerdeck
• Linuxコンテナの「次」としてのWebAssembly、の解説
• imgタグで行うウェブサイトの最適化
  • Lighthouseで最適化していると出てくる
• イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理
  • URL
  • 「なぜJavaScriptはシングルスレッドなのに、時間計算(setTimeoutなど)をしながら別の処理を行うことができるのか？」 というところからスタートしないで、いきなりPromiseやasync/awaitから入ると何もわからない。 正しい順序で1から非同期処理が学べる最高の一冊。
• 自社のサービス開発まで手がける「インハウスデザイナー」。制作会社との違いや、転職後に意識すべきこととは？
• テストコード・自動化に関して
  • 「テストコードそのものの正しさはどうやって検証する?」みたいなツイートを見かけたので自分の考えを書くと
    • テストは誤りを検出するものであり、正しさを検証できない
    • 自動化し繰り返すコストが激減すること自体に意義がある
    • テストコードは他の開発者(未来の自分含む)へ向けたドキュメント
  • バグの無いプログラムが作り得ないのと同様に、完璧なテストコードもまた存在し得ない。 ただ、繰り返し開発する中で、テストコード自体の品質(網羅するケース)もまた継続的に改善することはできる
  • また、ユニットテスト以外のテストも自動化し、テスト自体のバリエーションを増やすことで多角的な検証ができるようになる。 パフォーマンスやセキュリティ、複数のコンポーネントを結合させたシナリオテストなど テストはプログラムを検証する視点とも言えるので、視点が増えれば検証の精度も上がる
  • 自分は、よく機能追加やリファクタリングの前に、適当に壊れるような実装を入れてみて、どのテストが壊れるか観察するということをよくやる。 これにより、テストコードを何度も読み返すことになり、不足しているケースやコーナーケースにに気がついたりする
  • プロダクトコード本体と同様に、テストコード自体も継続して改善していくもの これは、テストコードだけではなく、モニタリング/監視とかにも言える
  • テストは自動化すると、テストを書いた分だけレバレッジが効いてくるので、テストを増やすことで、「可能なかぎり検証できるテスト」を継続的に目指すしかない。 もちろん、スローテストとは戦わないとだけど
• 【まとめ】エンジニア向けデザイン参考サイト
• デザイナーが一度は読むべきオススメのデザイン本6選【初心者必読！】
  • 『なるほどデザイン 〈目で見て楽しむ新しいデザインの本。〉』
  • 『デザイナーになる。 伝えるレイアウト・色・文字のいちばん大切な基本』
  • 『配色アイデア手帖 めくって見つける新しいデザインの本』
  • 『かわいい色の本 デザインと言葉の配色ブック』
  • 『けっきょく、よはく。 余白を活かしたデザインレイアウトの本』
  • 『タイポグラフィの基本ルール -プロに学ぶ、一生枯れない永久不滅テクニック』
• 「オブジェクト指向UIデザイン」を読む
• 「エンジニアのための理論でわかるデザイン入門」を読む

2023-03-14 tue¶

AI系¶

• 実際に何かで遊んでみよう
  • 引き続きアラビア語の勉強に使っている
• Twitter
  • 研究内容を短めの文章にまとめて, 質問を挙げさせる.
  • これ、学会発表練習時に想定質問として使うとめちゃくちゃ便利だな。学生の発表の想定質問を考えるの結構大変なので。
• プログラミング応用
  • ちょっとした作業・スクリプトなら割とさっと正確にやってくれる模様.
    • ボットを作ったり.
    • 「疲れ果てているときに代わりにちょっと試してみる」事例があった.
  • 作業用スクリプトの二つの側面
    • 息抜きにちょっとした気分転換も兼ねて
    • 本当に仕事用
  • 前者の「プログラミング」はまさに「趣味としてのお絵描きか仕事としてのお絵描きか」と同じっぽい
  • これにしても自分よりよいプログラムをコメントつきで書いてくれたり, 知らなかったライブラリを教えてくれることもある模様
  • さらなる検索・調査のためにとりあえず書かせてみるのもよさそう
• Regular Expression Puzzles and AI Coding Assistants
  • プチ読書会もしよう
  • いま読んでいる
  • 正規表現自体が本当にめんどい
  • 書くのはよくても読めない
  • 正規表現を書かせるだけではなく読ませる方のChatGPT利用もありうる
  • 正規表現も言語の一種: 形式言語理論で正規言語を表すための手段
  • 言語の解読の視点をもっと広げるといろいろ応用が効くのではないか
• 言語の解読
  • 最初の「学会用発表内容からの質問生成」: 文章を解読させた結果, 解読できない・よくわからない点を質問として練り上げてもらう
  • ChatGPTに文章を読ませて何かしてもらう視点を持つとよいのでは?
  • プログラムの生成ばかりではなく, プログラムを読んで解説してもらう方向性ももっと何かある?
  • いま本を読んでいたら「テストケースを作ってもらう」のにも使える?
  • 何にせよ「対話」を通じて話を膨らませる相手になってもらう発想は決定的に重要っぽい.
• Bing: すでにいろいろ制限がかかっていて残念らしい
• ChatGPT: APIが公開.

Web・アプリ¶

• DenoがNode.js互換レイヤを本体に統合し高速化、package.jsonサポートでNode.jsからの移行がさらに容易に。Deno 1.31リリース
• なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】

2023-02-28 tue¶

Web制作¶

• 昨日の話がちょっと気になったので
• サービス内容に対する議論を追いかけ切れていないためピント外れの可能性あり
  • クリエイションの各人のマインドセットというか目指す方向もあまりよくわかっていない
  • サービスはスタートアップ向けなのか? などもあまりよくわかっていない.
• 各種見積もりの難しさが問題になっていたように思う
• 見積もりが問題なら, 見積もりが楽な定型作業と, 事前見積りが難しい非定型作業のような分け方も考えるとよいのでは? 多分他にもいろいろな観点がある.
• 映像はよくわからないためWeb制作に関して考える
• いったん成果物・必要な作業・サービス提供対象の枠で考える
  • 内容と工数の観点
  • 見積もりのしやすさ・しにくさ
  • 作業の難しさ・簡単さ
  • 作業量の多さ・少なさ
• 大枠の想定
  • 成果物: Webサイト・LP
  • 必要な作業: ヒアリング・設計・デザイン(スタイリング)・実装
    • 設計: Webサイト全体の構造, 導線
  • サービス提供対象: 企業・経験を積んだ個人・スタートアップの個人
• 前提
  • Webサイト: 直接的な収益は生まない
  • LP: 商品販売用ページとして直接利益を生む
  • (スタートアップの個人はこの辺の区別もついていないのでは?)
• 成果物
  • Webサイト
    • スタートアップ
      • 完全にパッケージでよいのでは?
      • もちろんヘッダー画像や全体の配色設定など多少のカスタマイズは許可
      • むしろ「収益を生むLPに時間と金を使おう」と提案する
      • 見積もりしやすい
      • パッケージ対応という意味で駆け出しでも対応可能
    • 企業・経験を積んだ個人
      • 個別対応前提
      • むしろはじめからドカっとお金と時間をもらって長期的に付き合う対象ではないか
      • 見積もりというより継続的なサービス(または別パッケージ)対応案件ではないか
  • LP
    • 基本的にお金を生む
    • ハードな作り込み前提
    • 一点物としてサイト全体の構造を考えたりする必要はない
    • ABテスト的な意味で育てる要素はあるが, サイトを育てる観点とは違う
    • たぶん見積もりしやすい
      • 特に賞味期限があるタイプの商品だとスピードが必要
      • スタートアップだと早く売上を作る意味でもスピードが必要
      • 期間の意味で作業量は見積もりやすいのではないか
• 必要な作業
  • ヒアリング
    • まず内容が重い
      • ヒアリングシートを育てれば多少は軽くなる
    • 見積もりしにくい: むしろ明確にフェーズを切ったり「いまはこれでいこう」という決断が必要な作業
    • 特にWebサイトでは経験者が対応しなければならない
  • 設計
    • 設計が必要な時点でだいたい何もかも重い
  • デザイン(スタイリング)
    • 見積もりしにくい
    • 設計・作業量・差し戻し・調整が重い・多い
    • WebサイトとLPで重さ・多さは(たぶん)質的に違う
  • 実装
    • 設計ができれば見積もりはしやすい
• サービス提供対象
  • 企業・経験を積んだ個人
    • ふつう要件はきっちりしている
    • ヒアリングはしやすい
    • (経験者なら)見積もりもしやすい
    • 作業量は重い
  • スタートアップの個人
    • たぶんヒアリングは大変
    • 「WebサイトよりLP作れ」といったタイプの「コンサル」が必要なのではないか
    • この「コンサル」込みのパッケージ(Webサイトは軽くする, その代わりLPは手厚く)で割り切ってサービス提供するのも考えられる

AI系¶

• 実際に何かで遊んでみよう
• 最近語学学習で使っている
  • アラビア語に母音を振る
    • 時々おかしい
    • Emacsで自分でやった方がかえって速そう
    • あくまで自分で使う前提
  • 短文の文法説明
    • これはよさそう
    • 複数の単語・熟語と格を一気に調べられる
    • 単語と格はともかく, 素人が熟語を調べるのは辛酸をきわめる
• 数学の証明
  • ためしに一つやってみた: 具体的な関数の凸性の証明
  • 全く駄目
  • はじめから期待していない
  • 全然関係ないが, 割と前から初等幾何の定理の発見と自動証明というテーマがある
• 数学川柳
  • 言葉遊びの視点
  • 言葉遊び関係はもっと何かやってみたい
• Chat GPTの完全な上位互換！Bing AIの面白い使い方まとめ
• ChatGPTで騒いでる場合じゃない。 AI研究者が｢FlexGen｣をゲームチェンジャーと呼ぶ理由

Web・アプリ¶

• なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】
• ダメなUIを作るコツ
• 大手はどこもパスワードレス化を進めてる
• 2022年に起きたフロントエンドの変化
  • spearkerdeck
• Linuxコンテナの「次」としてのWebAssembly、の解説
• imgタグで行うウェブサイトの最適化
  • Lighthouseで最適化していると出てくる
• 自社のサービス開発まで手がける「インハウスデザイナー」。制作会社との違いや、転職後に意識すべきこととは？
• テストコード・自動化に関して
  • 「テストコードそのものの正しさはどうやって検証する?」みたいなツイートを見かけたので自分の考えを書くと
    • テストは誤りを検出するものであり、正しさを検証できない
    • 自動化し繰り返すコストが激減すること自体に意義がある
    • テストコードは他の開発者(未来の自分含む)へ向けたドキュメント
  • バグの無いプログラムが作り得ないのと同様に、完璧なテストコードもまた存在し得ない。 ただ、繰り返し開発する中で、テストコード自体の品質(網羅するケース)もまた継続的に改善することはできる
  • また、ユニットテスト以外のテストも自動化し、テスト自体のバリエーションを増やすことで多角的な検証ができるようになる。 パフォーマンスやセキュリティ、複数のコンポーネントを結合させたシナリオテストなど テストはプログラムを検証する視点とも言えるので、視点が増えれば検証の精度も上がる
  • 自分は、よく機能追加やリファクタリングの前に、適当に壊れるような実装を入れてみて、どのテストが壊れるか観察するということをよくやる。 これにより、テストコードを何度も読み返すことになり、不足しているケースやコーナーケースにに気がついたりする
  • プロダクトコード本体と同様に、テストコード自体も継続して改善していくもの これは、テストコードだけではなく、モニタリング/監視とかにも言える
  • テストは自動化すると、テストを書いた分だけレバレッジが効いてくるので、テストを増やすことで、「可能なかぎり検証できるテスト」を継続的に目指すしかない。 もちろん、スローテストとは戦わないとだけど
• 【まとめ】エンジニア向けデザイン参考サイト
• デザイナーが一度は読むべきオススメのデザイン本6選【初心者必読！】
  • 『なるほどデザイン 〈目で見て楽しむ新しいデザインの本。〉』
  • 『デザイナーになる。 伝えるレイアウト・色・文字のいちばん大切な基本』
  • 『配色アイデア手帖 めくって見つける新しいデザインの本』
  • 『かわいい色の本 デザインと言葉の配色ブック』
  • 『けっきょく、よはく。 余白を活かしたデザインレイアウトの本』
  • 『タイポグラフィの基本ルール -プロに学ぶ、一生枯れない永久不滅テクニック』
• 「オブジェクト指向UIデザイン」を読む
• 「エンジニアのための理論でわかるデザイン入門」を読む

2023-02-14 tue¶

AI系¶

• ChatGPT
  • Googleの脅威になっているとか何とか
  • AI利用は検索するときついでに使うところからはじめてみるか
• ChatGPTを始めとするAIの使い方 -20選まとめ
• ツイート
  • 「There's an AI for That（それをするためのAIは既にあります）」というサイトが狂ったような数のAIサービスがリスト化されていて、用途で検索するとそれに合ったAIが一覧で出てくるのでなかなか便利。
  • https://theresanaiforthat.com

Web・アプリ¶

• Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？
• 「経営層への情報セキュリティの説明大変ですよね？」　IPA、予算確保の説得材料を出してくれるツール公開
  • セキュリティ関連費用の可視化
• なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】

2023-01-17 tue¶

• ちょっと忙しくなってきそう
• 忙しくなるとはいえ, 緊急性が低くて自分一人ではやらないテーマを細く長くゆるく勉強する機会を保ちたい
• フロントエンド開発のためのセキュリティ入門 知らなかったでは済まされない脆弱性対策の必須知識が出るらしい
• 2023/2/13発売予定: 読みたい

.NETエコシステム¶

• 今年はこれの修行をしてみる予定: WASMも書ける
  • WASM: 「ワズム」
  • F#が好きでこれでいろいろやりたいのだが, 情報が少なすぎるため現在C#での.NET学習中
  • バックエンドがメインだが, 最近はWASM(Blazor)のおかげで一応フロントも書ける
  • C#でのWASMがどこまで流行るかは微妙
    • むしろあまり流行らないのではないかとさえ思う
    • そもそもC#もそこまで好きではない
  • そんなわけでお勧めはしないが自分の整理も兼ねて.NETの話を少しする
  • そこまで一般的に広く使われているとも思わないが, 確固たるファン層はいるイメージ
  • 少なくとも英語なら関連書籍もかなり積極的に出版されていて勉強しやすい
  • 処理系の進化も速い
• 昔はWindowsオンリーだったがいまはMacとLinuxでも動く
  • もともとWindowsオンリー: 2002年登場
  • Mac/Linuxでも動くMonoという処理系が登場
  • XamarinやUnityがmonoの上で動いていてクロスプラットフォーム
  • Xamarin買収でmonoもWindows管轄下に入った
  • クロスプラットフォームを含めてmonoと.NET本家の統合
  • .NET Standard2.0: これは単に仕様, APIセットの定義
    • .NET Framework 4.7: Windowsオンリー
  • .NET Core 3.0
    • 2014/11誕生
    • .NET Coreの4はなし: .NET Framework 4との混同を避けるため
  • .NET CoreのCoreは.NET5から消えた
  • いまは.NET7
  • .NET5 以降: 奇数版が試験的, サポート期間短い, サポート1年間
  • 偶数版はLTS: 3年間, .NET6 LTS
• Microsoft(技術の)トップが代わってから大分変わってかなり邪悪さは減った模様
• 何がどこまでうまくいくかはともかく, .NETエコシステムの上でいろいろやれる
  • 一般的なプログラミング言語: C#, F#, Visual Basic
  • スマホアプリ開発: 昔はXamarin, 今は.NET MAUI
    • スマホアプリはKotlin, Swiftの他, Flutter(Dart言語)がマルチプラットフォームで有名で次にReact Nativeという印象
  • デスクトップアプリ: .NET MAUI (少なくともWindowsのデスクトップは作れる)
  • Unity: ゲーム
  • Blazor: WASMによるフロントエンド開発
    • WASMはともかくBlazorは微妙な気がする
  • PowerShell: 実は.NETエコシステムでMac, Linuxでも使える(使ったことなし)
• WASM: C/C++, Rust, Golang, C# (.NET)
  • WASM
    • 仮想命令セットアーキテクチャまたはプログラミング言語
    • 直接書くよりは他の言語で書いてコンパイルする
  • 基本的なパフォーマンスを求めるところで使う.
  • はじめからJavaScriptの置き換えは意図していない.
  • 基本的には他の言語で書いてWASMにコンパイルする
    • まだまだ容量が大きく, ネットワーク負荷の点でJavaScriptに劣る
    • 容量問題(ネットワーク速度問題)が解決できる状況なら使える
  • 例: Figma: デスクトップでじっくり考えるような状況でしか使わない
    • Figmaは製品もさることながら技術的にもかなりエッジの尖った企業らしい
  • 技術に広く浅く触れてみる〜WASM編〜
    • C/C++で記述されたアプリケーションをWeb上に移植する
    • ロジック的な部分はWASMで全て実装し，UIといった部分はJavaScriptで実装する
  • https://ja.wikipedia.org/wiki/WebAssembly
    • 内部的には、wasmコンパイラシステムは中間コードを扱うためにS式を使用している。
    • 統合開発環境WebAssembly Studio - WebベースのWebAssembly向け開発環境。
    • C言語及びRustに対応している。

AI系¶

• 和ゴスロリ https://twitter.com/tkaz2009/status/1601355025254866944
  • AIに「和ゴスロリ」の衣装設定を考えさせてみた結果が、予想の斜め上を行く凄さで驚愕。
  • 細部までの描き込みが凄い上に、可愛い。
  • バリエーション大量に出させて、服装決めるにはAIってとてつもなく便利そう。
• https://twitter.com/Yamkaz/status/1601327530757136386
  • すごいのきた
  • DeepMindから演劇や映画の脚本を言語モデルで共同執筆できる作家さん用の新ツール「Dramatron」が公開！ https://deepmind.github.io/dramatron/index.html
  • 題名、キャラ、場所の説明、セリフを含む新しい脚本をインタラクティブに共同作成することができる
• ChatGPT
  • 「対話」に使うと面白い?
  • 人間がしない発想で回答してくる
  • ブレインストーミングとしてのAI対話みたいなのもあり?

セキュリティ¶

• 「パスキー」iPhoneが採用　パスワードレス普及期へ：日本経済新聞
• パスキーとは何か、そしてその課題

Androidセキュリティ¶

• 「マンガでわかる！Androidアプリのセキュリティ」
• アプリのセキュリティに関するおすすめの方法
• 『Androidアプリのセキュア設計・セキュアコーディングガイド』【2022年8月29日版】を公開しました
• Androidアプリケーションの脆弱性発生ポイントとその傾向

Androidテスト¶

• まとめ記事）Androidでテストをしたい【勉強編】
• テストの基礎
• アプリをテストする

Web・アプリ¶

• 【まとめ】エンジニア向けデザイン参考サイト
• デザイナーが一度は読むべきオススメのデザイン本6選【初心者必読！】
  • 『なるほどデザイン 〈目で見て楽しむ新しいデザインの本。〉』
  • 『デザイナーになる。 伝えるレイアウト・色・文字のいちばん大切な基本』
  • 『配色アイデア手帖 めくって見つける新しいデザインの本』
  • 『かわいい色の本 デザインと言葉の配色ブック』
  • 『けっきょく、よはく。 余白を活かしたデザインレイアウトの本』
  • 『タイポグラフィの基本ルール -プロに学ぶ、一生枯れない永久不滅テクニック』

2022-12までのメモ¶

Webデザイン¶

• 定点観察用: webcreatorbox
• Webデザインの教科書: 実際にやってみよう
• 良いデザインはどっち？ クイズを解くだけで、デザインの知識がどんどん身につく画期的なデザイン書 -クイズ de デザイン
• 商用利用無料、UIデザイン用のSVGアイコンが1000種類以上！ 改変・再配布も可の太っ腹ライセンス- MingCute Icon
• コピペで簡単、おしゃれ無料Webレイアウト25選（CSS Grid・Flexbox活用）
• Definsive CSS
• 【CSS】「これどうやる？」アップルやテスラのWebレイアウト再現テクニック集
• コピペで簡単、おしゃれ無料Webレイアウト25選（CSS Grid・Flexbox活用）
• コンバーター: css to styled components converter
• CSSでこんなことができるの知ってた？ 要素・コンテナのサイズに関係なく、ボーダーや背景をはみ出して配置するテクニック
• 【2022年最新】オススメのプログラミング学習サービス集
• 【上級編】企業サイトのコーディング練習
• 2022: ゲーム感覚でプログラミング学べるサービス集

WebDev¶

• Twitterでのハッシュタグ

  • つぶやきProcessing¶

  • つぶやきGLSL¶

• クリエイティブコーディングの教科書
• ゲーム感覚でプログラミング学べるサービス集
• 機械学習学習資料: 2022-08-05
• 【個人開発】DeepL×Google画像認識の和訳LINEアカウント「瞬間Deep和訳」をリリース！
• Local Storage
• Rails×Next.js×Auth0で認証機能をサックと開発する

2022-12-06 tue¶

• ReactのRefとRefForwardingを一気に学び直した
• 実践 Node.js Native ESM — Wantedlyでのアプリケーション移行事例
• 配色で困ったときに使えるWebツール
  • https://pulpxstyle.com/color-scheme-tool/
• Why your website should be under 14kB in size
• New Recipes for 3rd Party Cookies
• 2022年上半期、注目されたUIデザインのテクニックのまとめ
• 2019 CSSで簡単実装！震える＆歪み効果のあるグリッチエフェクトCSS 13選！タイトルや表紙に使える！【アニメーションCSS/テキストエフェクト】
• HTML&CSS コーディング・プラクティスブック
• 12 principles of UI/UX animation you should know
• 45分間で「ユーザー中心のものづくり」ができるまで詰め込む
  • UXデザインはじめの一歩 インタビュー技術を磨こう
• UIの名称まとめ
• これがユーザーの信頼を失うデザインだ！ 最近のUIで見かけるダークパターンのしっかりとした知識が身につくデザイン書 -ザ・ダークパターン
• インフォグラフィック
  • インフォグラフィックを勉強できる国内サイト。図解を学べることはもちろん、配色やグラフの見せ方など資料づくりにも学びの多いサイトです。
  • ■ INFOGRAPHIC.JP
  • ■ ZUNNY
  • ■ANA ♯Infographics
  • ■info-graphic.me
• :modal擬似クラスが全ての主要ブラウザでサポート
• 新しいCSSの書き方 最新テクニック20選まとめ実用サンプルコード付き
• ちょうどいいWebデザインギャラリー
  • ちょうどいいWebデザインギャラリー
• 格好いいホームページ
• https://twitter.com/OKU_MAYA/status/1570517840918347776, Google お絵描きツール
• ElmでVisual Study
• 誰も教えてくれなかったHTML tips集
  • imgタグにおける loading='lazy' 属性
  • 要素
  • HTMLだけの検索
  • 要素を使ってすべてのリンクを別ウインドウで開く
  • favicon強制再読み込み
  • download属性でファイルを開かずダウンロードさせる
  • HTML Tips
• オープンデータを管理するパッケージマネージャー
• Figmaの技術力
  • 日本では Figma って単にイケてるデザインツールの会社と思われてるかも知れないけど、実はウェブのコアの表示部分を C++ と WASM で作ってて技術的にとんがってて、普通のやり方だとブラウザ上では無理なレベルでパフォーマンスと省メモリを実現してるから競合の追従を許さなかったんだよね。
• Learn Accesibility
• わかりやすさとスタイル性
  • 【わかりやす0流行先取り 注目の最新Webデザインおすすめ30選まとめ](https://photoshopvip.net/140273)
• CSSの進化がすごい！ スタイルクエリの基礎知識と使い方を解説、親要素の「スタイル」に応じて子要素のスタイルを適用
• DXの一例
• デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
• 今すぐ使える最新CSSテクニックや書き方20選 サンプルコード付レシピ
• 都合の良いUIデザイン〜わがままで怠惰で理不尽なユーザーのニーズに応える10のポイント〜
• XSSを理解して安全なWebアプリケーションを作る
• 【WEBデザインの参考に】ミニマリストに大人気！洗練されたシンプルで美しいHTML5ウェブサイトテンプレート10選【フラットデザイン/サンプル】

2022-11-22 tue¶

• 近況: 12月からAndroidアプリを書く仕事が入ったため猛勉強中
  • 次回からはAndroidまたはKotlinの公式ドキュメントを読む会になるかもしれない
  • Androidのセキュリティも気になる
    • https://www.jssec.org/dl/android_securecoding_20220829/index.html
    • 2021年8月以降に Google Play ストアから配信する新規リリースのアプリケーションは targetSdkVersion の API Level を30(Android 11)以上にしなければならない
    • 2021年11月以降に既存アプリをバージョンアップする場合も targetSdkVersion を30以上にしなければならない
• Writing NES Emulator in Rustをやった
• 【deno】deno1.28「npm完全に理解した」
  • いろいろなモジュールの読み込み:
    • 順番が大事
    • 人力では不可能
    • 「コンパイラ」にやってもらおう
      • トランスパイラ
    • バンドラーの登場
      • Gulp
      • バンドラーもよりよいツールが必要
      • 複雑になってくると時間もかかるので高速化
      • webpack: Node.jsのライブラリ
    • トランスパイラ
      • ブラウザごとの互換性
      • ES5, ES6, ES2018, ES2020, ES2021
      • JavaScriptのバージョンが上がる
      • babel: Node.jsのライブラリ
    • Node.js自体が時代を切り開いてきた側面がある
    • 古くてよくないものも一杯残っている.
    • いまとなっては明らかによくない
    • Node.jsの努力のおかげで「こうするといい」とわかったのがいっぱい. それによる標準化もある
    • Node.jsは全部取り込めているわけではない
    • 昔の資産もあって, これとの整合性をどう保つか.
    • webpack・babelはJavaScript製: 遅い
    • 歴史的な事情, 技術的な負債もたくさんある.
    • あと知恵: 設計もよくない
  • Deno: Node.jsの開発者がリード
    • Rust製: 高速化をきちんと意識
    • webpackなどは設定が面倒
      • Node.jsはバンドルやトランスパイラの面倒をみない
      • いまとなっては処理系で対応した方がいい
      • Denoはこれらを同梱, パフォーマンスも処理系で確保
    • リンター(linter)
      • C言語: 行儀が悪いコード, バグを生みやすいコードを検出して書き換えろというワーニングを出してくれるツール
      • JavaScriptもよくない部分がいっぱいあって, それを使わないようにしよう
      • 実際にチェッカーを作ろう -> jslint
      • もっと使いやすいツールがほしい: 実際いろいろある
      • eslint: golang製, node.jsのデファクトスタンダード
      • eslintも楽になったとはいえ, いろいろ設定が必要でめんどい
        • いろいろな人の趣味がある
        • 紛糾する: 「宗教戦争」
      • これを処理系で面倒をみよう
      • denoでは同梱: 処理系で決め打ちで諦めろ
      • golang: gofmt(フォーマッター)
        • インデントは4スペースか2スペース, スペースかタブか
        • 何でもいいが, 何か決めないとコードがグチャグチャで読みにくい
        • 誰がどう決めるか?
        • これを言語処理系が決めてしまおう, 無用な紛争をなくそう
        • Denoはこれを決める方向に持っていった
    • Denoはフォーマッターもある
      • 文字列をシングルクォートにするか, ダブルクオートにするか
      • こういうのもどちらでもいいが, どちらかにしないと気持ち悪い
      • node.js, prettier
        • prettierも多少設定が必要
• 静的Webサイトでも設置できるフォームをノーコードで作成、管理できるOSS・「formify」
  • 結局別途稼働している別サービスにいろいろな処理を委任している
• CSSで簡単に実装できるクールなアニメーションドロワーメニュー10選【上下左右・階層・スライドメニュー・ハンバーガーメニュー】
• おまけ
  • スマホアプリ開発の言語: AndroidはKotlin, iOSはSwift
  • Android/iOS両方同時に開発できる言語・フレームワークもある
    • Flutter: Dart言語による, 同時にWeb開発もできる
    • React Native: JavaScript/TypeScriptで開発できる
    • .NET MAUI: Xamarinの新バージョン, C#
  • Flutterなどは9割程度はコードを共通化できるらしいが, OSネイティブの低いレイヤー部分はOSごとに書かないといけない部分がある模様
  • はじめからどちらかのスマホ対応しか考えない, または相当深いレベルの実装が必要なことがわかっている場合は, それぞれKotlin/Swiftで別に実装することもよくあるらしい

2022-11-08 tue¶

• NovelAIのプロンプトを管理・調整するChrome拡張を作りました
  • https://qiita.com/hassoubeat/items/1750ed03dcae82630396
• リンク先忘れ: pixivあたりでAI絵販売
  • 例えばこれ: エロ同人CG販売サイトでAIアートが販売 10/12追記
  • 呪文学習でやはり一手間いるから, その労力・時間をお金で解決する.
  • 凝ったモノならどうしても手書きだがお手軽に・大量に, となると一定のアドバンテージがある.
  • いわゆる先行者利益の部分もある模様.
  • 数ヶ月さえ持たないかもしれないが, それでも瞬間最大風速としてはビジネスになった.
• Stable Diffusionを使って「いらすとや風画像生成モデル」を作った話
  • 「ところで、いらすとやさんのようなイラストレーターがこういった機械学習技術を活用して作画を効率化することはもはや可能な域に達してしまったかもしれませんね。」
  • この間のspins cre@ationでのやりとり
    • https://spinscreation.slack.com/archives/CTC7PD3PH/p1666089251488249
    • 僕だったらイラレでこういうパーツ組み合わせて作ります^^
    • このパーツを自分で生成する, もしくは依頼主が生成してきたパーツをうまく組み合わせるとか?
  • 多少絵を描けて修正できる人の片手間仕事になるか?
• Vercel、Webpack後継を目指す、Rustベースの「Turbopack」をリリース
  • 高速化はどこでも大事
  • マーケティングでもスピーディかつ大量の試行錯誤が大事と良く言われる
  • 学校の勉強でもそう
    • Twitterで塾講師の人が言っていた
    • 計算が速いとたくさん問題が解けてたくさん試行錯誤できる
    • 計算ミスにしてもどんな問題でどういうミスをしたか考える時間の余裕が生まれる
    • 計算も正確になり, それに合わせて速くもなっていく
  • 数値計算: スパコンで何日もかかるような計算での10倍高速化のインパクトは凄まじい
• CSRF対策

2022-10-25 tue¶

• 最近「フロントエンド」っぽい話をあまりしていない
  • ふだん話さない話をしていて楽しいので自分は気にしていないがどうなのかと思わないでもない.
  • 何かオープンソースのライブラリのプログラムでも読むか?
  • よさげなサイトのCSS眺めるとか?
• UIからの解決
  • また凄いのがこれ操作するのが今でいう液晶タブレット＆ペンなのね。当時の常識だと「これは画面を触るライトペン的な？画像もリアルタイムで拡大とか回転させて透過させるの？」と。当時のパソコン少年の視点だとこれは非常識な夢物語でしたよ。でもアプローチがUIからの方が未来の正解が見えるんだね
  • https://twitter.com/hisaketM/status/1584421773780877312
    • いずれは大抵の技術的制約は解決するので、技術的詳細を無視して最適なUIを考えれば自然それがガジェットの未来予測になるというのは確かにそうなんだよね
• NovelAI Diffusionの研究書「元素法典」有志が日本語化　画像生成呪文の極意
  • コメント
    • 法典系の異様なほど長いプロンプトは、AIを道具として見た際、AIの能力がまだまだ低いことを示唆している。
    • なるべくシンプルな描写プロンプトを入れるだけで、できる限り余計なタグを入れずともいい絵を生み出したいのよ。
    • ただ、少しそのヒントは見えてきたと思う。
    • 重要なのは、より本質的で細部を描写する指示を書くことと、必要な場合は状況に整合する付帯情報を明記してやること。
    • セフィロスは水中に沈めてクロールと水を蹴ることの指示だけで、泳げと言わずとも泳ぎだしたし（質の調整はもう少し必要だったけど）、散らかった部屋の少女は、messyな条件や座り方を指示するだけで、一気にそれっぽくなった。ラーメンの口は、人間が描いた絵を元に表情指定するだけで解決した。ウルトラファインチューニングには法典系長文プロンプトが必要でも、エッセンシャルな絵はシンプルなプロンプトで描ける。
    • クリーンプロンプティングを目指そう。
    • 分量が減らせるので、必要であれば使えるタグの数を増やせる。
    • 何より呪文が見る気が失せるほど長いことを避けられる。
    • プログラミングと同じ。
    • 本質的にシンプルに出来るなら、呪文は複雑に描くべきではない。
    • そして、簡単なプロンプトが使えることは、AIの道具性を高めることでもある。
• 画像生成AI
  • 触って感じたAIの強みは「全然関係のない別々の概念を合成できる」ということで、これによって「潜在的に存在した誰も見たことない表現」を生み出せる点だと思う。
  • これは卓越した芸術家が新しい表現を開拓するときに使う手法そのもので、コンピューターで超スピードに試せてしまうのはスゴイ。
  • これは楽しい
  • 所感
    • (数値)計算系でも何かを探索するときに高速かつ正確に試行錯誤するための道具としてのプログラミングの意義を感じたことがある.
    • 高速の試行錯誤のためのプログラミングとその応用と言えば理工系のプログラミング応用としては中心的な課題でさえある
• 平野耕太ツイート
  • AI君は、今日はお前を完全な補正機・補助機として教育する。俺が描いたものをAIがおかしな所を補正して出力し、AIのなんか違うなという所を俺が書き直し、補正し、書き加え、補正する。人間の嗜好をAIが監視し、AIの思考を人間が監視する。
• 新聞デザイナーの講演
  • How to save news papers
• dalle2, outpaiting
• 資料作成のFigma移行
  • 7月から資料作成をFigma移行してから喜びしかない。
  • Nue incは資料制作の全てをFigmaでやるようになった。メリットは添付。
  • 人によってバラける資料のクオリティ減ったし、過去レイアウトの引用もスムーズ。何よりバージョンごとに書き出していた無限pdfからの脱出が可能になった。まじおすすめ。
• CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック

2022-10-11 tue¶

• jQueryの:has()と擬似クラスの:has()
  • Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でウェブサイトが壊れる可能性 (Publickey)
• Core Web Vitals
• 日本語からのプログラム生成
  • 日本語からAIが自動的にプログラムを書いてくれるサービス「AI Programmer」を公開した
  • https://aiprogrammer.hashlab.jp
  • 対応言語: #Python #SQL #javascript #html #cpp
• 3D生成AI
  • 名前は「DreamFusion」。作者は匿名。
  • https://dreamfusionpaper.github.io
• NovelAI
  • マジで革命的だわ…
  • 全てNovel AIという最新の画像生成AIで生成したイラストなんだけど、キャラや背景、モンスターやイケメンに至るまで、あらゆる指示に対応できる上に全てクオリティが高い…今日から世界中の人間全員が「神絵師」になったという事なんだろうな

  • NovelAI¶

  • https://www.noble.ai/
  • サンプル
• AI作画の恐ろしさ
  • 個人的にAI作画の一番恐ろしいところはAIの存在ではなく「非常に安価に大量の絵が指示通りに作れる」ということ。
  • 絵描きとしては理想の絵に近づこうと励むが、最大の障害は「感性」「才能」ではなく「時間」。
  • 良い絵を早く描けること自体がすごい事であり商売上非常に重要。
  • そこを突いてくるのがキツイ
• テキストからの動画生成
  • 【未実行】
  • テキストから動画を生成するAI「Phenaki」が公開。
  • こちらは一連のテキスト、ストーリーを入力すると最大数分の長さの動画生成が可能。
  • すご...AIによる映画, アニメ, CM制作も現実になりそう..
  • https://phenaki.video
• ネット上での画像収集
  • 【未実行】
  • pythonのicrawler
  • 4行で画像が100枚さっと収集できる模様
  • PILで画像加工できる
• いいなと思う UI はユーザの行動を承認している
  • ゴミUIの例: 退会しづらいサブスク
  • 「あの会社は本当に腐っている」という評判が立ってしまう
• UI
  • このサイト知ってる人も多いだろうけど、BAD UIの最たるものが詰め込まれてて面白い。実際に体験するといかに使いやすいUIが大事かを実感できる。私は最後まで辿り着けなかった…笑
  • https://userinyerface.com

2022-09-27 tue¶

• 技術書典でいくつか本を買った
  • FireStarter.Testable_Firebase-ebook-testable-firebase.pdf
  • シーホーちゃんとゆかいな仲間たち.Firebase_Authenticationなら多分これが一番早いと思います_ebook.pdf
  • りあクト！Firebaseで始めるサーバーレスReact開発riakuto-firebase-210214.pdf
  • りあクト！TypeScriptで始めるつらくないReact開発-第4版【①言語・環境編】riakuto4pt1-220908.pdf
  • りあクト！TypeScriptで始めるつらくないReact開発-第4版【②React基礎編】riakuto4pt2-220908.pdf
  • りあクト！TypeScriptで始めるつらくないReact開発-第4版【③React応用編】riakuto4pt3-220908.pdf
  • FirebaseやReactに興味ある人, どのくらいいる? 何かやる?
    • denoやらBunやら
• アニメーションのプログラミングネタを拾おう
  • GSAP入門?
  • processingを眺めよう
  • NextとReactでp5jsを使ってみる
• ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた
• 現代のフロントエンド事情
• 新技術が業界を潰す事案
  • これに似た話ではDTP(Desktop Publishing)とCTP(Computer To Plate)という技術の登場・普及によって数年で産業丸ごと消滅した写植という業種があって…本物のディスラプションってマジでヤバいんですよ。
  • 写植全盛期の文字盤(DTPでいうフォント)で最大勢力を誇った写研は、DTPのトップランナーであるAdobeへのフォント提供を突っぱね、当時二番手のモリサワはその話に乗った。その結果、今やモリサワは圧倒的なフォントベンダーへ、写研は滅亡へ。イラストレーターにもそういう選択が求められるのかもね。
  • https://twitter.com/VoQn/status/1564783941651144704
    • 前も書いたけど、AIに仕事とられるんじゃなくて寧ろAI駆使しながらレタッチが出来る腕前が元々ある描き手が更に超画力を身に着けてく展開にしばらくは続くと予想してるんですよね。そういう意味では『格差が広がる』
    • ↑の予想通りというか、それ描いた3週間後にこんなデモが出ているし

2022-08-30 tue¶

• mimic閉鎖
• 「リアルタイムグラフィックスの数学」
  • https://gihyo.jp/book/2022/978-4-297-13034-3
  • グラフィックスやアニメーションの数学的なやつ何かやる?
  • 「数学から創るジェネラティブアート―Processingで学ぶかたちのデザイン」は持っている
  • 他には「『問題解決のための「アルゴリズム×数学」が基礎からしっかり身につく本』」とか?
  • 面白そうなプチネタがあればちょこちょこ拾おう
• stable diffusionをGoogle Colab上で実行
  • 記事は長いもののプログラムは全部で20行程度
  • 簡単に試せる
  • LINE bot
  • Twitter
    • イラスト業界へのAI到来は手作業の工芸品の領域に工業化の波が押し寄せてきたという事なんだよな。そこまで分かっていれば次はどうするべきか見えてくる
• レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説
• CSSだけで作れる！背景パターンや模様のサンプルコードまとめ
• Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴や使い方など
  • AEのアニメーションを使っている
  • lottiefiles
• CSS filterの使い方：画像にフィルタを追加して表現の幅を広げよう
• MUUUUU.ORG: サイト集
• 最近見かけた、CSSの一工夫加えたスゴ技テクニックのまとめ
• ExcelAPI

2022-08-16 tue¶

絵画史から見るとAI絵画はカメラ¶

• ツイートURL
• Midjourneyで話題のAI絵画は歴史的には要するにカメラである

AI絵画が絵画という世界になぜショックを与えているのかというと、とにかくこれまで絵画では必須であった画材やテクニックも（アナログでもデジタルでもそこは同じ）が一切不要である点です。 AIにこんなことをされてしまっては、これまでつちかってきたテクニックが無駄になる、それを身につけるためにやってきた努力とはなんだったのか、絵描きの職業が奪われてしまうという嘆きの声がたくさん出てくるのもむべなるかなといったところです。 ただ、絵画の歴史的に考えると、これとほぼ同じことは過去にもありました。それはカメラ（と写真）の登場でした。

画像を生成するところの細かいところを端折って、最終的な完成品ができ上がるまでの手順を整理してみると、カメラとAI絵画というのは、ほぼ同じであることが分かります。 - カメラ - パラメーターが存在する - 機械が処理をする - 試行錯誤する - どれを表に出すか人が選ぶ - AI絵画 - パラメーターが存在する - AIが処理をする - 試行錯誤する - どれを表に出すか人が選ぶ

ノーコードは普通に使われると思うけどね。midjourneyは誰の記事だったかいらすとやとか素材集みたいなものって解説はすごく納得した。

APP FUEL¶

• URL
• アプリ開発のヒントになりそうなサイト
• https://theappfuel.com
• 他社のオンボーディング事例、検索機能、有料プランへアップグレード、友達招待など、機能別で色々なUIがまとまってる

Webサイトを作る際に超参考になったデザインのサイトまとめ¶

• Qiita
• 見よう
  • CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ
    • CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状
    • grid, flexbox, vh, vw, calc, clamp, min, max, aspect-ratioなどのCSSがある現在、メディアクエリに頼る必要はありません
  • 実は知られていない、人の心理を考慮した料金表のデザイン
    • CTA: Call To Action
  • いくつ知ってる？HTML/CSSの便利な小技・テクニックまとめ
    • いまはJavaScriptを書かなくてもCSSでいろいろできる
• Parts
• 動くWebデザイン アイディア帳
  • jQueryなので微妙
  • 既に世にあるアニメーションを知る上では良さそう
  • Reactの代替ライブラリも基本は揃っているはず
• アニメーションで魅せる！CSSボタンデザインのサンプルコードまとめ

2022-08-02 tue¶

自己紹介 - 関根良紹 - Webエンジニア, バックエンド - フロントエンドはじめることになった

はじめに¶

• PWA・LIFFアプリ・LINEミニアプリの比較
• MidJourney https://twitter.com/8co28/status/1553611630252277760
  • 「クリエイティブ系は『正義』がなく怒られが発生しないからGoogleなども遊びやすいのでは」
• Web Design in 4 minutes https://gigazine.net/news/20161004-web-design-in-4-minutes/
  • 本サイト https://jgthms.com/web-design-in-4-minutes/
• 2022年のモダンCSS改
  • PDF
• 時間が余ったらmy-diary.orgのメモから適当に引っ張ろう

PWA・LIFF・LINEミニアプリの比較¶

概要¶

• PWA(Progressive Web Application)
  • アイコン用の画像と設定ファイルを2-3個追加するだけで作れる
  • 気分としては簡易アプリ作成
  • オフライン利用のためにHTML・CSS・JSをローカル保存(?)
  • 通知もできる
• LIFFアプリ(LINE Frontend Framework)
  • LINEの認証が使える
  • LINEからユーザーのデータが取れる
  • 単なるHTML・CSS・JS
  • LINEのAPIと連携すればLINE Payによる決済もある
• LINEミニアプリ
  • LINE内のアプリとして登録できる: 楽天とモールの例え
  • 決済などの強い機能と連携しやすくなる
• PWAとLIFFアプリ・LINEミニアプリは共存できる
  • どちらもWebアプリが基礎
  • 設定ファイルを追加したりAPI連携したりするだけ

PWA¶

https://www.seohacks.net/blog/2809/¶

概要¶

• 三行(四行)で
  • モバイル向けサイトをスマホアプリのように使えるようにする
    • ネイティブアプリのようにスマートフォンのホーム画面に導線を置ける
  • ユーザーエンゲージメント向上やUX改善の効果に期待
  • アプリストア経由で新規ユーザーに接触できない
  • 手間がかかるわけでもないので組み込んで損はない
• オフライン利用・プッシュ通知対応のブラウザAPI(Service Worker)を使っているWebサイト
  • 実際「インストール」できる
    • 例: https://vocmem.vercel.app (そのうち移行するがいまはまだ触れる)
  • キャッシュ利用
  • URLバーがなくフルスクリーン

メリット¶

• 開発側
  • アプリの審査がない: ただのWebアプリ
  • OSごとの対応不要
  • 標準Web技術で十分
  • 本体はふつうのWebサイト: 検索からの流入あり
• ユーザー側
  • 容量が少ない
  • 表示が速い
  • オフライン対応

デメリット¶

• ネイティブアプリの豊富な機能は使えない・使いにくい
  • 最近はカメラアクセスなどもできるようになったそうだが
  • ネイティブ特有の機能を使わないなら関係ない
• アプリストア経由で新規ユーザーに接触出来ない
• iOS対応が弱い(iOS自体のPWA対応が遅い)
• プッシュ通知できない(2022秋に対応予定?)
• インストールに一手間必要
  • 確かiOSだとSafariからメニューを開いて「ホーム画面に追加」させないといけない

まとめ¶

• 対応に対するコストはほぼ0
• やっておいて損はない
• インストールさせようと思うと一手間いるが, スマホのホーム画面に置ける強さがある
• SEO上の効果はどう(?)調べておこう
• 通知が使えないとしてもメルマガやLINEなど別の手段で連絡すればよい

LIFFアプリ¶

• LIFF: LINE Front-end Framework
• LIFFで作られたWebアプリをLIFFアプリと呼ぶ
  • LINEミニアプリはLIFFアプリの機能強化版
• 誰でも開発できる: LINEミニアプリはリリース時にLINE社の審査が必要
• LIFFアプリはLINEログインやチャットでのテキスト送信が主な機能
  • LINEPayAPIと連携すれば決済もできる
  • LINEミニアプリは予約・通知・決済などいろいろな機能がLINEの仕組みとして簡単に使える
• LINEと簡単に連携できて, WebブラウザはもちろんのことLINE上でも動くアプリが作れる仕組み
• 簡易版LINEミニアプリ
  • 決済などのクリティカルな機能は使えない
  • LINEの認証は使える
  • (確か)メールアドレスも取れる
    • ただしサーバー側実装が必要

LINEミニアプリ¶

• 用語
  • スーパーアプリ: LINEやPayPay
  • ミニアプリ: LINEやPayPay内部にあるサードパーティ製のアプリ
  • 楽天をウェブ上のモールとみなす気分
• 参考

ミニアプリの始まりは、WeChatのミニプログラムと言われます。 中国で圧倒的な人気で10億以上のアカウントを持つといわれるWeChatを運営するテンセントは、いち早くこのアプリ市場の流れを先読みし、2018年のはじめに、WeChatのアプリ内のアプリをミニプログラムとして提供し始めました。 これにより、WeChatのユーザーは、WeChat内での買い物や予約、友だち間の送金やゲームなど、他のアプリをダウンロードすることなく企業のサービスを利用できるようになりました。

ミニアプリのメリット¶

• 最初に図を見よう: 参考
• 実店舗との連携が一つのキモらしい: 予約や通知
• 気軽に使える
  • 個別にアプリをインストールする必要なし
  • LINEやPayPayのようにユーザーが日常的に使っているアプリ上で起動する
  • ユーザーは用途別にアプリを起動しなくてよい
  • ユーザ情報・クレジットカード情報を個別に入力する必要もない
• 気軽に開発できる
  • Web標準のスキルセットであるHTML/CSS/JavaScriptで開発できる
  • AppStore・GooglePlayなどのアプリケーションストアを通さなくてもよい
    • 現状ではLINE社の審査はある
    • うまく作れば(メインのGUIは据え置き, データはWebのDBアクセス)UIの変更がない限り再審査不要
  • ユーザの利用頻度の高いアプリから提供できる
  • ユーザ認証を0から実装せずにスーパーアプリでの認証情報を使える
  • Webアプリ: Web系開発者にとってはネイティブアプリの開発知識なしで開発できる
    • ネイティブアプリと違ってKotlin・Swiftなどを覚えなくてよい
  • インストールさせる手間もない
  • LINEとの連携がよい: LINEを主な連絡手段にしているならLINEから出ずにいろいろできる

ミニアプリのデメリット¶

• LINEの審査が必要
• ネイティブアプリ・インストールしたPWAと違ってホーム画面に出せない