[HTML5] ZipファイルのMIMEタイプがOSによって異なる件

macOS ZIP Windows10 MIMEType Windows HTML5

最近のHTMLはファイル選択画面でファイル形式をこちらで指定した物以外は選択不可にできます。例えば次のコードではJPEGとPNG画像だけが選択可能になります。

<form>
  <input type="file" accept="image/jpeg,image/png">
</form>

PCでZipファイルをサーバへアップロードするサービスを作っていたのですが、このaccept属性によって制限を付けると特定の環境でZipファイルが指定できない現象が発生し困ったことに。久しぶりにブラウザでZipファイルを扱ったので混乱したのですが、そういえば環境によってZipのMIMEタイプが違うのでした。

というわけで割と最近のOSとブラウザ毎にZipファイルのMIMEがどのようになっているか調査します。

続きを読む

個人でゲーム開発をされている方（新サービスのご意見募集）

募集 そのほか
【追記 】
※こちらの募集は終了しました。ご協力いただいた皆様ありがとうございました！

ゲーム会社さんからのご依頼で新しいプラットフォームの開発にご協力いただける方を大募集しております！

ご興味のある方がいらっしゃいましたら、ぜひご協力をいただけると大変助かります。

対象者
個人でゲーム開発を行われており、Webブラウザ上で動作する物を作成できる方 ※学生の方や趣味で行われていらっしゃる方も大歓迎です ※作成方法は問いません（UnityやUE4、RPGツクールなどのツールから出力するのもOKです）
お願いしたいこと
現在α版のサービスを実際にご利用いただき感想やご意見をお聞かせください。
謝礼
薄謝あり ※Amazonギフト券5000円分を予定
募集人数
最大で10名程度を予定しております
その他
・詳細はご応募いただいた方へご説明いたします。 ・ご説明後にご辞退いただいても問題ございません。 ・何らかの費用負担や金銭のお支払を求めることはございません。

幅広く意見を頂戴することを目的としていますので、ゲーム開発を始めて間もない方や技術的に自信が無い方、ツクールでRPGを作られている方なども大歓迎です。個人の趣味レベルでOKですので現状大ヒットを飛ばしていなくてももちろん大丈夫ですｗ

今回ご協力いただいた方は今後も優先的にお声がけしますので未知の物に興味がある方もぜひ！（・∀・） もしご興味がある方いらっしゃいましたら、以下のツイートにリプをいただくかDMなどでご連絡いただけると大変助かります！

よくあるご質問

怪しい会社ではありませんか？
日本国内で有名な一部上場企業のグループ会社です。ご説明をさせていただく際に企業名をお伝えいたします。その後ご辞退いただいても問題ございません。
具体的にどういったことをするのでしょうか？
Web上で動作すゲームをアップロードいただきつつ、サービスの各機能をご利用ください。その際感じられた率直なご意見をお聞かせください。
Web上で動くゲームを作ったことがないですが大丈夫ですか？
これから挑戦される場合でももちろんOKです。 今回は幅広いご意見をいただくことを目的としておりますので、初心者の方も大歓迎です。例えばUnityなどを利用されている場合はWebGLでのビルドをご利用ください。
ゲームは新作の必要がありますか？
今回の目的はあくまでご意見をお伺いすることですので、どういった作品であっても問題ございません。過去に作成されたものや、権利的に問題が無ければゲーム開発ツールのチュートリアル用の教材などでもOKです。

その他ご質問などがありましたらTwitterに返信などをいただければご回答いたします。

[MySQL] 外部キー制約を一時的に無効にする

MySQL 外部キー 外部キー制約 foreign_key_checks

MySQLで外部キー制約を適用しているテーブルにはDROP TABLEができません。

本番ではその挙動でもちろん良いのですが、開発中にテーブルをまるごと作り直したいときにはこの制約が邪魔になることがあります。またmysqldumpなどで出力したファイルをインポートする際にも、テーブルを順番通りインポートする必要が出てきます（外部キー制約があるとインポートに時間もかかりますよね）。

そういったときにforeign_key_checksの値に「0」をセットすることで一時的に外部キー制約を無効にすることができます。

SET foreign_key_checks = 0;

再び有効にするには「1」を代入します。

SET foreign_key_checks = 1;
続きを読む

[MySQL] アップデート時にGPGキーのエラーで停止してしまう場合

