補足説明
iNet Radio Receiverは、埋め込みプレイヤーにより聴くことができる、ネット・ラジオ（サイマルやオンデマンド等）のブックマーク集です。
ここの落書き人が小さな枠の中に沢山のコンテンツをシンプルに詰め込み、かつ直感的に操作できるデザイン性を試行錯誤している実験的なウェブページです。
■選局・情報
落書き人がプリセットしたネットラジオのリスト（ブックマーク）です。リスト上の聴きたい局をクリックすることでここで聴けます。埋め込めないコンテンツは外部リンクです。
ラジコについてはエリア判定が行われ、当該エリアの放送局リストだけが表示されます。
分類やジャンル分けは落書き人の感性で更新していますので悪しからず。それは落書き人が良く聴くラジオのブックマーク集から始まっているからです。今は節操無く追加してこんな状態になってしまいました。
■つぶやき
Twitterのつぶやきを検索して表示しています。放送局に対応するキーワードで事前プリセットしてあります。
検索キーワード欄は入力変更が出き、Twitter検索が自由に行えます。
■時計・風景
ラジオには時計（美人時計など）が付いていて欲しいという発想です。おまけで風景（USTREAM）もプリセットしてあります。ボ〜っとしたい時に観ているのも良いかもしれません。
■エリア天気
エリア判定結果に対応した地域のYahoo!天気が表示されます。
●Q&A （Contact USと掲示板から頂いた質問)●
■ラジコ聴取中のブラウザ再読み込みで再生停止する
再生が止まってしまうのはradiko.jpの公式ページの仕様です。当ページはその仕様の影響を受けています。
■音が出ない局がある
24時間配信ではない局があります。もしリンク先のHomepageて行き、そこで聞けるのに当Receiverで聴けない場合はContact Usから連絡を頂ければ対処致します。
■選局リストへの追加リクエスト
Contact Usから追加したい放送局情報を頂ければと思います。なお要望通りに追加するかは、ここの落書き人の気分しだいなのはご了承ください。
■初期表示が遅い事がある
ラジコのエリア判定を2012/01/24に「どこどこJP」様に変更しました。これにより初期表示時間が改善しました。また手動エリア指定を優先する様に変更しました。
■ラジコが開くのが遅い時がある
それはradiko.jp自体の事象です。ラジコ独自のハンドシェイクの応答時間が遅い事があります。極端な場合には応答が戻らずに再生が始まらない場合もあります。
■選局リストを自分のHP用に変更
選局リストはJSONPで取り込んでいるので可能です。「選局リストを自分のHP用に変更」を参照してください。
■らじる★らじるとラジコの放送中情報が表示されなくなった
「ただいま放送中」の情報を得て表示する機能は覗き的行為でマナー的に微妙ですので非公開にしました。放送中の情報を得たい場合は、それぞれの公式サイトでリスニングする事をお勧め致します。当サイトは聴く事ができるブックマークと関連リンクに徹します。なお利用規約で認められれば復活します。
2012/08にらじる★らじるの番組表表示は加工せずに埋め込みできる形式ですので復活させました。
2012/10にラジコの番組情報表示を再開させましが、実験的なものですので予告なくクローズするかもしれません。
■同じものをソフトにできませんか
Desktopアプリとして同様のものを作る予定はありません。
↓以降は専門用語有り：興味があれば読んで下さい↓
※URLの末尾に「?」を付けて以下の起動オプションを続ける。
■「&receive=ステーションID」自動受信スタート
開くと同時に受信を開始開始することができます。ステーションIDはiNetRadioData.jsの記述を参照してください。
■「&data=選局データURL」自分用の選局データ指定
自分のHPに選局リストデータを置き、自分用の選局リストが表示できます。選局リストを自分のHP用に変更」を参照してください。
これを指定することで、ラジコによるによるエリア自動判定に関係なく、指定したエリアのラジコの選局リストが表示されます。
なお故意に実際のエリア以外を指定しても、ラジコのエリア判定圏外であれば聴くことはできません。
■Copyleft--All Rights Reserved.
htmlやJavascriptをコピーして、どんどん派生版を作成して公開を希望。
そして新しいアイデアの共有も希望。*^_^*
なおソースコピーする場合は、エリア判定で利用している“どこどこJP”様のAPIキーはドメイン依存です。そこでどこどこJP様からAPIキーを新たに取得してください。
■Contact Us
ネット放送とその局のTwiterハッシュタグ情報等などを募集中。対応は落書き人の気まぐれ次第。(^_-) メール連絡
■技術的なことについて
JavaScriptゴリゴリです。frameworkは利用しませんので、ソースコードの可読性は極めて悪いです。
サーバー側のCGIプログラム等は一切使っていません。すべてブラウザ側のJavaScriptによる処理です。
そしてアトム級（htmlソースが46Kbyte以内）というポリシーで作成していますので、サイズを減らすためにJavascriptの改行,タブ,空白をカットしてサイズを小さくしています。
htmlのコードを読みたい場合は圧縮していない版を参照してください。
放送局データはJSONP形式になっていますので外部からも使えます。しかしここの落書き人の気まぐれで、データ書式は変更が繰り返されます。
■謝辞：落書きで参考にさせて頂きました。
・タブメニューと選局メニューのヒント。
http://archiva.jp/web/javascript/tab-menu.html
・ラジコの放送局とエリアコード。
http://www.dcc-jpl.com/foltia/wiki/radikomemo
選局中の背景ネイビーで白抜き文字のところをクリックすることでリスタートが行われます。これにより受信の再開ができます。
ただし本当にネット障害や配信元の障害の場合はリスタートしても受信再開は出来ません。
自分のサイトから好みの選局リストを流し込めます。それはJSONP形式で記述されているからです。
自分用の選局リストの流し込みはURLクエリで指定できます。
下記のURLが選局リストを明示的に指定する例です。
です。
自分用のiNetRadioData.jsですが、http://homepage2.nifty.com/nakkara/iNetRadioData.jsをダウンロードして変更して下さい。
JSON形式で指定されているstringの意味合は以下のとおりです。
"headline" 最初に上段に表示するお知らせ
"items" 以下の選局情報
"id" データ中で一意となる重複してはいけない文字列、なお"-"(ハイフン)は用いると誤動作します。
"org" 以下の３つのvalueを知っていれば大丈夫です。
"grp" グルーピングです。
"WMP" Windows Media Playerで再生する場合
"flash" Flash Playerで再生する場合
"name" メニューに表示するラジオ局名
"station" プレイヤーに流しこむストリーミングのURL
以下は必要に応じて指定
"twitter" つぶやきに表示する検索キーワード
"HP" 放送局のホームページのURL
"blog" 放送局のブログのURL
"magazine" 放送局のマガジンのURL
"genre" メニュー右端に表示されるジャンル等の文字列
"outline" 選局中の情報欄に表示される概説
"height" プレイヤー表示の高さ
"width" プレイヤー表示の幅(320pxまで)
"tokei" 以下の時計選択情報
"name" 時計の名称
"url" 時計表示するurl、"grp"を指定するとoptgroupとなる。
"height" 時計表示する高さ
"items"の中の"id":"end"と"tokei"の中の"name":"end"は強制的にその行で終了させます。これにより一時的に排除したいものは、その下に移動させることで可能です。
JSON書式はJSON の紹介が参考になります。
JSONPについての解説はwkipediaのJSONPが参考になります。
なお、上記を読んでもわかんないという事へのサポートは行いませんので悪しからず。
どこどこJP様でエリア判定を行なっています。
ラジコに関しては、このエリア判定結果で選局一覧を切り替えています。しかし必ずしもradiko.jp様のエリア判定と一致しないかもしれません。
もし一致しない場合はURLの末尾に?&area=JPxxと強制的にエリア指定してください。ただしradiko.jpサイトで判定されるエリア以外を指定しても、再生でエラーになり聴けません。聴けるエリア情報はradiko.jpの『配信エリア』を参照してください。
エリアの誤判定はradiko.jpの『お問い合わせ』から申請することで改善できる場合があります。
JP1 HOKKAIDO JAPAN
JP2 AOMORI JAPAN
JP3 IWATE JAPAN
JP4 MIYAGI JAPAN
JP5 AKITA JAPAN
JP6 YAMAGATA JAPAN
JP7 FUKUSHIMA JAPAN
JP8 IBARAKI JAPAN
JP9 TOCHIGI JAPAN
JP10 GUNMA JAPAN
JP11 SAITAMA JAPAN
JP12 CHIBA JAPAN
JP13 TOKYO JAPAN
JP14 KANAGAWA JAPAN
JP15 NIIGATA JAPAN
JP16 TOYAMA JAPAN
JP17 ISHIKAWA JAPAN
JP18 FUKUI JAPAN
JP19 YAMANASHI JAPAN
JP20 NAGANO JAPAN
JP21 GIFU JAPAN
JP22 SHIZUOKA JAPAN
JP23 AICHI JAPAN
JP24 MIE JAPAN
JP25 SHIGA JAPAN
JP26 KYOTO JAPAN
JP27 OSAKA JAPAN
JP28 HYOGO JAPAN
JP29 NARA JAPAN
JP30 WAKAYAMA JAPAN
JP31 TOTTORI JAPAN
JP32 SHIMANE JAPAN
JP33 OKAYAMA JAPAN
JP34 HIROSHIMA JAPAN
JP35 YAMAGUCHI JAPAN
JP36 TOKUSHIMA JAPAN
JP37 KAGAWA JAPAN
JP38 EHIME JAPAN
JP39 KOUCHI JAPAN
JP40 FUKUOKA JAPAN
JP41 SAGA JAPAN
JP42 NAGASAKI JAPAN
JP43 KUMAMOTO JAPAN
JP44 OHITA JAPAN
JP45 MIYAZAKI JAPAN
JP46 KAGOSHIMA JAPAN
JP47 OKINAWA JAPAN
一応、動作に必要な環境のことだけ書いときます。でも、これを持って、この環境で動作保証するものではありません。
何やっても俺の環境では埋め込みが聴けないぞという時は、その配信先のHPへ行き、そこで聴けるかを確認して下さい。配信元で聴けない配信は聴けません。解消方法は配信元のHPに書かれている場合もありますが、もともと環境依存な方法で配信しているところもあります。
■ブラウザ共通
・JavaScript OFFでは動きません
・Cookieは受け入れが必要（選局設定変更で使う予定）
・Flash PlayerのPlug-inが必要
・Windows Media PlayerのPlug-inが必要
・Microsoft DRM Plug-inが必要かも？
■ブラウザ毎の動作状況
・Firefox最新版
・Google Chrome最新版
・IE11 ※「IEバージョンによる違い」を参照
・Opera最新版 ※Opera独自な仕様解釈には対応しません
・Safari（MAC環境がないので対応しません）
・上記以外のブラウザは確認する予定もなし
■ＯＳ環境
・Win 7 32bit環境で作成して動作確認
・その他ＯＳ環境は保有していません
■IEのバージョンによる違い
2015-02-10 IE 11のみの動作チェックにします。たぶん、IE 8以前ではまともに動きません。IE 9で使えない機能も躊躇なく使う予定です。できればFirefox、またはGoogle Chromeに乗り換えることをお勧めいたします。
※プリセットデータ変更履歴を除く機能変更履歴
2011-10-01
初期版（自分が聴く放送局が聞ければ良いだけの状態）
2011-10-02
Radikoが一時間位で制御不能になる不具合対策で「停止」「リスタート」「自動回避」機能を実装
2011-10-03
タイトルを「iNet Radio Receiver」にして、右上にタイトルイメージを表示
2011-10-10
みんなのつぶやき（Twitter）の検索キーワードが増え続ける現象を改善（dynaTwi.html外部モジュール化）
2011-10-16
放送局情報・みんなのつぶやき・選局をタブ形式に変更
※参考サイト：http://archiva.jp/web/javascript/tab-menu.html
2011-10-23
以下のカット＆トライ的な改修前に、これ以前の版はβ0.1として改修凍結
若干のデザイン変更、この後もちょこまかカット＆トライ中
サーバー側でらじるとラジコを録音させる機能を搭載してみたが、公開できない機能で有る為に、このiNet Radio Receiverとしては却下
2011-10-30
停止すると、自動回避解除が自動解除になってしまう不具合を改修
Twitter欄が非表示であってもTwitter更新を続けるのは無駄な通信であったので、Twitter欄が表示されている時だけ、Twitter更新を行うようにした。
Twitter欄の検索キーワード入力を可能にして、任意のキーワードでつぶやき検索する機能を実装
タブメニューのカレントタブにマウス・ホバーで文字色が変化しないようにCSSを調整
2011-11-02
美人時計のガジェットを追加
全局プリセット(RadikoとAuimul Radio)対応の改修を始めたので、これ以前の版はβ0.2として改修凍結
2011-11-06 ※現状はα版
ラジコを全局プリセット、エリア判定によりラジコ選局リストは自動切り替え
Twitter検索キーワード入力後にEnterでも再検索される樣に改善(面倒だった〜！)
外部リンクとしてプリセットを追加（ハワイの放送局とSimul Radioホームページ）
2011-11-07 radiko.jpのhtmlは単一じゃ無い？
IE8以前でラジコのエリア判定が出来なかった不具合を解消。原因はラジコが戻すhtmlがIE9とIE8以前では差異があった。
2011-11-08 IE6対策
IE6でも辛うじて動くようにした。でもIE6は捨てたほうがいいと思う。
2011-11-08
選局メニュー右端にジャンルと外部リンク「outside」を表示するようにした。
2011-11-09 Android対策
Android Browserでの選局後でスクロールアップに、その上段の選局メニューた隠れてしまい、隠れた部分の選局不能を回避した。
調べるとAndroid Browserではoverflow:autoをoverflow:hiddenとして扱ってしまう事が原因だった。そこでAndroidからアクセスされたときにはoverflow:visibleにする様にした。
2011-11-10 IE全般対策
IE7〜IE9はラジコのSWFプレイヤーを直接埋め込むと、選局切り替えで、これを上書きする箇所でスクリプトエラーになっていた。
IE6は逆にラジコのSWFプレイヤーを直接埋め込まないと表示されないということになる。
そこでIE7〜IE9の場合のみSWFプレイヤーの直接埋め込みをやめて、プレイヤーページを埋め込むようにした。
2011-11-11 Android Browse用選局リスト
Android Browserで聴ける局のみに選局リストを絞り込む機能を追加、方法はULRの末尾に「?&only=ab」を追加してアクセスする。
2011-11-14 初期ロード時間を改善
美人時計のロードに時間がかかり選局リスト表示までに一呼吸の間があった。そこで美人時計はタブメニューがクリックされたときにロードするようにして、初期表示応答性能を改善させた。
ついでにUSTREAMから風景のライブ配信も追加。
2011-11-19 Simul Radio(コミュニティFM)プリセット
余りにも局が多くで躊躇していましたがプリセットしました。でも局が多すぎてSimul Radioのプリセットのメンテナンスは放棄します。
2011-12-11 若干デザイン変更と軽量級ポリシー撤回
Android Browserで選局しやすいようにマージンを入れるなどでデザインを調整した。
アトム級ポリシーは撤回しました。
2011-12-18 時計とベッドラインをデータへ
時計とヘッドラインのデータをiNetRadioData.jsへ移動した。これはScript部分を部品化するための準備としてで、外見的な変更は無し。
2011-12-25 radiko.jpのエリア判定中表示を追加
ラジコの地域メニュー自動切替の為にエリア判定を行なっています。この判定でradiko.jp混雑時には時間が掛かります。最悪、判定に失敗します。これはrdiko.jp自体も同様です。そこで判定中であることを表示するようにした。
2011-12-25 自動受信スタートで選局メニーも連動
自動受信スタート時に、選局リストも自動的に開く様にした。
2012-01-20 YouTubeの再生リストに対応
ラジオには関係ないですがBGM用に気まぐれで対応した。これは完全にここの落書き人の気まぐれです。
2012-01-23 ラジコエリア判定の変更
ラジコ利用規定(2011/12/12制定)でradiko.jpにアクセスしてエリア判定することは禁止事項にふれる可能性がでてきた。そこでエリア判定をどこどこJP様に変更した。
これによりラジコのエリア判定と一致しないことがあり得る。そこでURLクエリで?&area=JPxxで指定された時にはそれを優先する仕様に変更した。
2012-01-28 エリア天気
お天気と同じく気まぐれな思いつきで、エリア判定結果の都道府県に連動した、Yahoo!天気を埋め込んだ。なおIE6はタブメニューが右側に隠れてしまい表示できません。IE6用に改修する予定もありません。
2012-01-28 Webkitでの表示崩れを解消
左上のエリア判定の表示がWebkit(Google ChromeとSafari)で表示が崩れることがあった。内容が空のブロックにinnerHTMLで内容を書き込んだ時に発生することが確認できたので、初期値をセットしておく様にした。
2012-03-25 Restartの改善テストとTBS番組表リンク
Restartを行うと、時々Flashプレイヤーが切り替わらずにおかしなことなる現象が改善するかをテスト的に対応
TBSラジオの番組表へのリンクを追加して、一応開いた時に日時で自動ジャンプするようにはしてみた。
2012-06-10 局プリセット反映を改善
局プリセットデータ(JSONP)をキャッシュしてしまうブラウザでは、ブラウザキャッシュを削除しないと変更が反映されませんでした。そこでキャッシュされないようにURL引数を工夫した。
Android Browser用の「?&only=ab」で表示される対象からラジコを除外した。理由はラジコ仕様変更で強制的にアプリ導入ページに飛ばされる改悪がなされた為です。
2012-07-23 Android Browser記述を削除
Radiko.jpがAndroidからのPCサイト利用を排除している事と、Flash Playerがモバイル向けメンテナンスを終了してい事もあり、Androidに関する記述を削除した。
2012-07-28 らじる★らじる番組表を表示
らじる番組表を５分間隔自動更新ありで表示する様にした。ただし実験的でありブラウザ依存あり。IEのみ高さが中途半端なのはIEたる所以。Firefox3.6以前はiframeの再読み込みが・・・。
Radiko.jpがAndroidからのPCサイト利用を排除している事と、Flash Playerがモバイル向けメンテナンスを終了してい事もあり、Androidに関する記述を削除した。
2012-08-02 番組表バックエンド通信を抑止
ページ初期表示で、らじる番組表を全てロードしていた為に、５分間隔自動更新でバックエンド通信が発生していた。そこで、らじる選局時のみ、番組表ページをロードすいる様にした。
2012-08-03 Gocko 1.x.xでの不具合を訂正
前回の変更作業で、Gecko 1.x.x（Firefox3.6以前やMozilla Prism等）にてNHKを選局すると、その後に選局できなく不具合を誘発していた為、これを修正した。
2012-09-15 最小Intevalを5msに
選局時のスクロール速度をHTML5で定められた最小Intevalが5msという仕様に準拠させました。ただしIEの様にこれに準拠していないブラウザもあります。
2012-09-22 ラジコ番組情報復活
復活させましたが実験的なものです。演奏曲情報を提供している局もありますが、それは未対応です。
追伸：復活した機能を伏せました。Webサーバー移動後に復活予定です。
2012-10-04 ラジコ番組情報再復活
復活させましたが実験的なもので、番組情報の更新は夜間バッチですので過信は禁物です。
2012-10-18 XHTML1.1構文に準拠
原理主義的な構文チェックにはパスできないと思いますが、ブラウザにXHTML1.1だよと認識してもらえればOKという緩い準拠です。当然レガシーHTMLが混在しても殆どのブラウザが対応していればOKとしています。
2012-10-22 ラジコの「停止」アクションでそれらしく
ラジコ・プレイヤーの停止モドキなイメージを表示するようにした。
2012-10-23 背景グラデーションのCSSを調整
Google Chromeと、Firefox16で初期表示の時に変だったので、CSSを少し見直して改善した。
またmetaタグでviewportを指定して、フマフォでの表示を改善したが、WMPとFlashがスマフォで使えないのであまり意味が無い。
2012-10-24 ラジコが旧swfプレイヤーを撤去
急遽、とにかく聴ける状態にした。ただしIEで選局変更時にエラー、二重音声というトホホな状態ではある。
2012-10-27 ラジコのトホホな状態を改善
二重音声になる現象を改善、IEの選局変更時のエラーも改善。
ところでIE選局変更時エラーはクロスドメインページをiframeに埋め込み、且つIEのFlashがActiveXであることから、そのページを操作する事は権限違反という事による制限らしい。そこで公式ページをiframeでラッピングして、プレイヤー部分だけをフレームインさせる方法で回避した。
2012-11-01 背景グラデーションを微調整
明らかに無駄なことをしていたので改善→ htmlタグの高さを100%として、body背景をグラデーションさせることでスッキリさせた。
2012-12-09 ラジコのノーコン病治癒で
ラジコ不具合対策として搭載していた「停止」「自動回避」の機能が不要になったので除外した。
2013-04-01 ラジコ公式サイト変更に対応
ラジコの新プレイヤーを表示するように変更した。古いブラウザでラジコプレイヤーの表示が崩れると思われるが非対応とす
2013-04-07 ラジコ番組情報表示の5:00AM跨ぎ
ブラウザキャッシュの関係で日付跨ぎの後に“取得中”のまま、翌日の番組情報が表示されない現象を解消したつもり。なお日付跨ぎ時間は、殆どの局が5:00AMになっている。
2013-05-27 らじる地域配信に仮対応
地域指定をしないとエラーになるようになったために仮対応した。なお番組表や仮対応でFirefoxでノーコンになる現象は後ほどの対応とする。
2013-06-03 らじるFirefox不具合に仮対応
Firefoxにおける不具合は、HTMLを書き換えることでは回避できない事が判った。そこでFirefoxの場合は、らじるはswfプレイヤーを埋め込むことにした。他のプレイヤーは公式プレイヤーをiFrameにラッピングしてズームインしている。これによりFirefoxと他のブラウザとでは、らじるを再生する際のプレイヤーデザインが異なる。
2013-07-15 らじるの番組表の地域対応
選局枠に表示される番組表が東京固定であったのを地域対応した。
2013-10-02 Firefoxでは表示崩れに対応
Firefoxでは表示崩れの原因であったCSSのfont-size-adjustを除外した。
2013-12-16 IE10でのWMP埋め込み改善
IE10はDOM埋め込みの上書きでは再生が止まらない為に、選局切替時にStop&CloseコマンドでWMPを止めるようにした。
2014-04-07 radiko.jpの埋め込みをSWFに変更
radiko.jpがプレミアム対応でHPの応答が極端に遅くなる現象が発生しており、そこでHPではなくSWFを直接開くように変更した。なおIEに関しては最新のみ（現時点でIE11）の確認とした。今後は、ちょっとIEの互換性対応に嫌気が差したので、IEの下位互換チェックは行わないことにした。iNet Radio Receiver利用はFirefoxもしくはGoogle Chromeでの利用を推奨します。
2014-04-11 IE11でのWMP実装不具合を改善
IE11のUserAgentが、以前のIEの判定方法ではバージョンが拾えずに、バージョンがzeroと判定していた。そしてこれにより、2013-12-16の改善がIE11では反映されない状態になっていた。しかしUserAgent変更は過去への互換を考慮するのが通例だが、この点でもマイクロソフトは我が道を行くでした。
2014-04-19 radiko.jpプレミアムの抜け道を塞ぐ
04-07の対応で、意図せず、radiko.jpプレミアムの抜け道を開いていた。そこで元に戻した。したがってradiko.jpの応答が遅い場合の影響は受けてしまう。
2014-05-27 Google Chromeで選局時にエラー
Google Chromeのiframeのlocation.hrefが消滅して、Firefoxと同じでlocaion.srcプロパティに変更されたことに対応した。
2015-02-10 iQuery化を少しずつ始めた
手始めに選曲枠をwindowサイズに連動して動的に高さを変える様にしてみた。なおこれによりIE 8以前での動作確認は行わないものとした。