[{"data":1,"prerenderedAt":317},["ShallowReactive",2],{"$ft6jtkd6xhw3c":3,"$f18kfs3th3tf2n":263},{"featured":4,"latest":129,"categories":227},[5,14,27,37,48,56,66,76,86,96,106,114,122],{"slug":6,"title":7,"date":8,"excerpt":9,"image":10,"categories":11},"custom-database-tables","Custom DataBase Tables","2015-11-24T02:29:34","You can create the new own table freely in the your WordPress database via this plugin. Then, you can make the management of table or (as view or entry or edit) data in a simple user interface.\\nAlso,","\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fcdbt-overview.png",[12],{"slug":13,"name":7},"cdbt",{"slug":15,"title":16,"date":17,"excerpt":18,"image":19,"categories":20},"10_php_tips_for_developers","PHP開発者が心得ておくべき10の鉄則","2016-01-11T18:38:09","PHPだけに限った話ではないが、プログラミングを行うに当たって、心得て、準備しておくと失敗が劇的に減る事柄をまとめてある良い記事を見つけたので、私なりの解釈で意訳しつつ、経験則を踏まえてあらためてまとめてみた。 オリジナ…","\u002Fassets\u002Fuploads\u002F2016\u002F01\u002Feyecatch-php-10-tips.jpg",[21,24],{"slug":22,"name":23},"column","コラム",{"slug":25,"name":26},"development","開発関連",{"slug":28,"title":29,"date":30,"excerpt":31,"image":32,"categories":33},"jquery-timeline-v1","2種類の横型タイムラインを簡単に作成できる「jQuery.Timeline」をリリース","2017-05-29T14:55:46","現在開発しているサービスで利用するべく、横型タイムラインを生成できるjQueryプラグインを自作したので、そこだけ単独でリリースしてみた。 ソースコード等はGitHubの方にリリースしてあるので、興味のある方は、そち…","\u002Fassets\u002Fuploads\u002F2017\u002F05\u002Fjquery_timeline_image.png",[34],{"slug":35,"name":36},"jqtl","jQuery.Timeline",{"slug":38,"title":39,"date":40,"excerpt":41,"image":42,"categories":43},"optimize-browser-cache-of-static-resources","更新されたJS、CSS、画像のみブラウザキャッシュを破棄して読み込ませる","2018-01-31T15:47:47","WEBサービスの保守や開発をやっていると、JavaScriptやスタイルシート、画像などの静的リソースを更新した際、しばしば「確認したけど、更新されてないよ」とか云われて、「ブラウザのキャッシュを消してからもう一度見て…",null,[44,47],{"slug":45,"name":46},"codes","コード集",{"slug":25,"name":26},{"slug":49,"title":50,"date":51,"excerpt":52,"image":53,"categories":54},"jquery-timeline","jQuery.Timeline version2 – full documentation","2019-03-04T20:40:48","Plugin Overview The jQuery.Timeline plugin provides you two types of the horizontal timeline. You can create a…","\u002Fassets\u002Fuploads\u002F2019\u002F03\u002Fjquery.timeline_v2.jpg",[55],{"slug":35,"name":36},{"slug":57,"title":58,"date":59,"excerpt":60,"image":61,"categories":62},"released-the-sloth","Released the Sloth of mobile-first CSS micro framework!","2019-04-16T18:04:25","I released the “Sloth” that is mobile-first CSS micro framework. I have long used frontend framewo…","\u002Fassets\u002Fuploads\u002F2019\u002F04\u002Fsloth_doc_head.png",[63],{"slug":64,"name":65},"sloth","Sloth",{"slug":67,"title":68,"date":69,"excerpt":70,"image":71,"categories":72},"challenge-to-conceal-the-wordpress-site","WordPressサイトを徹底的に秘匿化する","2020-02-02T23:59:58","私は自分の個人サイトをはじめ、仕事でもWordPressサイトを運用している。WordPressは気軽にサイトを立ち上げられてカスタマイズも簡単な、素晴らしいオープンソースなのだが、世界中で使われまくっているその知名度…","\u002Fassets\u002Fuploads\u002F2020\u002F02\u002Fshutterstock_1878005929.jpg",[73],{"slug":74,"name":75},"wordpress","WordPress関連",{"slug":77,"title":78,"date":79,"excerpt":80,"image":81,"categories":82},"what-is-forkor","Made a shortened URL app called Forkor","2020-07-07T22:27:01","What’s Forkor? Forkor is a service that provides a shortened URL feature that allows you to redirect any…","\u002Fassets\u002Fuploads\u002F2020\u002F07\u002Fforkor.png",[83],{"slug":84,"name":85},"forkor","Forkor",{"slug":87,"title":88,"date":89,"excerpt":90,"image":91,"categories":92},"manual-about-svg-japan","インタラクティブな日本地図を生成するJSプラグイン「SVG Japan」","2020-11-16T21:19:58","各都道府県をそれぞれ選択・クリック可能なインタラクティブな日本地図を生成するネイティブJavaScript建てのプラグイン「SVG Japan」を作ったので、その紹介と使い方をまとめておく。ちなみにソースコードはgit…","\u002Fassets\u002Fuploads\u002F2020\u002F11\u002Fsvg-japan.png",[93],{"slug":94,"name":95},"svg-japan","SVG Japan",{"slug":97,"title":98,"date":99,"excerpt":100,"image":101,"categories":102},"wp-ignitor-plugin-to-conceal-wordpress-site","WordPressサイトを秘匿化するプラグイン「WP Ignitor」","2021-01-19T15:28:21","以前「WordPressサイトを徹底的に秘匿化する」という記事で、WordPress建てのサイトを秘匿化する方法を取り上げたのだが、あれをサイト構築時に毎度実施するとなるととても労力が必要であった。そこで、もっとお手軽…","\u002Fassets\u002Fuploads\u002F2021\u002F01\u002Fbanner-1554x500-1.png",[103],{"slug":104,"name":105},"wp-ignitor","WPイグナイタ",{"slug":107,"title":108,"date":109,"excerpt":110,"image":111,"categories":112},"tastewp","無料でWordPressサイトを複数作成できるWEBサービス「TasteWP」","2021-03-25T20:21:59","私が日本語翻訳に協力しているWEBサービス「TasteWP」について紹介しようと思う。 https:\u002F\u002Ftastewp.com このサービス、サインアップすることなく無料で自分用のWordPressサイトを作れるとい…","\u002Fassets\u002Fuploads\u002F2021\u002F03\u002FTasteWP_screenshot.png",[113],{"slug":74,"name":75},{"slug":115,"title":116,"date":117,"excerpt":118,"image":119,"categories":120},"monster-hunter-rise-skill-simulator","モンハンライズのスキルシミュレータを作ってみた！","2021-06-28T20:24:52","コラムで連載していたNintendo Switch版『モンスターハンターライズ』のスキルシミュレータ開発がやっと一段落して一通り完了した。いやぁ、記事書きながら同時並行で開発すると思っていた以上に時間がかかるもんだなぁ…","\u002Fassets\u002Fuploads\u002F2021\u002F06\u002Fmhrss_v100.png",[121],{"slug":25,"name":26},{"slug":123,"title":124,"date":125,"excerpt":126,"image":42,"categories":127},"comparison-of-javascript-date-libraries","JavaScriptの日時ライブラリを比較してみた","2021-07-28T22:39:19","ネイティブJavaScriptで日時を取り扱う場合、ビルトインされているDateオブジェクトを使うことになるのだが、このDateオブジェクトは取り扱いにクセが多く、直感的に日時を操作できない点でも有名である。そこで、専…",[128],{"slug":25,"name":26},[130,141,153,165,175,184,192,195,198,206,213,220],{"slug":131,"title":132,"date":133,"excerpt":134,"image":135,"categories":136},"pulllog_launched","ガチャ履歴を記録・分析できるWebサービス「PullLog」","2025-08-22T13:05:30","このたび、新しい個人開発サービスとして 「PullLog（プルログ）」 をリリースした。 URLはこちら https:\u002F\u002Fpulllog.net PullLogとは？ PullLogは、ソーシャルゲームのガチャ履歴を記録…","\u002Fassets\u002Fuploads\u002F2025\u002F08\u002Fpulllog_stats_jp.png",[137,140],{"slug":138,"name":139},"industries","プロダクト",{"slug":25,"name":26},{"slug":142,"title":143,"date":144,"excerpt":145,"image":146,"categories":147},"mockapi-php-openapi-schema-generation","モックAPIのレスポンスから OpenAPI 3.0 スキーマを自動生成するPHPツール","2025-04-17T09:31:52","私自身がそうなのですが、OpenAPI仕様書を毎回手作業で書いていて「面倒だな」と思ったことはありませんか？ そんな（私と）あなたにぴったりのツールがあります。 レスポンスの例さえ用意すれば、OpenAPI 3.0 スキ…","\u002Fassets\u002Fuploads\u002F2025\u002F04\u002Fswaggerui-preview.png",[148,151,152],{"slug":149,"name":150},"mockapi-php","MockAPI-PHP",{"slug":138,"name":139},{"slug":25,"name":26},{"slug":154,"title":155,"date":156,"excerpt":157,"image":158,"categories":159},"ambient_playlist_customize","Ambientでメメントモリのラメントプレイヤーを作る","2023-11-30T17:32:39","「Ambient」の最新バージョン 1.2.0で実装した「疑似フェーダー」機能を使って、ソーシャルゲーム「メメントモリ」のYouTube公式チャンネルで公開されているMVを集約したラメント専用プレイヤーを作ってみた。 ラ…","\u002Fassets\u002Fuploads\u002F2023\u002F11\u002Fambient_mememori_1.png",[160,163,164],{"slug":161,"name":162},"ambient","Ambient",{"slug":138,"name":139},{"slug":25,"name":26},{"slug":166,"title":167,"date":168,"excerpt":169,"image":170,"categories":171},"released_ambient_demo_version","Ambientメディアプレイヤーのクラウド版デモを公開","2023-11-22T13:47:36","つい先日「Ambient」の最新バージョン 1.1.0をリリースして、それに合わせてクラウド版デモサイトも公開してみた。 なお、クラウド版デモでローカルのホストコンピュータのメディアを再生するには、そのメディアファイルも…","\u002Fassets\u002Fuploads\u002F2023\u002F10\u002FAmbientMediaPlayer-typologo.png",[172,173,174],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":176,"title":177,"date":178,"excerpt":179,"image":170,"categories":180},"ambient-media-player","YouTubeと自分のPC内メディアを同時に再生できるメディアプレイヤーを作ってみた","2023-10-20T00:00:25","私はよくPCで何か作業をするときには音楽を垂れ流していることが多い。 そういう時にかける曲は、手持ちのアルバムCD等からPCに取り込んだ音源だったり、さらにはYouTubeの動画だったりとメディアや再生環境がバラバラだ。…",[181,182,183],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":185,"title":186,"date":187,"excerpt":188,"image":189,"categories":190},"what-is-the-sunorhc","Sunorhc is a date-time library for JavaScript","2021-08-25T22:55:55","Sunorhc is a lightweight library for handling dates and times for JavaScript. The library wraps a native JavaS…","\u002Fassets\u002Fuploads\u002F2021\u002F08\u002Fshutterstock_1091212919_resized.jpg",[191],{"slug":25,"name":26},{"slug":123,"title":124,"date":125,"excerpt":126,"image":42,"categories":193},[194],{"slug":25,"name":26},{"slug":115,"title":116,"date":117,"excerpt":118,"image":119,"categories":196},[197],{"slug":25,"name":26},{"slug":199,"title":200,"date":201,"excerpt":202,"image":203,"categories":204},"mhrise-skill-simulator-creation-chapter-12","モンスターハンターライズのスキルシミュレータを作ってみる！ 第12回","2021-06-21T13:11:46","今回は「マイセット登録」と護石データの「エクスポート／インポート」機能の追加をしていく。折り良く（悪く？）「FF7リメイク・インターグレード」や「FORTNITEシーズン7」が出たこともあって、そっちをプレイしてたらこ…","\u002Fassets\u002Fuploads\u002F2021\u002F04\u002Fb6ca09e9a7f6faf27641f62dabe64c6ff97b4f326aa478379e3c112aa28eb9ab.jpg",[205],{"slug":22,"name":23},{"slug":207,"title":208,"date":209,"excerpt":210,"image":203,"categories":211},"mhrise-skill-simulator-creation-chapter-11","モンスターハンターライズのスキルシミュレータを作ってみる！ 第11回","2021-06-07T14:52:31","さて、今回はユーザー個別データの管理部分を開発していく予定だが、まずその前にやっておくことがある。 新スキル「風雷合一」に対応する Ver.3.0の大型無料アップデートで追加された新スキルに「風雷合一」というのがある…",[212],{"slug":22,"name":23},{"slug":214,"title":215,"date":216,"excerpt":217,"image":203,"categories":218},"mhrise-skill-simulator-creation-chapter-10","モンスターハンターライズのスキルシミュレータを作ってみる！ 第10回","2021-06-02T00:29:10","今回は、護石管理画面の作成だ。この護石管理では、ユーザーごとに護石の登録を行う機能と、登録した護石を削除する機能を持つ仕様になる。この画面から登録した護石データはデータベースに格納するので、フロントエンド側からのリクエス…",[219],{"slug":22,"name":23},{"slug":221,"title":222,"date":223,"excerpt":224,"image":203,"categories":225},"mhrise-skill-simulator-creation-chapter-9","モンスターハンターライズのスキルシミュレータを作ってみる！ 第9回","2021-05-22T23:56:27","さて、今回はVuexによるデータ・キャッシュの実装だ。一度データベースから読み込んだデータをフロントエンド側で再利用可能なストアに格納することで、データベースへの接続回数を減らしてシステム負荷を下げるとともに、UX的な…",[226],{"slug":22,"name":23},[228,230,232,236,238,239,240,241,242,244,247,248,250,252,254,258,261],{"slug":161,"name":162,"count":229},3,{"slug":13,"name":7,"count":231},7,{"slug":233,"name":234,"count":235},"csnp","Custom Sticky Notes",2,{"slug":84,"name":85,"count":237},1,{"slug":35,"name":36,"count":229},{"slug":149,"name":150,"count":237},{"slug":64,"name":65,"count":237},{"slug":94,"name":95,"count":237},{"slug":74,"name":75,"count":243},37,{"slug":245,"name":246,"count":237},"wpqt","WP Qiita",{"slug":104,"name":105,"count":237},{"slug":22,"name":23,"count":249},29,{"slug":45,"name":46,"count":251},16,{"slug":138,"name":139,"count":253},5,{"slug":255,"name":256,"count":257},"lifelog","ライフログ",64,{"slug":259,"name":260,"count":235},"uncategorized","未分類",{"slug":25,"name":26,"count":262},45,{"type":264,"post":265},"post",{"slug":176,"title":177,"date":178,"excerpt":179,"image":170,"categories":266,"modified":270,"html":271,"tags":272,"related":286,"prev":309,"next":312},[267,268,269],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},"2023-10-20T01:48:35","\u003Cp>私はよくPCで何か作業をするときには音楽を垂れ流していることが多い。\u003Cbr \u002F>\nそういう時にかける曲は、手持ちのアルバムCD等からPCに取り込んだ音源だったり、さらにはYouTubeの動画だったりとメディアや再生環境がバラバラだ。なので、PC内の音源であればPCにインストール済みのメディア・プレイヤーで再生し、YouTubeの動画であればブラウザでYouTubeにアクセスして聴いていた次第。ま、普通のことなんだが、でもこれだとPCの音源とYouTubeの動画のお気に入りはそれぞれ別々に管理することになるわけで、これがちょいと難儀だなぁ……と不満が募っていたのだ。\u003C\u002Fp>\n\u003Cp>どっちのメディアだろうが一元的に管理できて、ついでにプレイヤーを切り替えなくても再生までできるとイイよなぁ……。\u003C\u002Fp>\n\u003Cp>おそらく探せば、そんな要求を満たしてくれるソリューションもあるのかもしれないが、探すの面倒だし、無料で利用できない場合も考えられるので、何とかならんもんかと思っていたら、ひらめいた。\u003C\u002Fp>\n\u003Cp>YouTubeのIframe埋め込み型のプレイヤーとHTMLの\u003Ccode><audio>\u003C\u002Fcode>や\u003Ccode><video>\u003C\u002Fcode>といったメディアタグを同居させたWEBアプリケーションなら、YouTubeの動画も自分のPC内のメディアファイルも同時に再生できるはずじゃね？\u003C\u002Fp>\n\u003Cp>──ちゅーわけで、さっそくWEBブラウザ用のYouTube&ローカルメディア両用プレイヤーを作ってみた。\u003C\u002Fp>\n\u003Cp>その名も「Ambient」。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2023\u002F10\u002FAmbient_Media_Player_03.jpg\" alt=\"Ambient Media Player\" \u002F>\u003C\u002Fp>\n\u003Cp>コア処理については数日でサクッと作れたわりに、アイコンやロゴ、NO IMAGEの画像とか作ってたら何気に時間がかかってしまった……こういうところに凝ってしまってリリースが遅れたりするのはいつものことだ（笑）\u003Cbr \u002F>\nでもまぁ、個人的にメディアプレイヤーとしてとても満足のいく出来になった。\u003C\u002Fp>\n\u003Cp>今まで趣味の個人開発で色々と作ってきた中でも、かつてない傑作じゃないだろうか……！\u003C\u002Fp>\n\u003Cp>──と、まぁ自画自賛はおいておいて、本記事では、「Ambient」メディアプレイヤーのドキュメントも兼ねた、基本的な使い方や機能説明などを紹介していこうかと（この記事をベースに公式なドキュメントを作ろうかと思っているのよね）。\u003C\u002Fp>\n\u003Ch2>動作環境について\u003C\u002Fh2>\n\u003Cp>基本的に「Ambient」はWEBアプリケーションなので、WEBブラウザでアクセスするだけで利用可能だ。\u003Cbr \u002F>\nそして「Ambient」が真価を発するのは、自分のPC上などのローカルPC環境にインストールした時で、その時はYouTubeメディアもPC上のメディアもどちらも再生できるハイブリッドなメディアプレイヤーとして使用できるようになる。そもそも「Ambient」はデプロイされた環境上の相対パスによってローカルのメディアファイルを探すため、インストールした環境に存在しないメディアファイルを再生できないのだ。一方でYouTubeメディアの場合は、「YouTube Iframe Player API」を使ってURL経由でメディアを参照できるので特にインストール環境に左右されない。\u003Cbr \u002F>\nそんなわけで、そのうちデモ用にクラウド版を公開しようかとも思っているものの、そちらのクラウド版ではYouTubeのメディアしか再生できない出来損ないのメディアプレイヤーになってしまうだろう。\u003C\u002Fp>\n\u003Cp>さて、本題の「Ambient」を動かすには、PHPの実行環境とローカルPC上にWEBブラウザでアクセスできるようにするWEBサーバ（Apache）環境の準備が必要になる。\u003Cbr \u002F>\nまぁ、Windowsマシンなら「 \u003Ca href=\"https:\u002F\u002Fwww.apachefriends.org\u002Fjp\u002Findex.html\">XAMPP\u003C\u002Fa> 」を、Macなら「 \u003Ca href=\"https:\u002F\u002Fwww.mamp.info\u002F\">MAMP\u003C\u002Fa> 」をインストールしてしまうのが一番お手軽だろう。知識があれば、dockerやVirtualBox等で仮想サーバを立ててしまっても構わないし、WEBサーバもApacheでなくNginxでも利用可能だ（URLをRewriteする設定さえ行えば動作する）。\u003C\u002Fp>\n\u003Cp>PHPの動作バージョンだが、PHP7.4以降なら問題なく動くだろう。私はPHP8.2.4の環境で「Ambient」を開発しているが、8.x以降のみでしか動作しないコードは含めていないので。\u003Cbr \u002F>\nまた、インストールパッケージのJavaScriptやCSSはデプロイ済みなので、特に最新のブラウザで動作しないということはないはずだ。\u003C\u002Fp>\n\u003Ch2>インストールの方法\u003C\u002Fh2>\n\u003Cp>「Ambient」のインストールは\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fka215\u002Fambient\">githubのリポジトリ\u003C\u002Fa>からパッケージリソースを取得するだけだ。\u003Cbr \u002F>\nコマンドラインからだと、インストールするパス（ドキュメントルート直下等）で、\u003C\u002Fp>\n\u003Cpre>\u003Ccode>git clone https:\u002F\u002Fgithub.com\u002Fka215\u002Fambient.git ambient\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>もしくは、\u003C\u002Fp>\n\u003Cpre>\u003Ccode>git clone git@github.com:ka215\u002Fambient.git ambient\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>──を実行するだけだ。これで\u003Ccode>ambient\u003C\u002Fcode>ディレクトリが作られて、その下にインストールされる。\u003Cbr \u002F>\nドキュメントルート直下に上記コマンドでインストールした場合、ブラウザでURL欄に\u003Ccode>localhost\u002Fambient\u003C\u002Fcode>とか\u003Ccode>localhost:8888\u002Fambient\u003C\u002Fcode>等と入力すれば起動するはずだ。もし仮想ホスト名を指定している場合は\u003Ccode>http:\u002F\u002F{ホスト名}\u002Fambient\u003C\u002Fcode>等でアクセスできるようになるだろう。\u003C\u002Fp>\n\u003Cp>また、\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fka215\u002Fambient\">Ambientのgithubリポジトリ\u003C\u002Fa>からZIPファイルをダウンロードして、それをインストールしたい場所へ展開することでも導入できる。\u003C\u002Fp>\n\u003Ch2>プレイリストを作る\u003C\u002Fh2>\n\u003Cp>次に「Ambient」で再生するメディアのプレイリストを作る必要がある。\u003Cbr \u002F>\n初期インストール時には空のプレイリストがバンドルされているので、これをひな形にして自分用のプレイリストを作って行くことになる。\u003Cbr \u002F>\nプレイリストは「Ambient」のインストールディレクトリ内の\u003Ccode>assets\u003C\u002Fcode>フォルダ内に入っている。複数作ることも可能なので、ひな形の\u003Ccode>assets\u002FPlayList.json\u003C\u002Fcode>をコピーして使うのが良いだろう。\u003Cbr \u002F>\nプレイリストの書式はJSON形式で、JSON Schemaは \u003Ca href=\"\u002Fschemas\u002Fambient-playlist.json\">https:\u002F\u002Fka2.org\u002Fschemas\u002Fambient-playlist.json\u003C\u002Fa> で確認できる。\u003C\u002Fp>\n\u003Cp>スキーマ定義だけだと分かりづらいので、実際のプレイリストの一例を下記に掲載しておこう。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"YouTube お気に入り\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"title\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"Thunder\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"artist\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"Imagine Dragons\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"videoid\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"fKopy74weus\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"start\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"21\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"title\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"Numb\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"artist\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"Linkin Park\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"videoid\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"kXYiU_JCYtU\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"title\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"Unity\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"artist\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"TheFatRat\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"videoid\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"n8X9_MgEdCg\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"ローカルPCのミュージック\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"disc\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"track\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"file\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"グランディアのテーマ.mp3\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"title\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"グランディアのテーマ『忘れられない冒険へ』\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"desc\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"ベスト・オブ・グランディア Disc1\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"artist\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"岩垂徳行\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"image\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"The_Best_of_GRANDIA.jpg\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"disc\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"track\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"file\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"幻想の世界へ.mp3\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"title\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"プロローグ ～幻想の世界へ\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"desc\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"タイトルBGM\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"artist\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"幻想水滸伝 オリジナル・ゲーム・サントラ DISC1\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"image\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"gensousuikoden.webp\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"options\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        \"autoplay\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">:   \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        \"random\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">:     \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        \"seek\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">:       \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        \"dark\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">:       \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">false\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>プレイリストの設定内容を簡単に説明しておく。\u003Cbr \u002F>\nまず、プレイリストのJSONデータのルートオブジェクトのプロパティは「カテゴリー名」として自由に命名できる。\u003Cbr \u002F>\nただしプロパティ名が「options」の場合のみ、「Ambient」の初期設定として取り扱われるので注意が必要だ（この「options」設定はなくても構わない）。\u003Cbr \u002F>\nそして、カテゴリープロパティの値として、再生メディアを配列型で記載していくことになる。\u003Cbr \u002F>\nメディアデータの構造は下記のようになっている。\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth align=\"center\">プロパティ名\u003C\u002Fth>\n\u003Cth align=\"center\">値の型\u003C\u002Fth>\n\u003Cth align=\"left\">値について\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ccode>title\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>?string\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">再生メディアのタイトル名。これが指定されていないか、もしくは空文字の場合、そのメディアは無効なデータとしてAmbient側で再生できない\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ccode>file\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>?string\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">再生メディアのファイルパス。Ambientインストールディレクトリ下の\u003Ccode>assets\u002Fmedia\u003C\u002Fcode>フォルダからの相対パスで指定する。指定パスにメディアファイルがない場合は再生されない\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ccode>videoid\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>?string\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">再生メディアのYouTubeでのVIDEO ID（YouTubeの動画URLのv=～で表されるパラメータ値）。この\u003Ccode>videoid\u003C\u002Fcode>と\u003Ccode>file\u003C\u002Fcode>の両方が定義されたメディアについては\u003Ccode>videoid\u003C\u002Fcode>で指定されたYouTubeの動画再生が優先される\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ccode>desc\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>?string\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">再生メディアの説明やサブタイトルなど。Ambient側のキャプション欄などの出力に利用される\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ccode>artist\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>?string\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">再生メディアのアーティスト名。Ambient側のキャプション欄などの出力に利用される\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ccode>image\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>?string\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">再生メディアのサムネイル画像のファイルパス。Ambientインストールディレクトリ下の\u003Ccode>assets\u002Fimages\u003C\u002Fcode>フォルダからの相対パスで指定する。そのメディアがYouTube動画の場合はYouTube側からサムネイルを自動で取得するので、ローカルのメディアファイル用のサムネイル指定である。指定パスに画像ファイルがない場合はサムネイルは表示されない\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ccode>start\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>?string ?integer\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">メディアの再生開始時間（秒）。オプションにて「シーク再生」が有効になっている場合、これが指定されているメディアは指定の秒数までシークしてから再生が開始される。秒数の整数値、もしくは\u003Ccode>HH:MM:SS\u003C\u002Fcode>の形式で指定できる\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ccode>end\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>?string ?integer\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">メディアの再生終了時間（秒）。オプションにて「シーク再生」が有効になっている場合、これが指定されているメディアは再生時間が指定の秒数に達した時点で再生が終了する。秒数の整数値、もしくは\u003Ccode>HH:MM:SS\u003C\u002Fcode>の形式で指定できる\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>上記以外にもプロパティは自由に追加できるので、自分用の管理項目等をプロパティ化しておくこともできる。\u003C\u002Fp>\n\u003Cp>次にAmbient用の初期設定用の「options」プロパティのデータ構造を説明しておく。\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth align=\"center\">プロパティ名\u003C\u002Fth>\n\u003Cth align=\"center\">値の型\u003C\u002Fth>\n\u003Cth align=\"center\">初期値\u003C\u002Fth>\n\u003Cth align=\"left\">値について\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ccode>autoplay\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>?boolean\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>true\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">自動再生用のフラグ。現在は固定値で\u003Ccode>true\u003C\u002Fcode>のみが有効\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ccode>random\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>?boolean\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>false\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">ランダム再生をするかどうかのフラグ。Ambient側の設定で都度変更可能\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ccode>seek\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>?boolean\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>false\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">シーク再生を有効化するかどうか。Ambient側の設定で都度変更可能\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ccode>dark\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>?boolean\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>false\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">AmbientのUIをダークモードにするかどうか。Ambient側の設定で都度変更可能\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ccode>background\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>?string\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">“\u003C\u002Ftd>\n\u003Ctd align=\"left\">AmbientのUIに背景画像を表示する場合の画像ファイルパス。Ambientインストールディレクトリ下の\u003Ccode>assets\u002Fimages\u003C\u002Fcode>フォルダからの相対パスで指定する\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ccode>caption\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>?string\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>%artist% - %title% - %desc%\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">Ambientのキャプション欄に出力するメディアデータの書式フォーマット。\u003Ccode>%{プロパティ名}%\u003C\u002Fcode>のプレースホルダーを使うことでメディアデータに定義したプロパティ値を参照できる\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ccode>playlist\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>?string\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ccode>%artist% - %title%\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">Ambientのプレイリスト一覧（左側ドロワー）に表示されるメディアデータの書式フォーマット。\u003Ccode>%{プロパティ名}%\u003C\u002Fcode>のプレースホルダーを使うことでメディアデータに定義したプロパティ値を参照できる\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>「options」プロパティについては初期値の変更がなければ、省略してしまっても問題ない。\u003C\u002Fp>\n\u003Ch2>再生メディアのアセットを準備する\u003C\u002Fh2>\n\u003Cp>プレイリストに設定したメディアがすべてYouTubeのメディアであれば、このフェーズはスキップして構わない。\u003C\u002Fp>\n\u003Cp>もしローカルPCのメディアを再生対象とする場合、再生メディアや画像ファイル等をAmbientのアセット・ディレクトリ内に配置する必要がある。\u003Cbr \u002F>\nアセットファイルの設置手順は下記の通りだ。\u003C\u002Fp>\n\u003Cul>\n\u003Cli>再生メディアファイル: Ambientのインストールディレクトリ直下にある\u003Ccode>assets\u002Fmedia\u003C\u002Fcode>フォルダ内\u003C\u002Fli>\n\u003Cli>各種画像ファイル: Ambientのインストールディレクトリ直下にある\u003Ccode>assets\u002Fimages\u003C\u002Fcode>フォルダ内\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>しかしながら、ローカルPCのメディアファイルを移動させるのは面倒なうえに他のメディアプレイヤーの参照先と齟齬が出る。かといって、コピーだと無駄にPCのストレージ領域を圧迫してしまう。なので、元々メディアファイルが入っているフォルダへのシンボリックリンクを\u003Ccode>assets\u002Fmedia\u003C\u002Fcode>内に作成するのがオススメだ。\u003Cbr \u002F>\nちなみにAmbientはショートカットには対応していないので、シンボリックリンクにする必要がある。\u003Cbr \u002F>\nで、シンボリックリンクの作成例は下記の通りだ。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Windowsの場合\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Col>\n\u003Cli>ExplorerにてAmbientのメディアフォルダへ移動して、アドレス欄に\u003Ccode>cmd\u003C\u002Fcode>と入力してEnter。\u003C\u002Fli>\n\u003Cli>コマンドプロンプトが起動するので、\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cpre>\u003Ccode>mklink \u002FD nzk \"C:\\Users\\ユーザー名\\Music\\BEST OF VOCAL WORKS [nZk]\"\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>──のように、既にあるローカルPC内のメディアが格納されているフォルダへのパスをシンボリックリンクとして登録する（パス中のフォルダ名に半角空白が含まれている場合はリンクパス全体をクォーテーションで括ればOK）。\u003Cbr \u002F>\n3. プレイリストJSONのメディアデータの\u003Ccode>file\u003C\u002Fcode>プロパティのファイルパス指定を\u003Ccode>nzk\u002Ffriends.mp4\u003C\u002Fcode>のように作成したシンボリックリンク経由のパスにすれば完了だ。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Mac(Linux)の場合\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Col>\n\u003Cli>ターミナル等のコマンドライン・ツールを起動して、\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cpre>\u003Ccode>cd \u002FApplications\u002FMAMP\u002Fhtdocs\u002Fambient\u002Fassets\u002Fmedia\nln -s \u002FUsers\u002Fユーザー名\u002FMusic\u002FBEST\\ OF\\ VOCAL\\ WORKS\\ [nZk] nzk\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>──のように、Ambientのメディアフォルダへ移動してから既にあるローカルPC内のメディアが格納されているフォルダへのパスをシンボリックリンクとして登録する（パス中のフォルダ名に半角空白が含まれている場合はバックスラッシュでエスケープすればOK）。\u003Cbr \u002F>\n2. プレイリストJSONのメディアデータの\u003Ccode>file\u003C\u002Fcode>プロパティのファイルパス指定を\u003Ccode>nzk\u002Ffriends.aac\u003C\u002Fcode>のように作成したシンボリックリンク経由のパスにすれば完了だ。\u003C\u002Fp>\n\u003Cp>なお、このシンボリックリンク経由で既存のメディアディレクトリをAmbient側にマウントさせる機能は、近いうちにAmbient側のオプションメニューに追加する予定だ（いちいちコマンド発行するのが面倒なので……）。\u003C\u002Fp>\n\u003Ch2>Ambient側にプレイリストを読み込む\u003C\u002Fh2>\n\u003Cp>Ambientは起動時に\u003Ccode>assets\u003C\u002Fcode>内にあるJSONファイルを検索して、有効なプレイリストを自動で読み込んでくれる。\u003Cbr \u002F>\nプレイリストを更新した際などは、Ambientを再起動（下部メニューから「Refresh」を実行）すればプレイリストが再読み込みされる。\u003C\u002Fp>\n\u003Cp>あとは「Settings」メニュー（右ドロワー）を開いて、読み込みたいプレイリストを選択するだけだ。\u003C\u002Fp>\n\u003Cp>再生するプレイリストを選択した後は、プレイリスト内にあるカテゴリーを選ぶことができるようになる。デフォルトではすべてのカテゴリーに属するメディアが再生対象になっているが、カテゴリー毎に再生メディアを絞り込むこともできる。\u003C\u002Fp>\n\u003Ch2>Ambientでのメディアの再生\u003C\u002Fh2>\n\u003Cp>プレイリストが読み込まれると、下部メニューの再生ボタンが有効になるので、それをクリックすれば再生が開始される。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2023\u002F10\u002FAmbient_Media_Player_UI.jpg\" alt=\"Ambient UI\" \u002F>\u003C\u002Fp>\n\u003Cp>① 基本的には下部メニューの再生\u002F一時停止ボタンでメディアの再生を制御できる。もちろん、埋め込まれるYouTubeプレイヤーやHTMLメディアプレイヤーの再生コントロールでも制御可能で、そちら側での制御は下部メニューの再生\u002F一時停止ボタンに同期している。\u003C\u002Fp>\n\u003Cp>② プレイリスト一覧（左ドロワー）を開いて再生したいメディアをクリックすることで、任意のメディアを再生できる。\u003C\u002Fp>\n\u003Cp>③ メディアのサムネイルが表示されている左右のアローボタンで直前に再生していたメディアや次に再生する候補のメディアを指定することも可能だ。\u003C\u002Fp>\n\u003Ch2>対応状況\u003C\u002Fh2>\n\u003Cp>2023年10月20日時点での、ブラウザと再生メディアファイルについての対応状況は以下の通りである。\u003C\u002Fp>\n\u003Ch3>ブラウザ\u003C\u002Fh3>\n\u003Cp>「Ambient」の動作確認済みのブラウザ:\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth align=\"center\">Chrome(>=^118)\u003C\u002Fth>\n\u003Cth align=\"center\">Firefox(>=^118)\u003C\u002Fth>\n\u003Cth align=\"center\">Edge(>=^118)\u003C\u002Fth>\n\u003Cth align=\"center\">Safari(>=^16)\u003C\u002Fth>\n\u003Cth align=\"center\">Opera(>=^103)\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd align=\"center\">Ok\u003C\u002Ftd>\n\u003Ctd align=\"center\">Ok\u003C\u002Ftd>\n\u003Ctd align=\"center\">Ok\u003C\u002Ftd>\n\u003Ctd align=\"center\">Ok\u003C\u002Ftd>\n\u003Ctd align=\"center\">Ok\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>HTML5の\u003Ccode><audio>\u003C\u002Fcode>と\u003Ccode><video>\u003C\u002Fcode>タグに対応していない古いブラウザや、JavaScriptが有効になっていないブラウザ環境では動作しない。\u003C\u002Fp>\n\u003Ch3>メディアファイル形式\u003C\u002Fh3>\n\u003Cp>「Ambient」では、公開されているYouTubeの動画であればすべて再生できる。\u003Cbr \u002F>\n一方で、ローカルPC上のメディアファイル形式の場合、HTML5の\u003Ccode><audio>\u003C\u002Fcode>と\u003Ccode><video>\u003C\u002Fcode>タグが再生可能なメディアに準じることになる。一般的なメディアファイル形式での対応状況を下記にまとめてみた。\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth align=\"center\">MP3(.mp3)\u003C\u002Fth>\n\u003Cth align=\"center\">WAVE(.wav)\u003C\u002Fth>\n\u003Cth align=\"center\">MP4(.mp4)\u003C\u002Fth>\n\u003Cth align=\"center\">AAC(.aac)\u003C\u002Fth>\n\u003Cth align=\"center\">WEBM(.webm)\u003C\u002Fth>\n\u003Cth align=\"center\">OGG(.ogg)\u003C\u002Fth>\n\u003Cth align=\"center\">M4A(.m4a)\u003C\u002Fth>\n\u003Cth align=\"center\">WMA(.wma)\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd align=\"center\">Ok\u003C\u002Ftd>\n\u003Ctd align=\"center\">Ok\u003C\u002Ftd>\n\u003Ctd align=\"center\">Ok\u003C\u002Ftd>\n\u003Ctd align=\"center\">Ok\u003C\u002Ftd>\n\u003Ctd align=\"center\">Ok\u003C\u002Ftd>\n\u003Ctd align=\"center\">Ok\u003C\u002Ftd>\n\u003Ctd align=\"center\">✕\u003C\u002Ftd>\n\u003Ctd align=\"center\">✕\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>上記以外のメディアファイル形式に対応しているかは調べていないのでわからないが、おそらく他にも再生可能なメディアはあると思われる。世の中、マイナーな動画や音声ファイルを含めると相当な数のメディアファイル形式があるので、調べきれていない。また、PC側にインストールされている再生コーデックの状況によっては、再生できるメディア形式が変わって来る可能性もあるだろう。\u003C\u002Fp>\n\u003Ch2>Ambientの多言語化\u003C\u002Fh2>\n\u003Cp>「Ambient」はUIの多言語化に対応している。\u003Cbr \u002F>\n\u003Ccode>assets\u003C\u002Fcode>フォルダ直下に翻訳定義ファイル\u003Ccode>lang.json\u003C\u002Fcode>を設置することで、UIをデフォルトの英記から任意の言語表記へ変更することが可能だ。\u003Cbr \u002F>\nサンプルとして、日本語化用の翻訳定義ファイルを下記に紹介しておく。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"$language\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"日本語\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Ambient Media Player\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Get choose your playlist you want to play from the settings menu.\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"設定メニューより再生したいプレイリストを選んでください\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Notify\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"お知らせ\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Dismiss\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"閉じる\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Previous Item\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"前へ\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Next Item\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"次へ\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Watch on YouTube\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"YouTubeで観る\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Playlist\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"プレイリスト\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Refresh\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"再起動\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Play\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"再生\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Pause\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"一時停止\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Settings\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"設定\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Options\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"オプション\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Close Playlist\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"プレイリストを閉じる\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"No media available.\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"有効なメディアがありません\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Close Settings\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"設定を閉じる\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Current Playlist\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"現在のプレイリスト\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Choose a playlist\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"プレイリストを選んでください\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Target Category\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"対象のカテゴリー\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"All categories\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"すべてのカテゴリー\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Randomly play\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"ランダム再生\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Seek and play\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"シーク再生\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Dark mode\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"ダークモード\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Close options\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"オプションを閉じる\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Media Management\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"メディア管理\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Add media to the currently active playlist.\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Media you add is lost when you switch playlists or end your application session.\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"If you want the additional media to be permanent, you will need to download the playlist after adding the media.\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Add New Media\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Playlist Creator\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"プレイリスト作成\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"It is expected to be implemented in the near future.\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Please look forward to it.\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Report an issue\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"問題を報告\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Ambient development code is managed in a github repository.\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"To report bugs or problems, please raise an issue on github.\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Before reporting a problem, please check to see if a similar issue has already been submitted.\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Check out and submit issues.\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"About Ambient\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"Ambientについて\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Ambient is an open source media player that allows you to seamlessly mix and play media published on YouTube and media stored on your local PC.\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Additionally, since Ambient is designed as a web application, anyone can use it by accessing the application's pages with a common web browser.\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"However, if you want to use Ambient on your local PC, you will need to prepare a PHP execution environment and launch your application onto that environment.\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Learn more about the technology Ambient uses below:\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"YouTube IFrame Player API\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"tailwindcss\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Flowbite\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"Version:\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"(user setup)\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Ambientにバンドルされている\u003Ccode>assets\u002Flang.json\u003C\u002Fcode>の中身を上記の内容で上書きすることで、主要なUI部分はすべて日本語化されるだろう。\u003Cbr \u002F>\n翻訳定義ファイルについてはファイル名のサフィックス対応をしているので、日本語の翻訳定義は\u003Ccode>lang-ja.json\u003C\u002Fcode>のようにファイルを分けて管理することも可能だ。ただ、現バージョンのAmbientでは\u003Ccode>lang.json\u003C\u002Fcode>を優先的に使用するようになっているので、サフィックス化した翻訳定義ファイルを作った場合は、\u003Ccode>lang.json\u003C\u002Fcode>をどこかに退避させるか、拡張子をjsonから変更して無効化してしまうしかない。\u003Cbr \u002F>\nこの辺の多言語ファイルの読み込み処理は、将来的に改善するつもりである。\u003C\u002Fp>\n\u003Ch2>最後に\u003C\u002Fh2>\n\u003Cp>「Ambient」はMITライセンスのオープンソースとしてリリースしている。\u003Cbr \u002F>\nまた、全リソースはgithubで公開しているので、興味がある方は是非使ってみて欲しい。\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fka215\u002Fambient\">https:\u002F\u002Fgithub.com\u002Fka215\u002Fambient\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>感想とか意見とか聞かせてくれると、とても嬉しい♪\u003C\u002Fp>\n",[273,274,277,280,283],{"slug":161,"name":162},{"slug":275,"name":276},"html5","HTML5",{"slug":278,"name":279},"media-player","Media Player",{"slug":281,"name":282},"php","PHP",{"slug":284,"name":285},"youtube","YouTube",[287,292,297,302],{"slug":166,"title":167,"date":168,"excerpt":169,"image":170,"categories":288},[289,290,291],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":154,"title":155,"date":156,"excerpt":157,"image":158,"categories":293},[294,295,296],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":142,"title":143,"date":144,"excerpt":145,"image":146,"categories":298},[299,300,301],{"slug":149,"name":150},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":303,"title":304,"date":305,"excerpt":306,"image":42,"categories":307},"tips-of-sending-emails-that-includes-multibyte-strings-on-php","PHPで日本語のメールを送信する時のおさらい","2020-05-17T22:23:28","久々のおさらいシリーズ。 最近、仕事で単発のメールフォームを作ったのだが、メール送信周りの処理をスクラッチしたところ、受信するメーラーによって文字化けしたり、迷惑メール化しちゃったりと結構色々大変だったので、そのノウ…",[308],{"slug":25,"name":26},{"slug":185,"title":186,"date":187,"excerpt":188,"image":189,"categories":310},[311],{"slug":25,"name":26},{"slug":166,"title":167,"date":168,"excerpt":169,"image":170,"categories":313},[314,315,316],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},1793391394160]