コンテンツにスキップ

SPINS CRE@TION勉強会

TODO

  • オブジェクト指向UI
  • https://ui-pocket.com/apps/

2024-05-28 tue

2024-05-21 tue

  • お休み

2024-05-14 tue

  • 生成AI

2024-05-07 tue

  • お休み

2024-04-30 tue

  • 情報I: 資料のページ
    • 今回: P.19「(3)情報の可視化と新たな情報の創出」からP.39まで
    • 次回: P.40, 学習4, 情報社会におけるコミュニケーションのメリット・デメリットから

2024-04-23 tue

  • お休み

2024-04-16 tue

  • 生成AI

2024-04-09 tue

2024-04-02 tue

  • 生成AI

2024-03-05 tue

  • 生成AI

2024-02-27 tue

  • お休み

2024-02-20 tue

  • お休み

2024-02-13 tue

  • web, ノンデザイナーズデザインブック
    • 今回: P.120からP.130まで
    • 次回: P.131から

2024-02-06 tue

  • AI

2024-01-09 tue

  • web, ノンデザイナーズデザインブック
    • P.109からP.119まで
    • 次回: P.120から

2023-12-26 tue

  • AI画像生成系

2023-12-05 tue

  • web, ノンデザイナーズデザインブック
    • P.102からP.108
    • 次回: P.109から

2023-11-28 tue

  • お休み

2023-11-21 tue

  • AI画像生成系

2023-11-14 tue

  • お休み

2023-11-07 tue

  • お休み

2023-10-31 tue

  • web, ノンデザイナーズデザインブック
    • P.93-P.100
    • 次回: P.102から

2023-10-24 tue

  • お休み

2023-10-17 tue

  • お休み

2023-10-10 tue

  • web
    • P.81, Part3からP.92まで
    • 次回: P.93から

2023-10-03 tue

  • AI画像生成系
  • 次回: web

2023-09-26 tue

  • お休み

2023-09-19 tue

  • お休み

2023-09-12 tue

  • お休み

2023-09-05 tue

  • ノンデザイナーズ・デザインブック
    • P.65からP.80まで
    • 次: P.81, Part3から
    • オブジェクト指向UI
  • 次回: AI画像生成系

2023-08-29 tue

2023-08-22 tue

  • ノンデザイナーズ・デザインブック
    • Part2からP.64まで
    • 次回P.65から

2023-08-15 tue

  • お休み

2023-08-08 tue

  • AI画像生成系の話

2023-07-18 tue

  • ノンデザイナーズ・デザインブックの25周年記念のPDFを読もう
    • P.44まで
    • 次はPart2から

2023-06-13 tue

Web・アプリ

  • ノンデザイナーズ・デザインブックの25周年記念のPDFを読もう
    • P.32まで
    • 次回は復習をかねてP.32から

2023-06-06 tue

  • 都合によりお休み

2023-05-30 tue

AI系

  • 実際に何かで遊んでみよう

Web・アプリ

2023-05-23 tue

AI系

  • 実際に何かで遊んでみよう
  • 仕事絡みの毎日の検索は基本的にChatGPT, phind.comになった
    • https://www.perplexity.ai/ も使ってみる予定
    • 間違っていることはあれど, 本当にピンポイントで答えが返ってくる
  • GitHub Copilotも便利

Web・アプリ

  • ノンデザイナーズ・デザインブックの25周年記念のPDFを読もう
    • P.20まで
    • 次回はP.21から

2023-05-09 tue

AI系

Web・アプリ

2023-04-11 tue

AI系

トーク

ChatGPT関係: 自然言語プログラミングそのままできる(ことがある). セルフコーチング応用もある. 問を一覧で作って, それを引用して順に聞くとか. シミュレーションゲームっぽくヒアリングするとか, 書いてみるとか. 実際にコードに落としてアプリにするとか, ChatGPT自体にいろいろやってもらうとか. マインドマップで形式を指定できる. PlantUML形式でいい感じにマインドマップを作ってくれる. プラグインもいろいろある.

動画の切り抜きだとか. 映像方面での応用を模索したい. AEだけでブライダルの写真を読み込んで選択的に動画を作る. AE内のJSでやっていた: ChatGPTにやらせてみてどうなるだろう? Premiere ProでもJSが使えるが情報があまり公開されていない. AEはエクスプレッション関係で情報が多い. 作業ベースの仕事は削ってまさしくクリエイティブな取り組みに集中したい. AEのテンプレート, 便利プラグインあたりはいろいろやれそう.

画像生成もプロンプトエンジニアリング.

LP制作の面倒な作業や, フローで決まりきった作業は自動化したい. そこにうまくはまらないか? マーケティングは機械的にできる部分は多かろう. 精度をどこまであげるか? LPの文章を作ってもらうのはもうあるにはあるが, いまの時点でターゲットに刺さるものができるか? 実務ではまだもう一歩人力が必要ではないか. LPを作る前のマインドマップを作るときにChatGPTといろいろやっている人はいる.

コンテンツを生成してもらう発想はわかるが, なかなか狙い通りにならない. 絵でまさにそう. 指示が難しい. アニメの背景で実験している会社もあるが, 視線誘導など絵・季節感・雲の状態がおかしい. それっぽいが, 専門家からすると「それはない」というのばかり. マーケッターでTwitter botを作ってもらった人がいた. 作業ベースか選択肢をいろいろ提示してもらうくらいか.

自然言語でプログラミング. そもそもプログラミングで何ができるかわかっていないと, 自然言語でプログラミングしようにも, プログラミング自体がうまくいかない. 小さなところから作っていくとか, 設計の手順とか.

2023-03-28 tue

  • お休み

2023-03-14 tue

AI系

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

Web・アプリ

2023-02-28 tue

Web制作

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

AI系

Web・アプリ

2023-02-14 tue

AI系

Web・アプリ

2023-01-17 tue

.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対話みたいなのもあり?

セキュリティ

Androidセキュリティ

Androidテスト

Web・アプリ

2022-12までのメモ

Webデザイン

WebDev

2022-12-06 tue

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拡張を作りました
  • リンク先忘れ: 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
  • 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やら
  • アニメーションのプログラミングネタを拾おう
  • ウェブ制作で 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

2022-08-16 tue

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

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

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

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

APP FUEL

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

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

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改
  • 時間が余ったら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と違ってホーム画面に出せない