レコチョクのエンジニアブログ

https://techblog.recochoku.jp

最新のIT技術を駆使して音楽関連サービスを展開しています。日々の活動内容から得た知識をお届けする開発ブログです。 We're using the latest IT and we are developing music service.The developers blog which we'll report the knowledge we got from the daily activity contents.

フィード

記事のアイキャッチ画像
フラーさんと合同勉強会を実施しました!
レコチョクのエンジニアブログ
<p><img width="180" height="180" src="https://techblog.recochoku.jp/wp-content/uploads/2016/10/recochoku-kuma-315-180x180.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /></p>こんにちは、Androidアプリ開発グループの杉山です。今回は先日3/4(月)に行われたフラーさんとの合同勉強会についてまとめたいと思います!<h2>今回の合同勉強会</h2>レコチョクとフラーさんのモバイルアプリエンジニア・デザイナーどうしでお互いの知見を共有し、交流を深めることを目的とした勉強会でした。それぞれ2名の方が登壇し発表を行いました。発表終了後は懇親会も行いました。<h2>発表内容</h2>登壇して頂いた4名の発表内容はこちらです!<h3>リサーチのすゝめ</h3>登壇者:レコチョク システム開発推進部 システム開発第1グループ 山里 啓一郎さん<img src="/wp-content/uploads/2024/04/DSC_9503.jpg" alt="DSC_9503" />レコチョク入社後に感じた定性的な調査が十分にできていない状況に対して、どのように周知と実践を推進したか発表していただきました。 音楽プレイヤーアプリ「PlayPASS」のプロダクトオーナー着任後、ユーザビリティに関する課題に対応する一環として、ユーザビリティテストを実施し、UXリサーチの重要性を認知させることに成功しました。 特に周知の観点では、テストの生配信や映像を使ったフィードバックなど、直接操作している映像を見てもらうことで、1つ1つの問題を自分ごととしてサービスのメンバーに理解してもらえるようになったとのことでした。 またテストでは、「バイアスを除くための設計」にこだわり「テストとしてタスクをこなすだけの作業とさせないこと」「テスト時のプライバシー情報に対する不安を解消させること」の2点をしっかりと設計して取り組み、テスト結果の信ぴょう性を高めることに努めていたそうです。 最後に今後の抱負として、レコチョクチケットサービスの事例を紹介し、画面内に閉じないリアル空間での定性調査も強
3日前
記事のアイキャッチ画像
【Android】Composeのナビゲーションを使ってみる
レコチョクのエンジニアブログ
<p><img width="180" height="180" src="https://techblog.recochoku.jp/wp-content/uploads/2016/11/android-180x180.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /></p><h1>はじめに</h1>Androidアプリ開発グループの黒滝です。グループ名の通り日々Androidアプリを開発しており、Android開発歴は5年目になります。この度、ライブラリのサンプルアプリを作成しました。ごく少数しか使わない社内用のサンプルアプリということで開発は自分ひとり。それなら色々と試してみようと思い<a href="https://developer.android.com/jetpack/compose/navigation?hl=ja">Composeのナビゲーション</a>を使ってみたので、その導入方法をまとめていきます。<h1>実装</h1><h2>構成</h2>本記事では、「画面1でボタンを押したら、画面2に遷移する」という簡単なアプリを作ります<ul><li>class MainActivity<ul><li>Navigationの遷移処理をする</li></ul></li><li>fun FirstScreen()<ul><li>Composeで作る画面1</li></ul></li><li>fun SecondScreen()<ul><li>Composeで作る画面2</li></ul></li><li>sealed class ScreenNav<ul><li>後述のroute名の指定を楽にするために作成</li><li>なくても問題ない</li></ul></li></ul><h2>implementationの追加</h2>Composeでのナビゲーションを使うために以下を追加します[crayon-662e1135dd77b010805155/]<h2>画面の作成</h2>画面1は画面2に遷移するボタンのみ、画面2はテキストのみにします<img src="/wp-content/uploads/2024/04/239e76f147d21580a4b90adb
12日前
記事のアイキャッチ画像
TKC聖徳学園小学校アフタースクールで体験会を実施しました!
レコチョクのエンジニアブログ
<p><img width="180" height="180" src="https://techblog.recochoku.jp/wp-content/uploads/2016/10/recochoku-kuma-315-180x180.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /></p>こんにちは!NX開発推進部Androidアプリ開発グループの塚本です。先日3/26(火)に株式会社セリオ様が運営している、TKC聖徳学園小学校アフタースクールで体験会を実施しましたので、当日の様子をお伝えします!<h2>体験会実施の背景</h2>レコチョクとしては自社のプロダクトや既存のリソース・ノウハウを活用して、「⾳楽×〇〇」という音楽に新たな付加価値を掛け合わせて新しい価値をアウトプットをできる場を探しており、そんな中株式会社セリオ様からご連絡いただきました。音楽×教育として何かできないかと考えた結果、「Maker Faire Tokyo2023」で展示した作品を体験してもらうことになりました。<h2>「Maker Faire Tokyo2023」出展について</h2>私が所属しているNX開発推進部では、「新しい音楽体験」を提供する取り組みの一環として、昨年10月に「Maker Faire Tokyo2023」へ出展しました。詳しい内容は <a href="https://techblog.recochoku.jp/9677">こちらの記事</a> で紹介しています。以下、作品の説明です。作品に関する記事もあるので、是非ご覧ください!<h3>サイリズム</h3>「音楽 × サイリウム × ジェネラティブアート」をコンセプトにした体験型音楽ゲーム。プレイヤーが楽曲に合わせてサイリウムをテンポよく振ると、振りに応じてジェネラティブアートと呼ばれるデジタルアートをベースにしたグラフィックが生成されます。<ul><li><a href="https://techblog.recochoku.jp/9729">【Maker Faire Tokyo 2023】サイリウム×ジェネラティブアートのゲーム「サイリズム」を作ってみた</a></li></ul><h3>レコチョクマミン</h3
19日前
記事のアイキャッチ画像
【ナレッジ編】音楽業界の課題解決に向けてLLMを活用した技術検証に取り組んだ話
レコチョクのエンジニアブログ
<p><img width="200" height="200" src="https://techblog.recochoku.jp/wp-content/uploads/2023/09/3abd1ebbbe921a83754020d2aed3840b-200x200.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /></p>株式会社レコチョク 新卒3年目の早坂と言います。LLMを活用したシステム化の技術検証を担当しています。本記事では、音楽業界の課題を解決するために、株式会社レコチョクが大規模言語モデル(LLM)を活用したシステム開発の取り組みで得たナレッジを書きます。具体的には、メタデータの整備と楽曲のタイトル情報変換作業のシステム化に焦点を当て、技術検証から得られたものを対象としています。<h1>はじめに</h1>ナレッジを得た背景にある取り組みについては、<a href="https://techblog.recochoku.jp/10450">こちら</a>をご覧ください。背景がなくても開発のナレッジなので読み進めることはできますが、背景を知っている前提で説明している文章が随所ありますので、事前にご覧いただくとスムーズに読み進められるかと思います。<h2>対象読者</h2><ul><li>システム開発者: 特にLLMを活用した開発に関心がある方</li><li>音楽業界の関係者: 業界特有の課題に対する新しい解決策に興味がある方</li><li>AIと機械学習に興味がある方: LLMの活用事例を知りたい方</li></ul>事前に以下の知識があると、記事の内容をより深く理解できますが、必須ではありません。<ul><li>基本的なPythonのプログラミング知識</li><li>機械学習、特に自然言語処理(NLP)に関する基礎知識</li></ul>私は機械学習に関して専門的な研究を行っているわけではありませんが、半年間Azure Open AIのAPIを利用し、システム開発を行った経験をもとにしたナレッジを記事にします。特にLLMを活用したシステムを実装中の方、もしくはこれから実装を予定している方の一助となれば幸いです。<h2>環境</h2><h3>モデル</h
23日前
記事のアイキャッチ画像
音楽業界の課題解決に向けてLLMを活用した技術検証に取り組んだ話
レコチョクのエンジニアブログ
<p><img width="200" height="200" src="https://techblog.recochoku.jp/wp-content/uploads/2023/09/3abd1ebbbe921a83754020d2aed3840b-200x200.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /></p>株式会社レコチョク 新卒3年目の早坂と言います。大規模言語モデル(LLM)を活用したシステムの技術検証を担当しています。本記事では、音楽業界のメタデータ整備という業務課題を解決するために、LLMを活用したシステム開発の取り組みについて紹介します。システム開発のナレッジについては記載しませんが、別記事として<a href="https://techblog.recochoku.jp/10447">こちら</a>に記載します。<h1>対象読者</h1><ul><li>システム開発者: LLMやAI技術を用いた開発に興味がある方</li><li>音楽業界の方: 業界の効率化に対する新しい技術的アプローチに関心がある方</li></ul><h1>何をシステム化しようとしたか?</h1><h2>音楽業界の業務課題</h2>近年はスマートフォンやサブスクリプション型の楽曲配信サービスの台頭で、より安価で手軽に音楽を楽しめるようになりました。しかし、アーティストにより製作された楽曲がユーザーの元に届くまでの過程には現在も様々な課題が存在します。以下はレコード会社や個人(以後、楽曲権利者と表記)からユーザーへ楽曲が届けられるまでの大まかなフロー図です。<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2269908/97574dad-9e68-537d-c109-9517f76b795f.png" alt="スクリーンショット 2024-03-18 15.13.30.png" />フロー図の中にメタデータという表記がありますが、これは配信する楽曲のタイトル名やバージョン情報、価格、発売日などを示したデータです。メタデータを定義する規格の代表的なものとして、<a href="ht
23日前
記事のアイキャッチ画像
【SwiftUI】iOS 15でリフレッシュ可能なScrollView を作る - RefreshableScrollView -
レコチョクのエンジニアブログ
<p><img width="200" height="200" src="https://techblog.recochoku.jp/wp-content/uploads/2022/12/SwiftUI_logo-200x200.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /></p>はじめまして、普段iOSアプリを開発している澁谷太智です。最近、メイドコアというジャンルの音楽にハマっています。もともとインスト楽曲が好きで、色々掘り下げて行った結果辿り着きました。ニッチかつ成り立ちが大クセなので、気になる方は検索してみてください。さて、SwiftUIを触り始めて2、3ヶ月経ちました。現在、UIKitの画面をSwiftUIで作り替える作業を行なっています。その作業の中で [crayon-662e1135df8c8052760090-i/] を用いて画面更新処理を実装していました。しかし、なぜか iOS 15 でだけ ScrollView を引っ張っても [crayon-662e1135df8ce052672097-i/] の [crayon-662e1135df8cf665513376-i/] が実行されませんでした。そこで、iOS 15 でも画面更新ができる ScrollView を作成したのでご紹介します。<h2>目次</h2><ol><li><a href="#1">iOS 15 で動かない件</a></li><li><a href="#2">iOS 15 以上で動く ScrollView を作る</a><ol><li><a href="#2-1">iOS 16以上でリフレッシュ可能なカスタムScrollViewを作成する</a></li><li><a href="#2-2">iOS 15 でもリフレッシュできるように拡張する</a></li></ol></li><li><a href="#3">完成形</a></li><li><a href="#4">最後に</a></li><li><a href="#5">付録</a></li><li><a href="#6">参考</a></li></ol><h2 id="1">iOS 15 で動かない件</h2>簡単なリスト
1ヶ月前
記事のアイキャッチ画像
有線イヤホンをワイヤレスにしてみよう
レコチョクのエンジニアブログ
<p><img width="200" height="200" src="https://techblog.recochoku.jp/wp-content/uploads/2024/03/bluetooth_icon-200x200.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /></p>始めまして、普段iOSアプリを開発している澁谷太智です。皆さんは普段音楽を聴く際に、どんなイヤホンを使っていますか?最近は、AirPodsなどのワイヤレスイヤホンを使っている方が多いように感じます。。そんな中、私はまだ有線イヤホンを使っています。自分の耳の形に合わせて作成するカスタムIEMを利用しているため、なかなかフルワイヤレスに切り替えることができません。。。でも、ケーブルが煩わしい。。。そこで私は、<strong>有線イヤホンをワイヤレス化</strong>して使っています。その方法を2点、ご紹介しようと思います。<h2>目次</h2><ul><li><a href="#1">Bluetoothレシーバーを使う方法</a></li><li><a href="#2">ケーブルをBluetooth接続できるものに変更する方法</a></li></ul><h2 id="1">Bluetoothレシーバーを使う方法</h2>イヤホンプラグをスマートフォンやオーディオプレイヤーに直接繋ぐのではなく、Bluetoothレシーバーに繋ぎます。<img src="/wp-content/uploads/2024/03/Bluetooth_connect.png" alt="Bluetooth_connect" />こうすることで、スマートフォンの操作をケーブルに縛られることなく、快適に行えます。また、イヤホンジャックの無いスマートフォンでも変換プラグを用いずに音楽を聴くことができます。下の画像は、私が実際に普段使っているものになります。<img src="/wp-content/uploads/2024/03/IMG_0417.jpg" alt="IMG_0417" style="zoom:50%;" />レシーバーの価格帯は幅広く、500円で購入できるものもあります。画像のレシーバーは、Ali
1ヶ月前
記事のアイキャッチ画像
【ERC4337(3)】UserOperationをPythonで実行する
レコチョクのエンジニアブログ
<p><img width="200" height="200" src="https://techblog.recochoku.jp/wp-content/uploads/2021/12/a11b4bb3ba448d1fa402ac3dc62cc91f-200x200.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /></p>お疲れ様です。次世代ビジネス推進部の荻原です。今回は<a href="https://techblog.recochoku.jp/10409">【ERC4337(2)】EntryPoint、Paymaster、Smart Contract Account、ContractFactoryの実装の仕方</a>の続き、第3回目です。前回の準備を踏まえて実際に[crayon-662e1135e08bf378515640-i/]をPythonで実行してみます。"Pythonで"というところがポイントで、JavaScriptやTypeScriptのERC4337用のライブラリは使用せず、<a href="https://web3py.readthedocs.io/en/stable/">web3.py</a>と<a href="https://eth-account.readthedocs.io/en/stable/eth_account.html">eth_account</a>と<a href="https://eth-abi.readthedocs.io/en/stable/eth_abi.html">eth_abi</a>を使うので、ある程度どのような処理が行われているのか中身がわかりやすいかと思います。[crayon-662e1135e08c6489273644-i/]は複数のUserOperationを実行できるので以下をまとめて1回でやってみます。<ol><li>Smart Contract Account1を作成</li><li>Smart Contract Account2を作成、Smart Contract Account2宛にmint</li><li>Smart Contract Account2→Smart Contract Accoun
1ヶ月前
記事のアイキャッチ画像
【ERC4337(2)】EntryPoint、Paymaster、Smart Contract Account、ContractFactoryの実装の仕方
レコチョクのエンジニアブログ
<p><img width="200" height="200" src="https://techblog.recochoku.jp/wp-content/uploads/2021/12/a11b4bb3ba448d1fa402ac3dc62cc91f-200x200.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /></p>お疲れ様です。次世代ビジネス推進部の荻原です。今回は<a href="https://techblog.recochoku.jp/10407">【ERC4337(1)】EntryPointのhandleOps()の処理を理解する、Paymasterを指定してガス代について検証する</a>の続きです。ERC4337を利用してERC721のmintとtransferを行うために、必要なコントラクトの準備をしていきます。<a href="https://www.alchemy.com/">Alchemy</a>等のSaaSもあるのですが、すべてのコントラクトを自分で用意し、ローカルで完結させようと思います。この記事内で紹介するコードはあくまで検証用なのでセキュリティ面に問題がある点はご了承ください。実行環境は次の通りです。[crayon-662e1135e19c3161986273/]手順としては、<ul><li>EntryPoint</li><li>Paymaster</li><li>ERC721</li><li>Smart Contract Account</li><li>ContractFactory</li></ul>5つのコントラクトを用意し、UserOperation実行に必要な資金をEntryPointにdepositします。<h2>目次</h2><a href="#1">1. EntryPointの準備</a><a href="#2">2. Paymasterの準備</a><a href="#3">3. ERC721コントラクトの準備</a><a href="#4">4. Smart Contract Accountの準備</a><a href="#5">5. ContractFactoryの準備</a><a href="#6">6. de
1ヶ月前
記事のアイキャッチ画像
【ERC4337(1)】EntryPointのhandleOps()の処理を理解する、Paymasterを指定してガス代について検証する
レコチョクのエンジニアブログ
<p><img width="200" height="200" src="https://techblog.recochoku.jp/wp-content/uploads/2021/12/a11b4bb3ba448d1fa402ac3dc62cc91f-200x200.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /></p>お疲れ様です。次世代ビジネス推進部の荻原です。今回は、ERC4337についてです。以前も<ul><li><a href="https://techblog.recochoku.jp/9298">【ERC4337 その1】ERC4337について</a></li><li><a href="https://techblog.recochoku.jp/9302">【ERC4337 その2】NFTを転送してみる</a></li></ul>の2つの記事を書いたのですが、さらに深く調べたことをまとめました。以前書いたものはまだまだ理解が甘かったな...という反省を込めて書いていきます。今回は3本立てです。最終的にUserOperationの作り方とどのように実行されるかを理解した上で、Pythonで実行してみることをゴールにします。第1回目の今回は、UserOperationを実行するEntryPointコントラクトの[crayon-662e1135e35b3157139978-i/]のソースコードを読んでわかったことをまとめます。ここを理解することでUserOperationの作り方とどのように実行されるかがわかるようになるかと思います。[crayon-662e1135e35bb194701913-i/]の中でPaymasterに関する実装もあるので、UserOperation実行時のガス代についてもコードを読んだ上で実際に検証してみました。<h2>目次</h2><a href="#1">1. handleOps()について</a><a href="#2">2. _validatePrepayment()(資金準備のチェック)</a><a href="#3">3. _validateAccountAndPaymasterValidationData()(Paym
1ヶ月前