LoginSignup
2
2

More than 3 years have passed since last update.

@Shirousa

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

Posted at

この記事の内容

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 の限界を感じた部分でした。 （↓ 仕様に関する文句）
      • EOCD（カタログ終端） 末尾にコメントがつけられますが、コメント長さがコメントより上にある。
      • そもそも、EOCDがファイル末尾じゃなくても良い。
      • ローカルファイルパートで、ファイルサイズ 0 で作成されたファイルの長さが、ファイル末尾に記録されるのですが、該当部へのポインタがない。
      • ローカルファイルパートと、カタログでファイル名が重複管理。
      • などなど、ZIP使用に対する不満が出てきた時間でした。

React による画面デザイン

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

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

ブランディングの検討

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

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

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

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

Google AdSense & Google Analytics

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

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

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

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

image.png

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

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

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

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

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

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

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

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2