Excelでまとめた表をそのまんまブログとかGitHubのREADMEに貼りたいけど、
マークダウンの表記だと | 商品名 | 単価 | って感じで縦棒だらけで、手で打ち直すのクッソダルいんですよねー。
かといって既存の変換ツールを探すと、Excelのコピペとかはいけても、PDFのスクショとか、インデントが崩れたテキストには対応していなかったり。
そういう表の書き起こしの面倒をまとめて引き受けるツールを作りました。っていうかAIに作ってもらいました。
貼り付けるだけで形式を自動で判別して、Markdown・HTML・CSVに変換します。
表の画像を読み取ることもできます。登録不要ですし無料で使えますしウザい広告とかも無いです。
▶ なんでも表コンバーターを新しいタブで開く（推奨・スマホの方はこちら）
こーゆー人の作業が楽になればいいなで作りました
このツールは、以下のような人向けに作ったつもりです。
- 仕様書ライターとかブロガーの人向け→資料からの表の書き起こしがラクになると思います。Excelからコピーして貼り付ければ、そのままMarkdownの表になります。
- エンジニア向け→READMEやドキュメントの表をすぐ用意できます。割とありがちな全角文字を含む日本語の表とかでも、ソースコード上でちゃんと桁が揃うように整形してくれます。
- マニュアル作る人向け→PDFのスクショから表起こしができます。AI機能を使うと、画像に写った表を読み取って編集可能な感じにしてくれます。
- エクセルで作業を続ける人向け→読み取った表をCSVでダウンロードできる機能があるので、「画像の表をCSVにしてからエクセルに取り込む」みたいな変換もイケます。
機能紹介
貼るだけで形式を自動判別します
コレを使う基本目的はこの機能だと思います。元のデータを貼り付けて「変換する」を押すだけです。
対応しているのは以下の4形式でどれっていうのを指定する必要はありません。なんかいい感じにやってくれます多分。
- タブ区切り — ExcelやGoogleスプレッドシートからコピーすると、この形式になります
- CSV — カンマ区切りのデータです。引用符の中にカンマが入っていても正しく処理します
- 空白揃えのテキスト — 字下げで整形された、崩れた箇条書きのようなデータです
- 既存のMarkdown表 — 一度作った表を編集し直したいときに使えます
貼り付けたデータをどれとして解釈したかは画面に表示されます。もし思てたんと違うってなってもすぐに気づけます。
数値の列は自動で右揃えになります
金額とか数量の列は、右に揃っていた方が読みやすいものです。
このツールは列の中身を見て、全部数値なら自動的に右揃えにします。1,280 みたいなカンマ区切りや、¥ や % が付いた数値も、ちゃんと数値として扱います。
手動で変えたいときは、各列の上にある「← ● →」のボタンをワンタップするだけです。Markdownの :---: という書かれ方、HTMLの text-align、画面上の表示、この3つが同時に切り替わります。
日本語の表でもソースが崩れません
私も日本人なので、日本語で書く人向けに機能整備やってます。
Markdownの表は、ソースコード上で桁が揃っていると読みやすくなります。でも日本語には全角文字があって、これ半角文字の2倍の幅を使うんですよね。X(旧twitter)でも日本語1文字で2字消費するから140字って実質70字だよねみたいな話です。
ここを考慮しないツールで変換するとこういう感じになりかねません。
| 商品名 | 単価 | 数量 |
| --- | --- | --- |
| りんご | 120 | 3 |
| ぶどう(シャインマスカット) | 1,280 | 1 |でもこのツールは全角文字を幅2として計算するので、こういう感じに多少見やすくしてくれます。
| 商品名 | 単価 | 数量 |
| -------------------------- | ----: | ---: |
| りんご | 120 | 3 |
| ぶどう(シャインマスカット) | 1,280 | 1 |なんかこのブログでも微妙に崩れてそう……? 要は、半角を駆使して縦棒が揃ってキレイな表っぽく見せてくれるよってことです。
セル内の改行や記号も自動処理します
そう、縦棒。セルの中に縦棒や改行が入ると表の形って爆速でイカれるんですよね。
なのでこのツールは、変換時に| を \| に、セル内の改行を <br> に自動で置き換えます。
何も意識しなくても崩れません。逆に、そうやって作ったMarkdownを貼り直して再編集することもできます
出力は4つの形から選べます
先述した通り、最初はHTMLだけだったのですが、MarkdownとかCSV出力、あとプレビューモードもあるので合計4つですね。随分増えました。
- HTML:Webページ向け。タグは良い塩梅でエスケープされるはずです
- Markdown:ブログとかGitHub向け
- CSV:Excel向け
- プレビュー:出来上がりをチェックしつつ編集できるよ
あと、AIが気を利かせてくれたのか、CSVのダウンロードはBOM付きUTF-8という形式で保存しているようです。なのでExcelで直で開いても文字化けが起きないようになっているそうです。
CSVにありがちな話なので、対策してくれました。
AI機能：画像の表を読み取る
ここまでの機能は全部ブラウザの中だけで動きます。通信は発生しませんので、自分のAIアカウントとか無いよ～って人でも試せます。
そのうえで、AIを使った機能を1コだけ用意しました。それが表の画像読み取り機能です。
PDFのスクショとか、紙やレシート、資料を撮った写真から、表の中身を読み取ってグリッドに流し込みます。
この機能を使うには、ご自身のGoogle Gemini APIキーが必要です。APIキーっていうのはGoogle AI Studioで無料で発行できます。
キーはお使いのブラウザの中だけに保存されて、通信はブラウザからGoogleへ直で行われます。
何が言いたいって、Kabopenとか他所の人にキーとか画像とかが勝手に共有されたりはしないってことです。機密性大丈夫ってことです。
なぜこんな仕組みにしたかというとまぁ単純で、私のAPIを動かす形にすると費用がヤバいからです。
それだと「無料で公開し続ける」のは無理になりますし、「こーゆーの作ってみたよ」って軽い記事でサブスクとかやりたくありません。
でも使う人が自身のキーを使ってもらう方式なら、私に費用負担は無いんで置いておけます。
あ、画像読み取り機能は使わないって話ならそもそもAPIだの何だのは関係ないですからね。
作りながら考えたこと
以下は、ツールの使い方ではなく「なしてこういう作りにしたか」の話。
AIの弱点は「9割正しい」ことです
画像から表を読み取るAIは、相当優秀なんですが、やっぱり完璧とはいきません。1文字ミスるとか1列ズレるとか人間もやりがちなミスは、AIを使ったとしても防ぎ切るのはムズいです。
厄介なのは、9割方は合っているという点です。
全部間違っていれば「あぁ……うん……自分でやるわ」で終わりなんですが、9割合っていると信用してしまう。そして残り1割が、静かに紛れ込みます。
なので、このツールで一番力を入れたのは、読み取りの精度より間違いを修正できる導線部分です。
生成されたMarkdownを直で手で修正するのは、記号も多いしめちゃめちゃ面倒くさい。
そこで、完成形の見た目の表をダブルクリックすると、その場でセルを編集できるようにしてあります。
修正すると、隣に並んだMarkdownがリアルタイムで書き換わります。
「AIが読み取る → 人間が直す」までを最短距離で繋ぐってとこが、このツールの肝だと思っています。
全部が「ひとつのデータ」を見ています
こうした挙動が実現できているのには、設計上の理由があります。
このツールでは、Markdownを保存されたテキストとして持っているワケではありません。
表のデータがあって、HTMLとかCSVとかの出力は毎回生成される派生物扱いです。
なので、どこから編集しても全部が同時に追従します。
プレビューでセルを直せばMarkdownが変わり、揃えボタンを押せばHTMLの text-align も変わります。こういう構造にしたので、1箇所直したら全部直るようになっています。
バグの話：往復させると壊れていました
ちなみに開発中、面白いバグに出くわしました。
セル内の | を \| に自動エスケープする機能は、最初から入れていました。
ところが、そうやって出力したMarkdownをもう一度このツールに貼り付けて読み込ませると、\| を含むセルが2つの列に割れてしまうんです。
原因は、行を | で分割するときに、エスケープ済みの \| まで区切り文字として数えてしまっていたことでした。分割する前にエスケープ済みの記号を一時的に別の文字に退避させることで解決しました。
こういう「往復させると壊れる」タイプのバグは、片道だけ試していると気づきません。元データ → Markdown → 読み込み直し → 元データと一致するか、というテストを書いて、ようやく発見できました。
連続作業のための履歴機能
マニュアルを作るような作業では、何枚ものスクショから続けて表を起こすこともあります。
なので、変換するたびに左側に履歴が積まれていくようにしました。クリックで切り替えられます。
ここでこだわったのは、履歴を「変換した瞬間のスナップショット」じゃなく作業状態そのものとして保存している点です。
表Aのセルを直して揃えを変え、表Bに切り替えて作業し、Aに戻ってきても、セルの編集内容も揃えの設定もまんま残っています。
「ﾔｯﾍﾞさっきの表直し忘れてたわ」に手戻りなしで戻れると時短になりそうですからね。
まとめ
なんでも表コンバーターは、次のことができるツールです。
- Excelのコピペ、CSV、崩れたテキスト、Markdown表を自動判別して変換
- Markdown・HTML・CSV・プレビューの4形式で出力
- 日本語でも崩れない全角対応の桁揃え
- 数値列の自動右揃えと、ワンタップの揃え変更
- AIによる画像からの表の読み取り（自身のAPIキーを使ってください）
- ダブルクリックでのその場修正と、連続作業のための履歴
最初に言った通り登録とかありませんし無料です。基本機能は通信なしで動きます。アフィとかも無いよ。そういう目的じゃないですからね。
コメント