iPhoneやiPadを楽器代わりにして、Logic Pro Xでレコーディングする方法
Koala Samplerを使って早速曲を作ろうとLogic Proにつなぎたくなった。
これ見て即ダウンロードした >>> これで490円って…ウソだろ!?めちゃくちゃ使える衝撃のサンプラーアプリ「Koala Sampler」 https://t.co/3oG6GgVLOy via @YouTube
— Yuki Shindo (@shinshin86) January 6, 2020
iPhoneやiPadの音をmacに入力させる方法
ただ、結構久しぶりすぎて、どうやってiPhoneの音をmacに入力させるのかすこし迷子になったので、接続の手順をここに残しておく。
といっても、基本的には下記の記事に書いている内容をそのまま実行していけばOK。わかりやすい記事で、ありがたかった。
一応自身で実行した手順をメモとしてこちらにも残しておく。
- LightningケーブルでiPhoneやiPadとmacを接続する
- アプリケーションのユーティリティ内にある
Audio MIDI設定
を起動する - Audio MIDI設定アプリ内で接続したiPhoneなどを有効にする
ちなみに、iPhoneとmacを接続させたときに、このmacは信頼できますか?的なアラートがiPhone側に上るので、信頼できると選択しておくこと。
これを選択しないと、Audio MIDI設定
内で接続したiPhoneやiPadを有効にできない。
なお、iPhoneとmacはiTunesなどで同期させる必要はないので、itunesが立ち上がってiphoneと同期させようとしてもそこはキャンセルなどを押しておく。
なので、友達のiPhoneなどでも使うことができると思う。
(ちなみに私のmacはまだCatalinaにしていないので、iTunesなどの単語がここに出てきている)
接続したiPhoneの音をLogic Proに流し込む方法
ここまで手順を踏んでいれば、Logic Proのメニューから 環境設定 -> オーディオ
を開いて、入力デバイスから接続したiPhoneなどが選択できるようになっているので、それを選べばOK!
あとはレコーディングするだけ!
PaginationをReactで実装したサンプル (Bootstrap使用)
去年書いていたポストだが、下書きの状態のママになっていたため、公開することにした。
以下本文。
最近Reactで実装されたPaginationに触れる機会があったので、自分の理解を深める意味も込めて、自分なりに1から実装してみる。 といっても、スタイルはbootstrapを用いて、bootstrapのページ内にあるpaginationの実装を参考に実装してみる。
コードはgithubにアップしている
GitHub - shinshin86/pagination-sample-at-react-with-bootstrap
まずはcreate-react-appでセットアップ
以下、備忘録。
アプリの雛形は create-react-app
を用いる。
npx create-react-app pagination-sample-at-react-with-bootstrap
cd pagination-sample-at-react-with-bootstrap
ちなみにcreate-react-app
を使う際の個人的な好みなのだが、yarn start
した際にブラウザが勝手に立ち上がらないようにしたいので、下記の変更を行う。
https://shinshin86.hateblo.jp/entry/2019/09/28/084835
diff --git a/package.json b/package.json index 52a2f12..0730227 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "react-scripts": "3.1.2" }, "scripts": { - "start": "react-scripts start", + "start": "BROWSER=none react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject"
Bootstrapのセットアップと開発準備
public/index.html
にbootstrapを使うのに必要な設定を記述しておく
src/app.js
を一度下記のようにして実装準備を実施
import React from 'react'; import './App.css'; export default function() { return ( <div className="App"> <h1>Pagination Sample</h1> </div> ); }
Bootstrapを使ってReact内でpaginationを実装していく
参考にするのは下記のドキュメント
実際の実装はgithubに上がっているので、ここでは主要なソースコードだけ記述していく
Paginationサンプル(全データ取得版)
まずはテスト用のテストデータを返すサンプル。ユーザデータの配列を返す。
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec)); export const getTestData = async () => { await sleep(1000); return [ { id: 1, name: "Test1", isAdmin: true }, { id: 2, name: "Test2", isAdmin: false }, ・ ・ ・ { id: 100, name: "Test100", isAdmin: false } ]; };
つぎは src.App.js
表示判定の処理がもうちょっと良く出来そうだが、このあと書き換えるので、一旦はこれで。
Pagination
Component内でページネーションに関する実装は書かれている。
import React, { useState, useEffect } from "react"; import { getTestData } from "./test-data"; import "./App.css"; import Pagination from "./Pagination"; export default function() { const [isFetching, setIsFetching] = useState(false); const [userList, setUsetList] = useState([]); const [pageState, setPageState] = useState({ currentPage: 1, totalPage: 0, maxPerPage: 20 }); useEffect(() => { const fetchData = async () => { setIsFetching(true); await getTestData(); const data = await getTestData(); setUsetList(data); setIsFetching(false); const totalPage = Math.ceil(data.length / pageState.maxPerPage); setPageState(Object.assign({ ...pageState }, { totalPage })); }; fetchData(); }, []); if (isFetching) return <div>Loading...</div>; return ( <div className="App"> <h1>Pagination Sample</h1> <div className="container"> <table className="table"> <thead> <tr> <th scope="col">ID</th> <th scope="col">Name</th> <th scope="col">Admin</th> </tr> </thead> <tbody> {userList.map((user, index) => { const dataRangeMin = +pageState.maxPerPage * (pageState.currentPage - 1); const dataRangeMax = +pageState.maxPerPage * pageState.currentPage; return ( dataRangeMin <= index && dataRangeMax > index && ( <tr> <th scope="row">{user.id}</th> <td>{user.name}</td> <td>{user.isAdmin ? "Yes" : "No"}</td> </tr> ) ); })} </tbody> </table> <Pagination pageState={pageState} setPageState={setPageState} /> </div> </div> ); }
src/Pagination.js
。
import React from "react"; export default ({ pageState, setPageState }) => { const { currentPage, totalPage, maxPerPage } = pageState; return ( <nav aria-label="Page navigation"> <ul className="pagination"> <li className={+currentPage === 1 ? "page-item disabled" : "page-item"}> <a className="page-link" onClick={() => { const nextPageNumber = +currentPage - 1; setPageState( Object.assign({ ...pageState }, { currentPage: nextPageNumber }) ); }} > Previous </a> </li> {Array.from(new Array(totalPage)).map((v, i) => { const pageNumber = ++i; return ( <li className={ currentPage === pageNumber ? "page-item active" : "page-item" } > <a className="page-link" onClick={() => setPageState( Object.assign({ ...pageState }, { currentPage: i }) ) } > {pageNumber} </a> </li> ); })} <li className={ +currentPage === +totalPage ? "page-item disabled" : "page-item" } > <a className="page-link" onClick={() => { const nextPageNumber = +currentPage + 1; setPageState( Object.assign({ ...pageState }, { currentPage: nextPageNumber }) ); }} > Next </a> </li> </ul> </nav> ); };
この実装の場合、一度画面側にすべてのデータをFetchし、ローカルのstateに全て入れたあとに、それをフィルタリングすることでpagination的な動きを実現させている。
fetchしてくるデータ量がそこまで多くならない場合、この実装でもそれほどパフォーマンスには影響が出ないかと思う。
ただ、データ量が増えた場合、これではうまくいかなくなる。
選択したページに応じたデータの範囲のみを取得して表示、というのが安全だ。
というわけで、指定したページに応じた範囲のデータを取得し表示するサンプルを書いていく。
Paginationサンプル(指定したページに対応したデータのみを返す)
まずはテストデータを返すサンプルを、指定した範囲だけ返すような実装に書き換えた。
optionにoffsetを指定することで返すデータの範囲を指定できるようにしている。
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec)); export const getTestData = async (option = {}) => { const { limit = 20, offset = 0 } = option; await sleep(1000); const rangeMin = offset; const rangeMax = offset + limit; const userCount = dataList.length; const userList = dataList.filter(data => { if (rangeMin <= data.id && rangeMax > data.id) return data; }); return { userList, userCount }; }; const dataList = [ { id: 1, name: "Test1", isAdmin: true }, { id: 2, name: "Test2", isAdmin: false }, ・ ・ ・ { id: 100, name: "Test100", isAdmin: false } ];
次に src/App.js
handleClickPagination
という関数を用意して、paginationクリック時に再度データを取得するようにしている。
また、取得データに関するフィルター処理がなくなっており、コード自体も見やすくなった。
import React, { useState, useEffect } from "react"; import { getTestData } from "./test-data"; import "./App.css"; import Pagination from "./Pagination"; export default function() { const [isFetching, setIsFetching] = useState(false); const [userList, setUsetList] = useState([]); const [pageState, setPageState] = useState({ currentPage: 1, totalPage: 0, maxPerPage: 20 }); useEffect(() => { const fetchData = async () => { setIsFetching(true); // Fetch data await getTestData(); const offset = (pageState.currentPage - 1) * pageState.maxPerPage; const { userList, userCount } = await getTestData({ offset }); setUsetList(userList); setIsFetching(false); // Update pagination state const totalPage = Math.ceil(userCount / pageState.maxPerPage); setPageState(Object.assign({ ...pageState }, { totalPage })); }; fetchData(); }, []); const handleClickPagination = async nextPageNumber => { setIsFetching(true); // Fetch data const offset = (nextPageNumber - 1) * pageState.maxPerPage; const { userList, userCount } = await getTestData({ offset }); setUsetList(userList); setIsFetching(false); // Updata pagination state const totalPage = Math.ceil(userCount / pageState.maxPerPage); setPageState( Object.assign( { ...pageState }, { totalPage, currentPage: nextPageNumber } ) ); }; if (isFetching) return <div>Loading...</div>; return ( <div className="App"> <h1>Pagination Sample</h1> <div className="container"> <table className="table"> <thead> <tr> <th scope="col">ID</th> <th scope="col">Name</th> <th scope="col">Admin</th> </tr> </thead> <tbody> {userList.map(user => ( <tr> <th scope="row">{user.id}</th> <td>{user.name}</td> <td>{user.isAdmin ? "Yes" : "No"}</td> </tr> ))} </tbody> </table> <Pagination pageState={pageState} handleClickPagination={handleClickPagination} /> </div> </div> ); }
最後にPagination
。
こちらはあまり変わらない。基本的には指定したページを関数に入れるようにしたぐらいだろうか。
もうちょっと整えることできそうだが、そこらへんは一旦割愛する。
import React from "react"; export default ({ pageState, handleClickPagination }) => { const { currentPage, totalPage } = pageState; return ( <nav aria-label="Page navigation"> <ul className="pagination"> <li className={+currentPage === 1 ? "page-item disabled" : "page-item"}> <a className="page-link" onClick={() => { const nextPageNumber = +currentPage - 1; handleClickPagination(nextPageNumber); }} > Previous </a> </li> {Array.from(new Array(totalPage)).map((v, i) => { const pageNumber = ++i; return ( <li className={ currentPage === pageNumber ? "page-item active" : "page-item" } > <a className="page-link" onClick={() => handleClickPagination(i)}> {pageNumber} </a> </li> ); })} <li className={ +currentPage === +totalPage ? "page-item disabled" : "page-item" } > <a className="page-link" onClick={() => { const nextPageNumber = +currentPage + 1; handleClickPagination(nextPageNumber); }} > Next </a> </li> </ul> </nav> ); };
この実装の場合、ページを変更するたびにデータ取得処理が走り、指定した範囲のデータのみをstateで保持するようになる。
データ量が増えても、これであればパフォーマンスには影響はないかと思われる。
なお、これだと例えば2ページ目のURLを誰かに共有ということが出来ない。
ページネーションを行う際に、よくある ?page=2
的なqueryをURLにつけたいところだが、思いの外文章が長くなってしまったのでそこはまた別の機会に試そうと思う。
B/Wの新曲『E.O.S』と『A.D.P』がもうすぐ公開されます。
『E.O.S』と『A.D.P』という2曲の新曲
先日のB/Wのブログが更新されました。新曲リリースに関するお知らせです。
『E.O.S』と『A.D.P』という2曲で、どちらもMellow Yellowとは一味も二味も違った出来になっているかと思います。
配信開始されたらぜひぜひ聴いてみてください!
Mellow Yellowについて
また、Bandcampで無料公開していたMellowYellowにつきましても、iPhoneユーザーの方々からダウンロードの仕方が分かりづらいとのお声を頂き、新曲同様ストリーミングサービスにてリリースするはこびとなりました。
また、上記にあるようにMellow Yellowについても各種ストリーミングサービスにて配信される流れとなりました。
こちらも配信が開始された際は、ぜひぜひお使いのストリーミングサービスから聴いてみていただけたらと思います。
というわけで今年も、B/Wは少しずつ制作を進めていく予定です。
前にラジオでも話していたように今年はアルバムも完成させられたらと思っています。
今年もよろしくお願いします!
初期費用0円ながら、もうすこしで収益が1000円に到達するので報告(Googleアドセンス)
釣りっぽいタイトルな気もしますが、事実です。
去年の夏頃に、このはてなブログで無料版ながらGoogle AdSence広告を貼ることが出来ました。
つまり広告を貼るためにかけた初期費用は0円となります。
(もちろん、ブログを書く上での労力はかけていますが。まあ、普段から自分の関心のあることしか書いていないので、そちらは別に苦ではありません)
こちらのGoogle AdSenceですが、もうすこしで収益が1000円に到達する見込みです。
半年以上は経っていたような気がしますが、振り返ってみると広告の掲載を始めたのが8月頃だったので、半年経たずに収益1000円を達成できそうです。
これは嬉しいですね。
収益の内訳ですが、広告を実際にクリックされる方がちらほらいらっしゃるようで、クリックによる収益が大半となります。
こちらのブログのアクセスはたかが知れているので、広告の表示だけだと数日で1円が入るぐらいの感覚です。
というわけで、以上報告でした。
(1000円突破してから書こうとか思いつつも、たぶん忘れていそうな気がしたので、先に書いた次第)
Web Synthesizer Vを用いてBeaglesでMarmalade Jamという曲を作ってみた。
経緯
この記事で読んで気になっていたブラウザで使えるWeb Synthesizer V、今試しているけど、かなり良い。https://t.co/wwGSTRlQTu
— Yuki Shindo (@shinshin86) January 2, 2020
スレットで連なっている形でいくつか呟かせてもらっています。
そして実際に作ってみた曲はこちら。
VOCALOIDはまだまだ個人的に不慣れなので、ガッツリ歌もの系というわけではないのですが、作成したヴォーカルをエディットしつつ作りました。
ちなみに作成した音声データのダウンロード機能などはなさそうでしたので、sound flowerなどを使いつつ、QuickTime Playerにて音声をレコーディングしています。
下記の最新のやつをインストールして使っています。
Next.jsで作ったアプリでgoogle analyticsの設定を5分で行う
追記: Google analyticsに関するコードは"pages/_document.js"内に書いたほうが良いかもしれない
以前書いたこちらの記事だが、本文のとおりにやればGoogle Analytics側では正常に認識されるものの(Google Search Consoleでの確認も完了できる)、
どうやら正常にトラッキングできないケースが有ることが判明した。
実際に最近作成した自身のNext.jsでこの問題が発生したため、こちらのポストにも追記した次第である。
結論から書くと、下記のexampleのコードを参考にして、pages/_document.js
を作成し、設定することで正常にトラッキングできた。
https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_document.js
自身が実際に実装したコードも、ほぼほぼこれに倣っているような感じなので、ここにはコードは載せないが、 以上のような形となる。
そのため、以下の本文はもう参照しないでも良さそう。
一応何を書いたかは残しておく。
追記2: 一応自分が書いたコードも下記に貼っておくことにした。だいたいこんな感じ。
本文
Next.jsで書いたアプリにgoogle analyticsの設定を行うことにした。
google analyticsの設定方法については、ここで書くまでもないかもしれないが、下記の公式ドキュメントを参考にしている。
https://developers.google.com/analytics/devguides/collection/gtagjs/?hl=ja
Next.js(React)で設定する場合、react-ga
を使う方法や、自前で設定する方法などあるが、何故かどれもうまく出来なかった。
5分ぐらいで設定を終わらせるはずが、色々と試行錯誤していたら1時間もたっていてかなりショックを受けた。
そんなこんなでどうしたものかと悩んでいたときに下記のコメントを見つけた。
Adding GA script tag? · Issue #160 · vercel/next.js · GitHub
上で書かれているサンプルを参考にして、 Next.js内で<head>
を設定しているcomponent内に下記の2行を追加した。
<script async src={`https://www.googletagmanager.com/gtag/js?id=${trackingId}`} ></script> <script dangerouslySetInnerHTML={{ __html: `(function(){ window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '${trackingId}');})` }} />
trackingId
という変数にgoogle analyticsで設定するトラッキングIDを格納しておけばOK。
子供が生まれる直前の心音をサンプリングして曲を書いた。
年が変わる前に公開できてよかったと思った。
娘が生まれた日も、同じようによく晴れた11月だった。
その時の空気を思い出しながら、この曲を書いた。
今年、子供が生まれました。子供が生まれる直前の心音をサンプリングしたものを用いて曲を作りました。Beagles - November https://t.co/MABMPDrTg8
— Yuki Shindo (@shinshin86) December 31, 2019