AmazonLinux MySQL yum インストール GPG

小ネタです。 踏み台サーバであるAmazon Linux2にMySQLのクライアントを入れRDSを操作しているのですが、ある日yum updateをしたら途中で停止してしまいました。

エラーメッセージを眺めるとMySQLをアップデートする際にGPGが原因でコケているっぽい。

$ sudo yum update
(中略)
warning: /var/cache/yum/x86_64/2/mysql57-community/packages/mysql-community-libs-5.7.37-1.el7.x86_64.rpm: Header V4 RSA/SHA256 Signature, key ID 3a79bd29: NOKEY
file:///etc/pki/rpm-gpg/RPM-GPG-KEY-mysql から鍵を取得中です。

The GPG keys listed for the "MySQL 5.7 Community Server" repository are already installed but they are not correct for this package.
Check that the correct key URLs are configured for this repository.

 Failing package is: mysql-community-libs-5.7.37-1.el7.x86_64
 GPG Keys are configured as: file:///etc/pki/rpm-gpg/RPM-GPG-KEY-mysql

RPMやyumではパッケージが改ざんされているか検証するためにGPGキーを利用していることがあるのですが、このGPGキーには有効期限が設定されている関係で一定期間が経つと検証が行えなくなりインストールが停止してしまいます。パッケージを作成する際にGPGキーを別の物に変更した場合も同様の現象になります。

続きを読む

[JavaScript] フォーム部品に値をセットする（まとめ）

ラジオボタン JavaScript HTML FORM テキストボックス プルダウン チェックボックス ファイル document.createElement insertBefore HTML5

前回に引き続きフォーム部品のまとめです。今回はプログラム側から値をセットしたり選択状態をコントロールするお話です。

前回のフォームに入力された値を取得したいという方は以下をどうぞ。 blog.katsubemakito.net

続きを読む

[JavaScript] フォーム部品の入力値を取得する（まとめ）

ラジオボタン JavaScript HTML URL.createObjectURL FORM テキストボックス プルダウン チェックボックス ファイル FileReader HTML5

Webサービスを作る際に必ずと言ってよいほど利用するフォーム部品ですが、ユーザーに入力された値を取得する際にお恥ずかしながら自分でもたまにど忘れすることがあるのと、新旧の情報がごっちゃになっているため脳内の整理も兼ねてまとめておきます。

フォーム部品に値をセットしたり、選択状態をコントロールしたい場合は以下をどうぞ。 blog.katsubemakito.net

続きを読む

ログイン画面にreCAPTCHA v3を導入する

JavaScript reCAPTCHA reCAPTCHAv3 そのほか

ユーザー登録やログインなどで不安になるのが「ボット」の存在です。

検索エンジンのクローラーなど悪意の無いものであればよいのですが、機械的に大量のユーザーを作成されたり、悪意のある人が第三者のアカウントをゲットしようとプログラムを組んで攻めてくる可能性が有名なサービスになればなるほど高くなります。知名度の低いサービスであっても決済情報が保存されているような場合は狙われることもあるでしょう。

そんな心配に比較的かんたんに立ち向かえるのがGoogle社が提供する「reCAPTCHA」です。「私はロボットではありません」のチェックボックスを見かけたことがある方も多いと思いますが、最新版のv3ではこのチェックも不要になり導入のハードルが非常に下がりました。 developers.google.com

今回はこのreCAPTCHAをログインする仕組みに導入するという設定でまとめていきます。

続きを読む

[HTML5] 異なるオリジンのWebStorageの内容を取得する

HTML5 JavaScript WebStorage localStorage Content-Security-Policy window.postMessage オリジン

WebStorage(localStorageとsessionStorage)は同一オリジン内のデータしか読み書きできません。名前空間を分けることでデータの衝突を防いだり、大切なデータを他のサイトから覗き見られることから守ってくれています。

しかしWebサービスを開発していると、サブドメイン間などでWebStorage内のデータを共有したいことがあります。そんなときに使うのが window.postMessage。指定したオリジンにだけWebStorage内のデータを渡したり、逆にデータを受け取ってWebStorage内に保存するといったドメインをまたいでの通信が可能になります。

※同一オリジンとは「スキーム(http)」「ホスト(example.com)」「ポート番号(443)」のすべてが同じ場合を言います。詳しくはこちらをどうぞ

続きを読む