このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

AIでアプリが量産される日々

どもです。

昨今、AIの進化により、世の中では大量のアプリが生成されております。

何を隠そう、自分もそのひとり。

前回「AIで作成されたアプリを購入してしまい、頭に来たのでAIで作り直してアプリリリースした件」という記事を書かせていただきましたが、それをきっかけにアプリを大量に作っております。

…と言っても、まだアプリ3個ほどなので、大量というほどでもないのですが(笑)

ということで、今回はその「量産の日々」の近況をまとめた形になります。

溜まっていたタスクが消化されていく快感

ただただ闇雲に作っているかと言うと、そうでもなく。

前から「作りたいけど、面倒くさいなぁ」と二の足を踏んでいたものを作っているので、溜まっていたタスクがどんどん消化されていっている感じなんですよね。いやぁ。これがすごく気持ちいい。

「これウケるだろ?」というものではなく、自分が使いたいものだけを作っているので、たとえダウンロードされなくてもまぁOK。(ダウンロードされるに越したことはないが)

なので、まだモチベーションも保てて、「もっと更新しよう」という気持ちにもなれるんだよなぁ。

現状リリースされているアプリの一覧などは、こちらにまとめています。

https://app.webcyou.com/

これ以外にもウェブサービスを展開していたりもするのですが、それはまたいつか。

FrameScope が Windows に対応

あまりに Claude Code さんの性能が良いので、前回の FrameScope も Windows 対応しちゃいました。

さて、こんな感じでアプリを出していると気づくことがありまして。

大量に申請が来ているのか、Apple の審査がクソ遅い。。><

逆に、Windows の方はすごく早く感じます。

 

AtlasKit の紹介

FrameScopeで拍車がかかりもう一つ作成した、ゲーム開発ツールがこちら。

AtlasKit

https://app.webcyou.com/atlaskit/

 

AtlasKit は、TexturePacker の機能を持たせつつ、より使い勝手よくしたアプリになります。

ゲーム素材を「まとめる・分割する・確認する」ためのスプライトシート/テクスチャアトラスツールで、汎用の画像編集ソフトではなく、ゲーム用スプライト素材の準備に特化しています。書き出したスプライトシートと JSON は、Phaser や PixiJS などでそのまま読み込めます。

Pack(スプライトシート作成)

連番画像を読み込んで、1枚のスプライトシートにまとめる機能です。

  • PNG、JPEG、WebP、GIF、BMP、TIFF、TGA の読み込みに対応(ファイル・フォルダ・ドラッグ&ドロップ)
  • アニメーション GIF、APNG、アニメーション WebP を1コマずつのフレームに展開
  • グリッド配置に加えて、7種類のパックアルゴリズム(Shelf Packing、Next Fit、First Fit、First Fit Decreasing、Best Fit、Skyline、Maximal Rectangles)を搭載
  • アルゴリズムごとのシートサイズと使用率を一覧で比較できる
  • 90度回転、透明余白のトリム、押し出し(Extrude)、2のべき乗サイズ指定など
  • 1枚に収まらない場合は、複数シートへ自動分割して書き出し

アルゴリズムごとに使用率を見比べられるのは、地味に便利なところかと思います。

Split(スプライトシート分割)

逆に、既存のスプライトシートをバラす機能です。

  • 列数・行数、またはセルサイズで分割
  • 余白・セル間隔に対応し、分割範囲をプレビューで確認
  • 空のセルは除外可能
  • 連番 PNG と、元座標を記録した JSON を書き出し

分割したセルは、そのまま Pack のフレームとして使えます。

Preview(アニメーション確認)

作ったアニメーションをその場で確認できます。

  • 再生、一時停止、コマ送り、ループ再生
  • 1〜60 FPS、再生速度 0.25〜4倍
  • チェッカーボードまたは任意の背景色、拡大・縮小

前回の記事の件もあり、ここはきちんとアニメーション再生できるようにしました(笑)

その他
  • 書き出し形式は PNG + JSON Hash / JSON Array(TexturePacker 互換)/ CSS
  • 作業内容は .atlaskit プロジェクトファイルとして保存し、後から再開可能
  • 元の画像は変更せず、処理はすべてパソコン内で完結
  • 日本語・英語に対応

対応環境は macOS 11 Big Sur 以降(Apple シリコン / Intel)と、Windows 10(バージョン 1809)以降・Windows 11(x64 / ARM64)。

価格は 2,000円の買い切りで、アプリ内課金・サブスクリプションはありません。今ならリリース記念価格として 1,500円で販売しております。

こちらも Apple の審査中だったのですが、なんと! 後から出した Microsoft Store の審査の方が早く終わり、先にリリースされております。おぉ。順番逆転。

 

Chrome拡張機能「BlurMark」の紹介

アプリだけでなく、Chrome拡張機能も作りました。それが BlurMark。

BlurMark

 

Web ページ上の要素やテキストを、クリックやドラッグでぼかして隠せる Chrome拡張機能です。画面共有やスクリーンショットの前に、個人情報などをサッと隠したい時に使えます。

隠し方
  • 要素を選択: ページ上の要素をクリックして隠す。↑↓キーで選択範囲を変更できる
  • テキスト選択: 文字列をドラッグして「隠す」を選ぶ。文章の一部だけを隠すことも可能

隠した部分をクリックすれば解除できます。

表示方式と管理
  • 方式は「ぼかし」「ピクセル」「塗りつぶし」の3種類、強度は「弱」「標準」「強」の3段階
  • 設定はサイトごとに保存され、再読み込み後や、あとから読み込まれた部分にも自動で適用
  • このページのモザイクを一覧表示して、個別のオン・オフや方式・強度の変更が可能
  • ツールバーのバッジに、このページのモザイク数を表示
  • ポップアップのスイッチ、またはショートカット(初期設定は Alt+Shift+B)で一時的に解除できる

設定はブラウザ内にのみ保存され、外部通信なし。アカウント登録も広告もありません。

料金は無料で、動作環境は Google Chrome 111 以降。日本語と英語に対応しています。

注意点

あくまで表示を変えるだけなので、元の内容は HTML のソースや開発者ツールから読み取れます。パスワードなどの機密情報を消去する機能ではないので、そこはご注意ください。また、Shadow DOM 内部、Canvas、PDF、iframe には非対応です。

 

これは良いだろうと思っていたのですが、似たようなChrome拡張機能は他にもいっぱいありました。。

大体みんな考えることは一緒なのか。わかりみ深い。

 

まとめ

というわけで、AIのおかげで「いつか作りたい」が「もう作った」に変わっていく日々を過ごしております。

次回は、LocalMarks の紹介をしようかと思います。

ではではぁ。またまたぁ。

Related Article

LATEST NEWS

RANKING

ARCHIVE

SPONSOR

現在、掲載募集中です。



Links

現在、掲載募集中です。



About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。