COIAI

XR, Web, iOS, Andoroid, Unity, 紙媒体, コーポレートデザイン, ロゴデザイン等
媒体や言語にとらわれず美しくユーザーに寄り添った製品を制作します。

Now Available

リリース中のアプリやサービスです

Serena Tones

Vision OS APP

Folder Icon Customizer

mac os App

Just Full Screen Cam

iOS App

BIng のフォントを変えたい

Chrome Extensions

Survice

今までに取り組んできたサービスです。

XR

  • Vision OS 向けのApp
  • Unityを使ったPC, Web, Oculus のアプリ
  • キャラクターモデリング
  • 建築モデリング

Web

  • 導線設計
  • UI, UX デザイン
  • 予算に合わせた実装
  • Wordpress から React を使ったSPA等

iOS & Android

  • ユーザーフレンドリーな導線設計
  • ネイティブアプリの制作

Corporate Identify

  • ロゴデザイン
  • ノベリティデザイン
  • Corporate Idetify を根本思想に、一貫したデザイン

Media

  • プロモーションビデオの制作
  • ミキサーやカメラやモーションキャプチャを使った生配信

App Logos

  • スタイルガイドや各OSに根差した設計思想
  • 【VisionOS】炎のパーティクル再現

    【VisionOS】炎のパーティクル再現

    Rearity Composer Pro を使って炎のパーティクルを再現したので下記にその際の設定の画像を貼っておきます。 Emmiter まずはエミッターの設定公式のDeveloperのビデオの中でも最初にエミッターからいじることをおすすめされていました。ポイントはサイズとEmitterShapeの選択欄で表現したい形に近いものを選ぶことです。 Loopのチェックが入ってることを確認して、再生ボタンを押して、右サイドバーにある再生ボタン▶️を押して動作確認をしましょう。 Particle 次にパーティクルの設定です。炎のエフェクトはデフォルトでプリセットに入っていなかったので自分で設定しました。 こんな感じです。 Birth Rate の設定の数値を1000程度に設定すると、よりリアルな豊かな表現になるのですが、あまり数値を上げすぎると重くなるようなので低くすることを心がけました。 低い値に設定すると、PropertiesのSizeを大きめに設定しないとスカスカになるので、少しチープな感じにもなりますが、逆にポップになっていいかなって感じで実装しました。 炎を再現するときにカラーは中心部を明るくして、先端の方に少しブラックの入った垢に設定すると、煤けた感じが表現できていい感じでした。 Noiseを設定すると、ランダム性が出るのでおすすめです。 Attract の設定で上下方向(Y軸)の値を正の値にして、他の軸の方向を0にしないと風に靡かれたような表現になるので注意です。 Vortexの設定をすると回転の表現になるので、一応設定しました。 終わりに 今後もVisionOSの開発もしていきます。仕事等の連絡あればフォームからお願いします。

  • 【SwiftUI】Videoがどうしても表示されない時

    【SwiftUI】Videoがどうしても表示されない時

    というエラーが出て全く動画が読み込まれない時があります。 そんな時は動画のファイルをXCodeで開いて、右のインスペクターからTarget MemberShipに自分のプロジェクトを選択しましょう。 動画を扱うたびにこのことを忘れてパニクるので備忘録がてらです。

  • 【SwiftUI】箇条書きにしたい!

    【SwiftUI】箇条書きにしたい!

    SwiftUIを使って番号付きの箇条書きにしたい! これをやると下記のようになります。 以下コードです。自分の環境に合わせて置き換えてください。

  • 【SwiftUI】カメラのフロントとバックの切り替え

    【SwiftUI】カメラのフロントとバックの切り替え

    SwiftUIを使ったカメラの実装で、フロントカメラとバックカメラの切り替えについての記事です。 他サイトにもいろんな方法は乗っていると思いますが。自分のメモように残しておこうと思います。 トグルボタンの設定 カメラのアイコンのついたボタンです。これを押すとカメラが切り替わるようにしたいと思います。 機能 前回の記事に以下コードを追記すればOKです。 全コード 特に出し惜しみする必要もないので、ここまでのコードを下に全て載せます。 コピペしてこれが動かなかったら、この記事がもう古くなったことでしょう。

  • 【SwiftUI】カメラ機能を使いたい 開発日誌

    【SwiftUI】カメラ機能を使いたい 開発日誌

    SwiftUIでカメラ機能を実装する方法についてです。 基本機能の実装 このコードを実行すると、フロントカメラが起動し、画面全体に映像が表示されます。 画面の向きに合わせてカメラの向きを変える このままだと、端末の向きを変えた時に縦:横=16:9の比率を保ったまま回転してしまうので、画面の向きに応じたカメラの映像が出てこなくなってしました。 そこで下記コードを追記しました。 これらの関数をlayoutSubviewsに追加することで、デバイスの向きが変わるたびにカメラの向きも適切に調整されます。 参考文献様 以下の記事に助けられました感謝 https://zenn.dev/platina/articles/5b9683f6d50938

  • 【SwiftUI】ポップアップに”二度と表示しない”のトグルをつける

    【SwiftUI】ポップアップに”二度と表示しない”のトグルをつける

    最初だけポップアップが表示されて、次回からはユーザーがポップアップの有無を選べるトグル。 あれの実装方法です。 .sheetでポップアップを表示します。AppStorageを使って「二度と表示しない」をBooleanで設定して置けばOK popupViewの中身

  • 【SwiftUI】動画を角丸にしたい

    【SwiftUI】動画を角丸にしたい

    AvKitで読み込んだ動画にCornerRadiusをかけると、動画自体が飛び出してしまいます。下の感じ。 これを直すには以下のように.clipShapeを追加すること。意外と簡単だったね。

  • 【SwiftUI】動画の再生機能で横に黒い帯ができるのが嫌 MacOS

    【SwiftUI】動画の再生機能で横に黒い帯ができるのが嫌 MacOS

    MacOS向けのAppを制作しています。 動画を再生する機能をつけたところ横に帯が出てしまいました。(下記画像:紫のボーダーの内側左右に黒い帯が出てしまっている) 調べたところ、iOS向けにこれを消す記事があったのですがMacOSではこれが使えなかったので、試してみたことを記事に残しておきます。 この記事のことをやるとした画像のようになります。角丸を飛び越えてしまってるので調子が必要そう…。 事前準備 動画の再生まで まず、動画の準備から始めます。再生したい動画ファイルをプロジェクトに追加し、そのURLをAVPlayerにセットします。 黒い帯を消す方法 次に、AppKitの力を借りて、NSViewRepresentableを使用してAVPlayerViewをラップします。これにより、動画がビュー全体にフィットするように調整できます。 これで、動画がフルスクリーンで表示され、再生や停止のUI部品は表示されません。これにより、動画の横に黒い帯が表示される問題を防ぐことができます。 やっぱめんどくさい(追記) SwiftUI標準のプレイヤーだとホバー時に再生停止ボタンと、シークバーが標準で付いているので、AppKitを使ってしまうとそれを自分で構築しなければならないので大変…。 最初にも書いたけど、CornerRadiusかけたときに切り取れるようにする方法がわからない。 結局動画編集して比率を変更してAspectRatioを指定することにした。コードで切り取っていい感じにするのは諦めた…。

  • 【SwiftUI】SwiftUIで表示と同時に動画を再生し、ループさせる方法

    【SwiftUI】SwiftUIで表示と同時に動画を再生し、ループさせる方法

    まず、必要なライブラリをインポートします。 ここでSwiftUIはAppleが提供するUIツールキットで、AVKitはオーディオとビデオの再生をサポートするフレームワークです。 次に、SampleViewという名前のViewを作成します。 このViewは、動画を再生するためのプレーヤーを持っています。 ここでAVPlayerは動画を再生するためのオブジェクトで、Bundle.main.url(forResource:withExtension:)メソッドを使ってアプリのメインバンドルから動画ファイルのURLを取得しています。 次に、bodyプロパティを定義します。 このプロパティは、Viewの内容を定義します。ここでは、VStackを使ってビデオプレーヤーを配置します。 VideoPlayerはAVKitが提供するビデオプレーヤーのViewで、先ほど作成したplayerを引数に取ります。 そして、onAppear()メソッドを使って、Viewが表示されたときに動画を再生します。 さらに、NotificationCenterを使って動画が終了したときに動画を最初から再生するように設定します。 これにより、動画は無限にループします。 以上が、SwiftUIを使って動画を再生し、ループさせる方法の解説です。

  • 【SwiftUI】SwiftUIで要素をN個づつ改行したい

    【SwiftUI】SwiftUIで要素をN個づつ改行したい

    よっしゃ、みんな!今日はSwiftUIでSwiftUIで要素をN個づつ改行する方法を教えてやるぜ!最終的には以下の画像みたいになったぜ! まず、こんな感じのコードがあるとするよな このコードで、色を一列に並べてるだけだけど、これを複数行に分けたいとき、どうすればいいかって話だ。 それには、以下のようにすればいいんだよ このコードで、行ごとの項目数(itemsPerRow)を設定して、それぞれの行と項目に対してForEachループを使って、各項目のインデックスをrow * itemsPerRow + itemで計算して、そのインデックスが色の配列の範囲内にある場合にだけ、対応する色の円を表示してるんだ。 これで、色の配列を任意の数の項目ごとに分けて表示できるぜ! ただし、最後の行は他の行よりも項目数が少ない場合があるから、それが問題なら適切に調整してみてくれよな。 また、spacingやframeの値も必要に応じて調整してくれ。このコードはあくまで一例だからな! 以上、SwiftUIでN個の要素を並べる方法の紹介だったぜ!お前らもぜひ試してみてくれよな!

  • 【SwiftUI】画像を追加する機能と、プレビュー、そして削除する機能

    【SwiftUI】画像を追加する機能と、プレビュー、そして削除する機能

    こんにちは!今日は、SwiftUIで画像を選択する機能を作りました。下の画像のような感じです。 コードの名前はSelectImage.swiftです。 コードの全体像 まず、import SwiftUIとimport UniformTypeIdentifiersで必要なライブラリをインポートします。次に、SelectImageという名前のViewを作ります。このViewには2つの変数があります。@Binding var image: NSImage?は選択した画像を保持し、@State private var isHovering = falseはマウスが画像の上にあるかどうかをチェックします。 画像を選ぶ部分 “Select Image”というボタンを作ります。このボタンをクリックすると、画像を選ぶダイアログが開きます。選んだ画像はNSImageとしてimage変数に保存されます。 画像を表示する部分 選んだ画像は、四角形の枠内に表示されます。画像は自動的に枠に合わせてリサイズされます。 画像を削除する部分 画像の上にマウスを持っていくと、削除ボタンが現れます。このボタンを押すと、選んだ画像が削除されます。 まとめ 以上が、私が作ったSelectImage.swiftの解説です。このコードを使えば、SwiftUIで簡単に画像選択機能を追加することができます。皆さんもぜひ試してみてください。それでは、また次回!

  • 【SwiftUI】Formの中のSliderを幅いっぱいにしたいのにできない。MacOS

    【SwiftUI】Formの中のSliderを幅いっぱいにしたいのにできない。MacOS

    MacOS向けのAppを制作しています。 SliderをFormの中で使うとラベル部分と、スライダー部分で横に2分割されてしまいます。下の写真が問題の現象。 結局解決策がわからず、Formを使うことを諦め、以下のようになんちゃってFormをVstackで作ることにしました。結果的に以下のようにSliderを幅いっぱいに表示することができるようになりました。 いかになんちゃってFormのセクションの役割をするVStackを貼っておきます。 使用するときは以下のように別Viewから呼び出してあげればOKです。

  • 【SwiftUI】SwiftUIでSliderを使って文字のサイズを変更する方法

    【SwiftUI】SwiftUIでSliderを使って文字のサイズを変更する方法

    みんな、こんにちは!今日はSwiftUIでSliderを使って文字のサイズを変更する方法を紹介するよ。これは特に、UIに数値を表示するときに役立つよ。 どうやるの? まず、Sliderビューを作成し、そのvalueパラメータに文字のサイズを表す変数(この場合はtextSize)をバインドするんだ。そして、Sliderのinパラメータで文字のサイズの範囲を指定するよ。 このコードでは、textSizeの値が32から200の範囲で変更できるようになっているんだ。 次に、Textビューのfont修飾子を使って文字のサイズを変更するんだ。具体的には、font修飾子の引数に「.system(size:)」を指定し、その引数「size」に文字のサイズを表す変数(この場合はtextSize)を指定するよ。 このコードでは、textSizeの値に応じて文字のサイズが変更されるよ。 小数点以下を表示しないようにする Textビューのspecifierパラメータを使って書式を指定するんだ。具体的には、%0.fを指定することで小数点以下を表示しないようにすることができるんだ。 このコードでは、textSizeの値を文字列に変換し、その際に小数点以下を表示しないようにしているんだ。 まとめ 以上の方法で、SwiftUIを使用してSliderを使って文字のサイズを変更することができるよ。

  • 【SwiftUI】Canvasの画像を動的に変更する

    【SwiftUI】Canvasの画像を動的に変更する

    画像の比率を保ったまま追加した画像の拡大縮小をしたかった。ただそれだけだった。 前提条件 この記事では、以下のようなSwiftUIのビューがあると仮定します。 CanvasViewはユーザーが画像を選択できるビューで、選択した画像はimageに保存されます。CanvasToSaveはキャンバスに画像を描画するビューで、描画する画像はuserImageから取得します。 スケールの追加 まず、CanvasViewとCanvasToSaveの両方に新たなBindingを追加します。これにより、ユーザーが画像のスケールを動的に変更できるようになります。 次に、CanvasViewにスライダーを追加して、ユーザーが画像のスケールを調整できるようにします。 最後に、CanvasToSaveで画像を描画する際にスケールを適用します。 以上の変更により、ユーザーがスライダーを使用して画像のスケールを動的に変更できるようになります。画像のスケールは、CanvasToSaveのuserSelectImageに反映されます。

  • 【SwiftUI】俺はただViewをPNGで書き出しただけなんだ

    【SwiftUI】俺はただViewをPNGで書き出しただけなんだ

    MacOSでViewをPNGで書き出しただけ。 結構大変だったのでここに足跡を残しておこうと思う。試行錯誤もあったけれど、今はただ疲れたので完成したコードだけ載せておく。いろんなサイト様を参考にしたので、少し寝たら参考リンクを貼ろうと思う。 以下コード

  • React Three.js で Obj や gltf の表示で詰まったこと

    React Three.js で Obj や gltf の表示で詰まったこと

    どうしたの? 自作のモデルをThree.jsで表示させようとした際に、モデルが表示されず困ってしまいました。 対処法としてはオブジェクトを public の下に配置することで解決しました。 完成したもの 実際の作業 ディレクトリ構成 コード 以下object3d.tsxのコードです。

  • Bing Chat AI の日本語フォントが嫌すぎる

    Bing Chat AI の日本語フォントが嫌すぎる

    Bing Chat AI のフォントを直すプラグイン作った。 BIng Chat AI は検索機能も付いているので、ChatGPTと使い分けている方もいるんじゃないかな? ただ日本語のフォントがひどすぎる、「多分アジアは全部同じフォントだろ。」みたいな感じで中華系のフォントを当てちゃったんだと思う。 そんなわけでPC標準のフォントに差し替えるだけのChromeプラグイン作りました。 無料なので使ってね! 良かったらストアで星ちょうだいね!(何の意味があるかわからないけど) https://chrome.google.com/webstore/detail/bing-chat-ai-%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E5%A4%89%E3%81%88%E3%81%9F%E3%81%84/gkjcpokolmabndhaonaepkchioaldhgi?hl=ja&authuser=0 開発雑記 特定のURLにアクセスしたときに発火する仕組みだと、ユーザーに権限の確認があるらしいです。ストアにアップした時に審査に時間かかるかもよ。となってたけど6時間くらいで普通に公開されて良かった。 あと、特定の企業のプロダクトの名前がはいっちゃってるので弾かれるんじゃないかと思ったけど大丈夫で良かった。 追記 2024/01/31 チャットAiを使っている際にスクロールすると検索画面に飛ばされる動作が嫌すぎるので、バージョンアップで遷移されないような機能を追加しました。

  • 【React  TS】WordPress Rest API で投稿一覧でサムネイルを出力する

    【React TS】WordPress Rest API で投稿一覧でサムネイルを出力する

    この記事は前回の続編です。 WordPressのサムネイルはフィーチャーメディア (featured media) と呼ばれています。これを呼び出すにはhttps://your-site.net/wp-json/wp/v2/postsから一旦 id を取り出した後、src=”https://your-site.net/wp-json/wp/v2/media/取り出したidを叩いきます。このjsonの中のguid.renderedを取り出せれば画像のURLをとってくることができます 以下コードです。

  • WordPress RestAPI を使ってフロントReactでヘッドレスCMSにする

    WordPress RestAPI を使ってフロントReactでヘッドレスCMSにする

    WordPressで自作テーマを作るのは労力に対してできるものが微妙だなと思い、ヘッドレスCMSにしようと思いました。 スタイリングは一旦無視して機能だけ解説します。動作は次の動画のようになります。 WordPress の投稿をGETしてみる Terminalで下記コマンドを実行してみましょう TerminalでJSONファイルは見づらいためPostmanを使うのがおすすめです。 React アプリをCreate Terminal を開いて好きなディレクトリに移動して下記コマンドを実行します。 投稿一覧ページの作成 srcディレクトリ内にPostList.tsxを作成します。 App.tsx.を開いて書き換えましょう。 一旦ここで動作確認してみましょう!Termialを開いて うまく起動できましたか?? できたら詳細ページを作っていきましょう! 詳細ページの作成 axis のインストールをします srcディレクトリ内に、PostDetail.tsx を作成します。 react-router-dom をインストールしましょう! App.tsx を書き換えます リストから詳細への遷移を作る PostList.tsx を下記のように書き換えます。

  • Necchi K417A 家庭用ミシンのレビュー

    Necchi K417A 家庭用ミシンのレビュー

    Necchi K417A家庭用ミシンレビュー:個人には十分なと機能が満載! 目次 付属品の紹介 箱から出してみる 家庭用ミシンのNecchi K417Aが届きました!早速、箱を開けて付属品を確認してみましょう。 Necchi K417Aは、イタリアの老舗ミシンメーカーNecchi(ネッキ)の製品で、1919年創業以来、高品質なミシンを提供してきた信頼のブランドです。このミシンはAmazonで約17,000円で購入できます。色によって機能が異なる点も特徴で、今回紹介する「赤」は真ん中のグレードに位置します。 購入の経緯 Necchi K417Aを選んだ理由は、次の3点です: これらのポイントが、Necchi K417Aを選ぶ決め手となりました。 本体の紹介 各部のボタンや機能紹介 Necchi K417Aの特徴的な機能やボタンを見てみましょう: 使い心地 実際に使ってみると、Necchi K417Aは次のような点で優れています: また、日本国内で販売されているシリーズには、K408A、K417A、K121Aの3モデルがあります。中でもK417Aは、縫い目の荒さを調整できる機能があり、中級者向けの仕様です。 デメリット紹介 Necchi K417Aにはいくつかの欠点もあります: まとめ 家庭用ミシン「Necchi K417A」は、以下の理由でおすすめです: 初心者から中級者まで、幅広い層に対応できる家庭用ミシンです。購入を検討している方は、ぜひチェックしてみてください! アソシエイトリンク https://amzn.to/3z1C89p