🫨
初めて自作のパッケージを作ってみた with Flutter ~ruby_textを使いながらSelectable Textの機能を引き継ぐ

2025/05/15に公開
 はじめに2025年5月13日、僕は、エンジニアとして新たに生まれ変わった!🤞

 問題発生！現在、flutterを使って、日本史の学習アプリこれだけ日本史一問一答 を作成しているのですが、

ここで、少しつまづいてしまいました！
振り仮名機能とコピペ機能の同時実装ができない！


この語句の振り仮名,わかりますか？

僕はわかりません！振り仮名があることで、ユーザーの学習効率は上がる！

振り仮名機能を実装しないといけません。

そこで、ruby_textというライブラリを使用することにしました！

これを使用すると、下の画像のように、テキストに振り仮名を当てることができます！

https://pub.dev/packages/ruby_text

ここまでは、調べる→ライブラリ使用→試行錯誤っていういつものサイクルでしたが...
ここで問題が発生！

なんと、このライブラリを使用すると、この文字をコピーすることができなくなってしまったのです！

コピー機能は、メモする際に、便利なので、必要..どうすれば！
RubyText(
    [
      RubyTextData(
        '検査',
        ruby: 'けんさ',
      ),
    ],
  );
ruby_textを用いて振り仮名を振る際は、上のようになるのですが、このRubyTextウィジェット自体には、テキストをコピーすることを許可するような機能はありません。

通常、テキストをコピー可能にするには、SelectableTextを用いないといけません
const SelectableText(
  'Hello! How are you?',
  textAlign: TextAlign.center,
  style: TextStyle(fontWeight: FontWeight.bold),
)
しかし、今回の場合、SelectableTextでRubyTextを囲めばいいのか...?

いや、そんなことできない😖

Chatgptに丸投げしても、　記事を探しても、答えがわからない...

詰みです😭

 大学の先輩に相談Time！大学の先輩に相談しました。(その人はflutterほとんど触ったことないけど)

まあ、その人強強エンジニアだから、多少はね。
先輩は、まず、サッとruby_textのpub.devを読んだ後、ruby_text.dartのgithub

に目を通しました。
いつもAI丸投げくんで、それで対処できない時は、渋々解決記事を探すっていう

うんちプレイヤーだった自分は、この二つの行動を見て、唖然としました();
また、githubでライブラリが定義されているのを見た時、初めていつも自分が使って

いるライブラリって誰かの二次創作を使ってるに過ぎなかったのだと気づきました。
その先輩は、さらにライブラリの内部実装を見始めました。

これがそこの内部実装の全体のコード (160行程度なので全部みてもいいかも)

https://github.com/YeungKC/RubyText/blob/master/lib/src/ruby_text.dart

86~102行目あたりの、以下の部分、
 if (data.ruby != null) {
      texts.add(
        Text(
          data.ruby!,
          textAlign: TextAlign.center,
          style: effectiveRubyTextStyle,
        ),
      );
    }

    texts.add(
      Text(
        data.text,
        textAlign: TextAlign.center,
        style: effectiveTextStyle,
      ),
    );
ここの部分に解決の切り口があるのでは、って先輩は言いました。

確かに...

 問題解決！SelectableTextはflutter標準のパッケージに入っているので、

Textウィジェットを、SelectableTextで置き換えるだけで、テキストをコピー可能に、

しかも振り仮名はコピーしなくてもいい!
夢のような機能を実現することができることに気がつきました！
実際に、ruby_text.dartをフォークして、自分で少しだけ魔改造。

そして、新たに振り仮名を振りつつ、テキストをコピーできるようにしたライブラリの完成！

https://github.com/Taniguchiyuto/RubyText
実際に使用してみると...



成功！

先輩はこの原因特定をものの10分で行いました...

 反省この出来事から学んだのは、
AI丸投げくんはやはり限界がある
単にエラーの内容を調べるだけでは伸びない
実際にドキュメントを見ることが大事(pub.dev→githubの順がベター)
内部実装を見るっていうことも解決策の一つ
きっと、呪術廻戦でいう、拳に呪力を込めるくらいの力を得られたかもしれない...
目指せ!領域展開！
はじめに

問題発生！

大学の先輩に相談Time！

問題解決！

反省

Discussion
