ピコプレイヤーピコとは (ピコプレイヤーピコとは) [単語記事]

ピコプレイヤーピコとはピコカキコプレイヤーから再生ボタンを取り出したアイコンプレイヤー群の総称である。
音量調整や再生時間などの機能すら投げ捨て、再生さえできればいい、そんな場面で活躍する。

用途としては文中に埋め込む、大量にリスト表示するなど、少しでも小さく表示したい場合に使用する。
「pikopod」や「MPP(kari)」がプレイヤーを大きくすることで多くの情報を詰め込むコンセプトとは真逆である。

名称末尾のピコはピコカキコのピコ(piko)ではなく、nanoより小さい単位のpicoからきている。
「MPP(kari)」が「ミニ・ピコ・プレイヤー（仮）」なので、ピコプレイヤーピコの略称はPPPとなる。(たぶん)

応用と注意点

ピコカキコプレイヤーを作成する際のパーツとしても活用できる。
CSSと組み合わせることにより、「ピコジュークボックス」のようなものも作成できる。
ピコジュークボックスを作成する際に=ω=)ノ(のみりん)氏の行った基礎研究がピコプレイヤーピコに該当する。

遅延読み込み

改造するときの注意点として、ピコカキコプレイヤーは画像のため、遅延読み込みの影響を受けてしまう。そのため、画像の上部や左部をある程度表示範囲外にすると読み込まれなくなる場合がある。
ALT(代替文字兼ピコカキコ番号指定)を設定している場合、画像が表示されないケースが増加する。
より小さなサイズのものほど仕様変更の影響を受けやすいため、リスクを理解しておかなければならない。

IMG画像のCSS 仕様

IMG タグに書かれたCSSはクリック時にピコカキコプレイヤーに置き換えられて消えてしまうため、改造する際には工夫が必要になる。
スマホ版ではma-widthが100%と設定されているため、設定を上書きするためにmax-widthの設定は必須である。

	設定を上書きしなかった場合（max-width:100%)を再現。
	クリックをした際に画像IMG タグのCSSが消えることの確認。

導入方法

デザインやサイズ、ソースコード量、リスクを考慮し複数用意している。

文中で使用するものは、ソースコード量が増えるため、必要なときのみの使用し【左側】【右側】部分を書き換えると良い。

【ピコカキコ番号】部分にピコカキコ番号を指定することで動作する。指定しない場合はアイコンとして使用できる。
【ピコカキコタイトル】部分にはカーソルを合わせた時に表示するピコカキコの情報を記載できる。省略しても動作するため、記事中で説明する場合にはtitleの項目ごと削除しても良い。

音量調節については、ALT（代替文字兼ピコカキコ番号指定）をしないことでピコカキコの音量調節のみに使用できる。記事中に1つ設定しておくと安心できる。

赤字箇所は元になったモデルとの主な変更点。

18 × 18	ピコプレイヤーピコ（ライト）ボタンを小さくしソースコードもシンプルにしたいとき用背景が白ならこれで十分。
	`<div style="overflow: hidden; width: 18px; height: 18px; "> <img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /> </div>`
左右 18 × 18	ピコプレイヤーピコ（ライト）ボタンを小さくしソースコードもシンプルにしたいとき用（文中）背景が白ならこれで十分。
	`<div> <div style="float: left;">【左側】</div> <div style="overflow: hidden; width: 18px; height: 18px; float: left;"> <img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /> </div> <div>【右側】</div> </div>`
16 × 16	ピコプレイヤーピコ（スタンダード）ボタンの枠線まで小さくしたいとき用
	`<div style="overflow: hidden; width: 16px; height: 16px; border-radius: 3px;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div>`
左右 16 × 16	ピコプレイヤーピコ（スタンダード）ボタンの枠線まで小さくしたいとき用（文中）
	`<div> <div style="float: left;">【左側】</div> <div style="overflow: hidden; width: 16px; height: 16px; border-radius: 3px; float: left;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> <div>【右側】</div> </div>`
