ZIP の文字化け修復ツールを 1週間で作った記録

この記事の内容

1週間で ZIP の文字化け修復ツールを作ったので、記録に残します。

完成形はこちらです。

ZipBake - Zipファイル 文字化け修復

ZIPファイル内のファイル名を Windows/Mac/Linux 向けに修復するWebツールです。

要点

うまく行った点

• 検討の段階で、サービス内容の取捨選択が上手く行ったと思います
• ZIP 処理系は外部ライブラリ非依存で作成

改善が必要だった点

• Google AdSense が上手く行かなかった

作成の記録

• 1日目
  • 機能の検討
• 2日目
  • ライブラリの検討
• 3日目
  • ZIP処理系の作成
• 4日目
  • ZIP処理系の作成
• 5日目
  • React による画面デザイン
• 6日目
  • ブランディングの検討
  • ドメイン取得
  • ホスティング
• 7日目
  • Google AdSense、 Google Analyticsの設定
• 8日目
  • 今日

機能の検討

機能の検討では、何が必要か、必要そうだけど必要ない機能は何かを検討しました。

特に、圧縮・解凍を対応しないと決めたことで、１週間で構築できたと考えます。

• 動機
  • なぜそのソフトウェアが必要なのか？
  • ZIP ファイルのやり取り時に文字化けが発生する。
  • Macで、Windows向けの ZIP を作らないといけないが、対応ソフトがサポート終了品ばかり。
  • ▶ 文字コードの変更に特化したアプリを開発しよう。
• 機能検討
  • 簡単
    • 専用アプリを入れるのはめんどくさい、ブラウザだけで完結させたい。
    • 利用していて、機能を熟知している Reactで作成しよう。
    • ライブラリの互換を考え、TypeScript でコーディングを決定。
    • Create React App で TypeScript を使用する
  • 使いやすい
    • マテリアルデザインと、シンプルな画面で使いやすいデザインを考えました。
  • 対応しない
    • 圧縮や解凍は対応しないこととしました。
    • ZIP64 は現時点では対応しないこととしました。

ライブラリの検討

利用できるライブラリや、自作する部分を検討しました。
基本は、あるものは使う、ないものは作るの精神です。

ZIP処理は、検討の結果作成することとしました。

• ライブラリの検討と自作の検討
  • デザイン系
    • Material UI
      • React使うなら、コレ。
    • react-dropzone
      • ドラッグドロップでファイルを選択する必要があり、こちらを利用。
    • M PLUS Rounded 1c
      • スタイリッシュな見た目にしたかったので WebFont はこちらを選択。
  • 文字コードの判断
    • jschardet
      • 文字コードの判断はこちらで実施。
    • iconv-lite
      • 文字コードの変換はこちらで実施。
  • 自作
    • ZIPファイルの読み込み及び、出力
    • 理由は後述。

なぜ ZIPライブラリを自作したのか？

今回、ZIP処理のライブラリを自作した経緯は下記の検討によります。

▼ 機能不足

JSZip や Archiver が ZIP処理系では有名ですが、暗号化非対応です。
日本で ZIP 処理系を作るのであれば、暗号化ZIP が必須だと考えており、既存のライブラリでは力不足でした。

▼ セキュリティ知識の活用

セキュリティ系の方だとご存知だと思いますが、ZIPファイルはファイル名が暗号化されておりません。
いくら AES暗号で暗号化しようと、ファイル名は平文保存です。

逆説的に、暗号化ZIP対応しなくても、ファイル名は改ざん可能であると判断し、自作を決定しました。
（このときには、1週間で作り終わるとは思っていなかった。）

バイナリエディタが必須と考えたので、 FavBinEdit を導入しました。
いくつか利用しましたが、こちらのソフトが一番使いやすかったです。
特に、比較機能には助かりました。

▼ 昨今のブラウザ事情

昨今のブラウザは、バイナリ処理がとても強くなっています。 TypedArray や Buffer により、十分にバイナリが利用できると判断しました。

ZIP処理系の作成

ZIP処理ライブラリを自作することにしたので、自作を行いました。

• ZIP 処理系の作成
  • Wikipedia や 解説記事を確認しながら、読み込み系を作成しました。
  • 参考サイト
    • ZIP (file format) - 英語版Wikipedia
    • Zipファイルを紙とペンで解凍してみた - RACCOON TECH BLOG
    • ZIPの仕様を日本語でまとめる - GitHub ysakasin/zip.md
    • zip規格日本語訳(1) - TNKSOFT
  • 仕様で明示されていない ZIP の限界を感じた部分でした。 （↓ 仕様に関する文句）
    • EOCD（カタログ終端） 末尾にコメントがつけられますが、コメント長さがコメントより上にある。
    • そもそも、EOCDがファイル末尾じゃなくても良い。
    • ローカルファイルパートで、ファイルサイズ 0 で作成されたファイルの長さが、ファイル末尾に記録されるのですが、該当部へのポインタがない。
    • ローカルファイルパートと、カタログでファイル名が重複管理。
    • などなど、ZIP使用に対する不満が出てきた時間でした。

React による画面デザイン

特段、普段どおりに実装します。
React & Material UI のパターンは楽に実装ができて良いです。

• 画面デザインの実装
  • React & Material UI をベースに、画面デザインを作成しました。
  • 画面はシンプルに、使いやすいものを意識しました。

ブランディングの検討

ネーミングやイラストを依頼しました。
今回、ネーミングに困らなかったのも 実装が早かった要因かと思います。

• ブランディングの検討
  • ZIP、文字化け、修復 のキーワードをもとに、ブランディングを検討しました。
  • 参考
    • 誰も教えてくれない、商品名やサービス名のネーミング方法
  • 今回は、Zip + Mojibake ▶ ZipBake ▶ ZIPお化け のような検討でブランディングを検討しました。

ドメイン取得 & ホスティング

サイトの公開準備などです。
こちらは、AWSを活用しているので直前まで検討外でした。

• ドメイン取得 & ホスティング
  • 今回一番頭を使っていない部分です。
  • AWS Route53 + CloudFront + S3 で実現しています。
  • 注意点としては、CloudFrontを使う際は、ACMやS3はバージニア北部のリージョンを選択するのが無難です。

Google AdSense & Google Analytics

今回失敗したところです。

• Google AdSense & Google Analytics
  • Google の案内に従い、AdSenseタグや Analyticsタグを埋め込み、申請しました。

▼ サブドメインを使おう！

とても重要なところなのですが、Webサービスって AdSense 通らないです。
コンテンツがありませんって怒られます。

まじでどうしようもありません。

『画面をごちゃごちゃいろんなこと書きたくない』、と、『コンテンツが存在しない』 が相反します。

これから、サービスをリリースする方。
メインのドメインで、ブログを開設して、収益化を先に済ましましょう。

そして、サブドメインでサービスを運営してください。

今回の勉強代は、ドメイン代 $12.00 でした。

以上、１週間でサービスをリリースした結果と、反省点でした。

ありがとうございました。