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

# この記事の内容

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

完成形はこちらです。

[ZipBake - Zipファイル 文字化け修復](https://zipbake.info/)

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 を使用する](https://ja.reactjs.org/docs/static-type-checking.html#using-typescript-with-create-react-app)
    - 使いやすい
        - マテリアルデザインと、シンプルな画面で使いやすいデザインを考えました。
    - 対応しない
        - 圧縮や解凍は対応しないこととしました。
        - ZIP64 は現時点では対応しないこととしました。

### ライブラリの検討

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

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

- ライブラリの検討と自作の検討
    - デザイン系
        - [Material UI](https://material-ui.com/) 
            - React使うなら、コレ。
        - [react-dropzone](https://react-dropzone.js.org/)
            - ドラッグドロップでファイルを選択する必要があり、こちらを利用。
        - [M PLUS Rounded 1c](https://fonts.google.com/specimen/M+PLUS+Rounded+1c#standard-styles) 
            - スタイリッシュな見た目にしたかったので WebFont はこちらを選択。
    - 文字コードの判断
        - [jschardet](https://www.npmjs.com/package/jschardet)
            - 文字コードの判断はこちらで実施。
        - [iconv-lite](https://www.npmjs.com/package/iconv-lite)
            - 文字コードの変換はこちらで実施。
    - 自作
        - ZIPファイルの読み込み及び、出力
        - 理由は後述。



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

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

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

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

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

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

##### ▼ 昨今のブラウザ事情
昨今のブラウザは、バイナリ処理がとても強くなっています。 [TypedArray](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) や [Buffer](https://www.npmjs.com/package/buffer) により、十分にバイナリが利用できると判断しました。

### ZIP処理系の作成

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

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

### React による画面デザイン

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

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

### ブランディングの検討

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

- ブランディングの検討
    - ZIP、文字化け、修復 のキーワードをもとに、ブランディングを検討しました。
    - 参考
        - [誰も教えてくれない、商品名やサービス名のネーミング方法](https://note.com/takejune/n/n137025933062)
    - 今回は、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 通らないです。
コンテンツがありませんって怒られます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240771/8823f5f8-8c34-5da3-cfd9-f2d0e2399d76.png)

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

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

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

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

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

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

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