ピコプレイヤーピコ単語

ピコプレイヤーピコ
9.9千文字の記事
  • 4
  • 0pt
掲示板へ
twitter
記事編集  
8561

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

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

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

1917
応用と注意点

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

13458
遅延読み込み

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

1958
IMG画像のCSS仕様

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

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

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

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

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

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

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

12577
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>
左
11925
右
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>
2118
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>
左
1634
右
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>
17685
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>
左
13207
右
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>
13458
↑
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>
182
↑
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>
9002
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>
12577
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>
9002
12856
345
3804
17685
13468
7688
2664
5937
1655
832
1
19358
9728
409
150
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>
記事内にピコプレイヤーピコの応用例がいくつ実装されているか数えてみてね！
きみだけのピコカキコプレイヤーを作ってみよう！

【スポンサーリンク】
  • 4
  • 0pt
  • ページ番号: 5651249
  • リビジョン番号: 3028156
  • 編集内容についての説明/コメント:
    • 脱字や一部表現修正、および関連項目の追加。
記事編集 編集履歴を閲覧

この記事をもとに新規記事を作成

一般単語や、ニコニコの各サービスに関する記事などは、単語記事をご利用ください。
単語記事は、プレミアム会員のみが編集できます。

twitter
facebook
hatena

ニコニ広告で宣伝された記事

レミリア・スカーレット (単) 記事と一緒に動画もおすすめ！
提供： カマドーマ
7352100pt
もっと見る

この記事の掲示板に最近描かれたお絵カキコ

お絵カキコがありません

この記事の掲示板に最近投稿されたピコカキコ

ピコカキコがありません

ピコプレイヤーピコ

ピコプレイヤーピコの記事へ戻る
1-
1 ななしのよっしん
2022/05/07(土) 11:18:36 ID: +xdY1X+UTP
レスメニュー
恐ろしいテクノロジーやでぇ…
👍
高評価
0
👎
低評価
0
2 ななしのよっしん
2022/05/07(土) 15:10:36 ID: yCOXFlVOuO
レスメニュー
なるほどその手があったか……
今後ピコカキコの仕様変更が起きたりしてぐちゃぐちゃにならないことを祈るばかり
👍
高評価
0
👎
低評価
0
ピコプレイヤーピコの記事へ戻る
1-

急上昇ワード改

おすすめトレンド

ニコニコニューストピックス

「名探偵コナン」灰原哀、足組み姿で立体化！“ダメよ!!あの解毒薬の効果は、まだ一時的だし…”
＜鬼滅の刃＞甘露寺蜜璃の誕生日イラストに反響「衣装がヤバイ」「たまらん！」
世界最年少の画家はなんと1歳！ギネス記録に認定される
そのセリフ、どういう意味？男性からの“気になる一言”とは？
冬の北海道で大活躍!?　雪道を難なく走るクローラー・ランクルがタフすぎる
約10年にわたり迷惑行為を続けた81歳男、逮捕されるも釈放後に死亡（米）＜動画あり＞
追われるだけが恋愛じゃない！女性が「追う恋愛」が成功する理由
【危険】クレヨンしんちゃんアドベンチャーパーク、「ひろしの靴下」6月限定で激臭2倍 - 「何の罰ゲームだよw」「死人が出る」とネット民ざわつく
給湯室から聞こえた「マジきもいよね」…女性社員から嫌われていた上司が無意識に踏んでいた“地雷”とは【アナウンサーが伝授】