TORICOでは、毎月1回のペースで開発者による技術勉強会を行っています。
2024年に行った勉強会の内容を書きます。
2024-01-12
SMTPを手で打ってターミナルからメールを送信する
openssl を使い、SMTP を入力してメールを送信する演習を行いました。
$ openssl s_client -connect mail.example.com:587 -starttls smtp -quiet
EHLO torico
AUTH PLAIN ****....
MAIL FROM: me@example.com
RCPT TO: you@example.com
DATA
Subject: This is subject of test mail.
From: me@example.com
Hello, world. This is test mail.
The quick brown fox jumps over the lazy dogs.
.HTML マルチパートメール
$ openssl s_client -connect mail.example.com:587 -starttls smtp -quiet
EHLO torico
AUTH PLAIN ****....
MAIL FROM: me@example.com
RCPT TO: you@example.com
DATA
Subject: This is multipart mail test.
From: me@example.com
Content-Type: multipart/alternative; boundary="==my-awesome-boundary=="
--==my-awesome-boundary==
Content-Type: text/plain; charset=utf-8
Hello, World! I am spam.
--==my-awesome-boundary==
Content-Type: text/html; charset=utf-8
<h1>Hello,World!</h1>
<pre>I am eggs.</pre>
<img src="https://www.mangazenkan.com/user_data/packages/mangazenkan/img/mz-char/200/mz-char-200-z-03.png">
--==my-awesome-boundary==--
.画像添付
$ openssl s_client -connect mail.example.com:587 -starttls smtp -quiet
EHLO torico
AUTH PLAIN ****....
MAIL FROM: me@example.com
RCPT TO: you@example.com
DATA
Subject: This is mixed mail test.
From: me@example.com
Content-Type: multipart/mixed; boundary="==my-awesome-boundary=="
--==my-awesome-boundary==
Content-Type: text/plain; charset=utf-8
Hello, World! I am spam.
--==my-awesome-boundary==
Content-Type: image/png
Content-Disposition: attachment; filename="good-image.png"
Content-Transfer-Encoding: base64
BASE64化した画像データ...
--==my-awesome-boundary==--
.その他、MIME エンコードに関する説明など。
デスクトップ社内ツールの変遷
特定の社内業務に使う、自社Windowsデスクトップアプリのフレームワークの変化と開発体験を紹介しました。
C# 2016〜
↓
Python + TK 2017〜
↓
Electron(ボツ)
↓
Flutter 2021〜
↓
tauri 2024〜2024-02-09
自社 AWS コスト削減大会
自社のAWS コスト削減のために、開発者全員で検討会をしました。
- 余剰リソースの洗い出し
- 開発リソースの自動停止
- Graivon コアに変える?
- セービングプラン・リザーブドインスタンスの適正購入量
- Cloudfrontでオブジェクトを自動的に圧縮をYesにする。圧縮アルゴリズムをGzipではなくBrotliがおすすめ
- コスト把握のためにタグ名は絶対につける。
マイコンのすすめ
RP2040 もしくはESP32 + CircuitPython が敷居が低く開発しやすいためおすすめ。
おすすめ機種
無線が不要なら Waveshare RP2040-Zero
無線を使うなら Seeed Studio XIAO ESP32C3
2024-03-08
CSS Flex の演習
内容は、TORICO Tech Blog に記載しています。
CSS のフレックス(display: flex) でサイトをレイアウトするトレーニング
- 演習の内容
- CSSフレームワーク
- そのほかのレイアウト方法との比較
- グリッドとの比較
- フレックスのレイアウトの基本的な考え方
- 演習
2024-04-12
TORICO の資産棚卸しについて
そもそも棚卸しとは
決算前に販売目的の資産（流動資産）が現在どれくらいあるのか集計する業務。 正確な事業利益を算出するために行う。
資産として集計する対象は
- 販売するために保有する商品（本、グッズ、CD、トレカなど）
- 販売目的の製品を生産するための原材料（グッズ、有償特典の素材）
- 販売活動で使用する消耗品（梱包する箱、テープ、レジ袋、無償特典）
前期の棚卸し内容の解説
- TORICOで扱っているSKU量と在庫点数の説明
- 集計方法の説明
棚卸し実施日までに開発部門で行うこと
- 物流部門で行う業務内容の把握
- 複数部門での業務分担内容の把握
- 現状の論理在庫データのロケーションの把握
- 資産の区分の把握 など
棚卸し当日に行うこと
- 自社開発の棚卸しツールで行う処理内容の把握
- 集計結果の出力方法
- ありがちなトラブルに対する対処方法
まとめ
- 精緻な資産管理は財務や統制上、重要度が高い。
- コミュニケーションが大切。
2024-05-10
開発に関わる経理知識
PL (損益計算書) の見方
決算短信の見方
本社移転に伴う特別損失の計上及び連結業績予想の修正に関するお知らせ
アプリのフレームワーク・依存性のアップデートについて
現在のアプリの採用バージョンについて
使っているバージョンを EOL の把握
きちんとメンテされているバージョンを使っていますか?
EOL を過ぎると
- 脆弱性があったときの対処が大変になる。
- 他のパッケージを使うときに苦労。(サポート終了バージョンには普通対応しない)
依存性アップデートの手順
- コードの修正
- パッケージマネージャーの更新
新たに追加された機能
2024-06-14
TipTap tutorial
内容は、Github で公開しています。
- TipTap
- TipTapの解説
- ハンズオン
- ディレクトリの作成
- プロジェクトの作成
- radix-ui/themes のインストール
- css を追加する
- 実行する
- tiptap のインストール
- tiptap を埋め込む
- ブラウザで確認する
- プレビューできるようにする
- getHTML() で取得した内容をHTMLのタグを反映してプレビューする
- HTMLを装飾する機能を実装する
- Toolbar.tsx を作成する
- Toolbar.tsx を実装する
- CustomEditor.tsx に Toolbar を埋め込む
- 引用とコードブロックを追加する
2024-07-12
アプリの機械テスト方法
社内での機械テストの方法
- playwright
- puppetter
- selenium grid
Cross-Request State Pollution のバッドパターンの解説
Python で並列セッションで同時操作するコードを書く
requests, aiohttp, robobrowser などでボットスクリプトを書いて、concurrent.futures で並列化すれば良い。
(追記: aiohttp より httpx が良い)
Python の スレッド並列とプロセス並列の処理コードの雛形
Djangoのユニットテストで複数のモックを同時に扱う時は ExitStack でまとめると良い
2024-08-09
Google Apps Script の活用事例
内容は、Github で公開しています。
- Google Apps Script
- 利用例
- 週次ミーティングの資料のバックアップ
- URLからQRコードの画像を複数枚発行する
- AppStore のレビューをクロールしてSlackに送信する
- Apps Scriptを使う理由
- 利用例
- コンソール上からプログラムを実装する
- プロジェクトを作成する
- プログラムを書いてみる
- 実行する
- メールの下書き一括作成ツールを作成する
- スプレッドシートを新しく作る
- 下書きを作成するための元データを作成する
- Apps Script を繋ぎこむ
- 下書きを作成するプログラムを書く
- スプレッドシート読み込みの処理を追加する
- スプレッドシートからデータを取得してメールの下書きを作成する
- 全体のコード
- 外部のAPIを利用してみる
- TypeScrip を使用して、Apps Script を作成する
- Google Apps 以外のサービスを使用する
漫画全巻ドットコム 電子書籍の配信データの生成フローの解説
2024-09-13
django-channels を使って遠隔同時操作できるお絵描きアプリを作る
内容は Github で公開しています。
torico-tokyo/django-channels-tutorial
- プロジェクトフォルダの作成
- Pipfile
- エディターのセットアップ
- ASGI (daphne) に切り替える
- Webインターフェイスの作成
- Channels の組み込み
DuckDB と触れ合ってみよう
内容は Github で公開しています。
- Duckdbとは？？
- DuckDBのインストール
- クライアントAPI
- Python の使用例
- DuckDB-Wasm
- 外部ファイルの読み込み
- CSVファイルの読み込み
- JSONファイルの読み込み
- 複数の外部ファイルを読み込む
- downloadsにある複数のファイルを読み込む
- 羅列した複数のファイルを読み込む
- Extension
- 使い方
- ファイルを使ってSQLを書いてみる
- 実際にSQLを書いてみる
- python での使い方
- どういう使い方をしているのか
2024-10-07
ベクトルDB Weaviate を使って RAG する
内容は、TORICO Tech Blog で公開しています。
Weaviate をローカルDockerで起動して、手軽に RAG するチュートリアル
- ベクトルDBとは
- Weaviate とは
- プロジェクトフォルダの作成
- 環境構築
- ベクトル化を体感する
- Docker 起動スクリプトの作成
- (参考例) Text To Vecotr モジュール (Transformer) を自前で用意する場合
- サンプルデータを準備する
- Weaviate にコレクションを作る
- データをロードする
- セマンティック検索
- キーワードサーチ
- ベクトルデータを事前に作って検索
- RAG シングルプロンプト
- RAG グループタスク
- 検索文言のキーワードをLLMで作成する
2024-11-08
Vercel v0 を使用したECサイトのフロントエンド開発
内容は Github で公開しています。
Vercel v0 を使用したECサイトのフロントエンド開発
- v0 とは？？
- v0 を使ってECサイトを作ってみる
- Next.js のプロジェクトを作成する
- Reactのバージョンを18に下げる
- Next.js の起動確認
- v0 で使用される依存関係の追加
- lucide-react（アイコン）
- shadcn-ui（UIライブラリ）
- v0 にアクセスしてみる
- ECサイトのトップページを作成する
- 出てきたコードをコピペしてapp/page.tsxに貼り付ける
- コンポーネントを追加する
- リファクタリング
- 商品一覧ページと商品詳細ページを作成する
- 商品一覧ページのコードを作成してもらう
- 商品詳細ページのコードを作成してもらう
- 商品一覧ページのコードを作成してもらう - 2
- 商品詳細ページのコードを作成してもらう - 2
- お疲れ様でした！
2025-12-13
LangChain チュートリアル
内容は、TORICO Tech Blog で公開しています。
- 前提説明
- LangChain とは
- LangSmith
- 手順
- プロジェクトフォルダの作成
- 環境構築 a. Pipenv を使う場合 b. uv を使う場合
- 仮想環境に入る
- .env ファイルを作る
- scripts フォルダを作る
- 現在のフォルダ構成
- Pipenv で環境構築した場合
- uv で環境構築した場合
- シンプルな LLM
- LangSmith の確認
- Runnable チェーン を使う
- 解説
- APIサーバー
- APIクライアント
- RAG + メモリーセーバー