14 × 14	ピコプレイヤーピコ（ピコ）ボタンの枠線すら消したいとき用
	`<div style="overflow: hidden; width: 14px; height: 14px; border-radius: 3px;"> <div style="margin-top:-2px; margin-left: -2px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div>`
左右 14 × 14	ピコプレイヤーピコ（ピコ）ボタンの枠線すら消したいとき用（文中）
	`<div> <div style="float: left;">【左側】</div> <div style="overflow: hidden; width: 14px; height: 14px; border-radius: 3px; float: left;"> <div style="margin-top:-2px; margin-left: -2px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> <div>【右側】</div> </div>`
↑ 16 × 16	ピコプレイヤーピコ（NINJA）クリックしたときのみ現れるギミック用（スタンダードベース）スタンダードとの違いは赤字の透明設定部分(opacity)
	`<div style="overflow: hidden; width: 16px; height: 16px; border-radius: 3px;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="opacity: 0; max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div>`
↑ 16 × 16	ピコプレイヤーピコ（インビジブル）クリックしたときでも透明なギミック用（スタンダードベース）スタンダードとの違いは赤字の透明設定部分(opacity)
	`<div style="opacity: 0; overflow: hidden; width: 16px; height: 16px; border-radius: 3px;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div>`
18 × 18	ピコプレイヤーピコ（おちゃめ機能付き）クリックしたときのみ現れるギミック用（ライトベース） NINJAとペルソナの中間、NINJAとの違いはピコカキコプレイヤーが伸びること。使いこなすのは難易度高め。
	`<div style="background: url(【背景用画像URL】) no-repeat ; max-width: 86px; height: 18px;"> <img style="opacity: 0; height: 18px; width: 18px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /> </div>`
16 × 16	ピコプレイヤーピコ（ペルソナ）インビジブルモデルに背景画像を設定したモデル。インビジブルとの違いは赤字の背景画像設定部分。
	`<div style="background: url(【背景用画像URL】) no-repeat; "> <div style="opacity: 0; overflow: hidden; width: 16px; height: 16px;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> </div>`
16 × 16	ピコプレイヤーピコ（シャッフル）ボタン１つに何曲も内蔵したいとき用ペルソナモデル内部のピコカキコプレイヤーを小さくし並べている。 widthを調整することで内蔵曲数を減らすことも可能。内蔵曲数を増やす場合はheightを小さくし追加すれば理論上は16曲×16曲(256曲)まで収録できる（そのためのfloat）。widthとheightを調整することで、格子状などにも簡単に対応できる。title部分を記入しないことで内容を不明にする事も可能。
	<div style="background: url(https://dic.nicovideo.jp/img/pikoplayer.png) -1px -1px no-repeat; width: 16px; height: 16px;"> <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;"> <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> </div>
50 × 18	音量調整 ALTを設定すると、画像の遅延読み込みの影響で表示されない場合がある。
	`<div style="overflow: hidden; width: 50px; height: 18px;"> <div style="margin-left: -36px;"><img style="max-width:86px" title="ボリューム調整" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div>`
左右 50 × 18	音量調整（文中） ALTを設定すると、画像の遅延読み込みの影響で表示されない場合がある。
	`<div> <div style="float: left;">【左側】</div> <div style="overflow: hidden; width: 50px; height: 18px; float: left;"> <div style="margin-left: -36px;"><img style="max-width:86px;" title="【ボリューム調整】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> <div>【右側】</div> </div>`
50 × 9	音量調整ピコ ALTを設定すると、画像の遅延読み込みの影響で表示されない場合がある。
	`<div style="overflow: hidden; width: 50px; height: 9px; border-radius: 6px;"> <div style="margin-top:-8px; margin-left: -36px;"><img style="max-width:86px;" title="ボリューム調整" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div>`
左右 50 × 9	音量調整ピコ（文中） ALTを設定すると、画像の遅延読み込みの影響で表示されない場合がある。
	`<div> <div style="float: left;">【左側】</div> <div style="overflow: hidden; width: 50px; height: 9px; border-radius: 6px; float: left;"> <div style="margin-top:-8px; margin-left: -36px;"><img style="max-width:86px;" title="【ボリューム調整】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div> </div> <div>【右側】</div> </div>`