あまりにも失礼な食べ方に「不愉快」スマートフォン版ニコニコ大百科単語スマートフォンバンニコニコダイヒャッカ190掲示板をみる(106)ほめる(19)その他スマートフォン版ニコニコ大百科とは、スマートフォン向けに表示がカスタマイズされたニコニコ大百科のコンテンツである。指定すればスマートフォン版につながる。基本的にパソコンのウェブブラウザで見られる内容とほぼ同じ物をスマートフォンで見させるだけなので、サービス名としては「ニコニコ大百科」そのものであり、スマートフォン版が独立して正式名称をつけられているわけではない。公式発表の文面では「ニコニコ大百科スマートフォン版」「スマホ版ニコニコ大百科」などと表記が揺れている。使われていた「スマートフォン版ニコニコ大百科」を記事名として採用した。この記事の中でも表記の統一性はないに等しいけど。従来の携帯電話向け表示である「ニコニコ大百科モバイル」とは異なる。各記事末尾の「携帯版URL」と書かれたQRコードはスマートフォン版ではなくモバイル版記事につながるので注意。モバイル版では画像がサムネイル化したり、一定容量を超えたページは閲覧できなかったりするなどの制限があるが、スマートフォン版の記事ではコンテンツを制限することなく、文字を大きくするなどしてスマートフォンの画面に最適化がなされている。2018年4月5日現在、ニコニコ大百科に関してPCブラウザ版でできてスマートフォン版でできないことは以下のとおり。「各種設定」(主にマイページの表示に関するもの)トップページからは「最近更新された記事」「最近レスが書かれた掲示板」は全カテゴリ合わせて10件までしかたどれない。PC版ではどちらも(記事はカテゴリ別に)好きなだけ確認できる。記事を検索した際に、各記事の掲示板へのレス数以外に情報が表示されない。2018年4月2日のリニューアルまでは「最終更新日時」と「最新レス日時」が確認できるようになっていた。自分が初版を作成した記事、お絵カキコ、ピコカキコがそれぞれほめられた数の確認がある。どちらも2018年4月2日のリニューアルで追加されており、今後PC版に導入される可能性もある。この他に細かな仕様や表示の違いがある。表示に関してはこの後の項目で詳しく取り上げる。「ニコニコ大百科」の記事も参照。2008年にニコニコ大百科が立ち上がり、2009年末には携帯電話向けにニコニコ大百科モバイルが提供されるようになったが、スマートフォンから閲覧するとPC版では文字が小さすぎて操作しづらく、モバイル版では文字が無駄に大きくて機能が少なく、痛し痒しであった。そんな状態が長いこと続いたが、2014年2月5日に全記事の冒頭に「この記事をスマートフォン版で見る」という大きなボタンが出現して、ようやくスマホの画面に最適化されたデザインで記事を読むことができるようになった。その後6月には自動的にスマホ版記事に誘導されるようになる。この間の経緯は「この記事をスマートフォン版で見る」の単語記事に詳しい。待望のスマホ版大百科ではあったものの、いくつかの問題点を抱えていた。初期は一々PC版サイトのボタンを押さなければスマホ版の表示ができず面倒だった。自動誘導されるようになってからも、一旦PC版サイトにアクセスしてからスマホ版に転送するという仕様が続き閲覧に時間がかかっていた。逆にスマホでの表示が嫌なのでPC版の記事を見たくても強制転送される仕様が、特に(PC用記事の閲覧に何ら支障がない)タブレットの使用者に嫌がられた。大百科掲示板への投稿さえできなかった。記事をほめたりウォッチリストに追加したりすることも不可能だった。行間が全般的に詰まりすぎていた。段落(<p>タグ)同士の間にはPC版では一文字分のスペースがあるのにスマートフォン版では全くスペースが存在しないことが著しく可読性を阻害していた。横幅が狭い故に、大きな画像などによってレイアウトが圧迫されてしまいがちだった。解禁)ため対策が困難だった。画像の横幅だけが圧縮されて縦長に表示されてしまうことが多かった。スマートフォンの仕様上、ネタバレ防止のためによくある白文字は選択しても反転せず、コピペするなどの手間が必要。上記のような違いがあるにも関わらず、スマートフォンから記事の編集はできず、PCの画面で編集中にスマホにおける表示を(有志が作ったスクリプトの力を借りない限り)確認することもできなかった。そのため折角凝ったデザインの記事を作ってもスマホでは崩壊してしまい、分かっていても対応できないまま放置されてしまった例も散見された。掲示板への投稿、さらにお絵カキコの登録やほめる・ウォッチリスト追加などの機能が追加された。2018年4月2日、スマートフォン版サイトのデザインを根本から変えるリニューアルがなされた。仕様変更によって掲示板にワンタップでアクセスできるようになり、「ほめる」「編集履歴を見る」などといった機能も格段に使いやすくなった。ほとんどの要素(一部除く)でPC版と同様に行間や要素間に適度な空白が入るようになったため、可読性も向上している。ほめられた記事の統計情報などといったPC版にはない機能も追加された。このように数多くの改善点があるものの、本リニューアルは利用者の間で賛否両論となっている。編集者からは否定的な意見が多い。そこで次の項目では現在スマートフォン版のニコニコ大百科が抱える問題点を主に編集者の目線から列挙し、可能な対策についても言及する。現在のニコニコ大百科スマートフォン版における問題点このアップデートが多くの閲覧者にとっては恩恵をもたらすものであり、編集者の中にも歓迎されている方がいらっしゃることを本記事の中で否定する意図は一切ないことを先に述べておきたい。いくらかのHTML及びCSSに関する知識をお持ちであることを前提とした記述が多いこともご容赦願いたい。本記事と併せて「ニコニコ大百科:HTMLタグ一覧」及び「ニコニコ大百科:HTML各要素のデフォルトCSS」もご覧いただくことをお勧めする。触れなければならない。仮に全ての記事が現在の仕様に合わせたならば可読性は向上するかも知れないが、それに必要な労力を考慮すれば当面は崩壊してほとんど読めない状態のまま放置される記事が多いことは想像に難くない。編集者がHTMLとCSSを駆使して、かなり自由にレイアウトを変更することができる点は、他の百科事典サイトではあまり見られないニコニコ大百科独自の面白さである。今回の変更でPC版とスマートフォン版の表示が著しくかけ離れてしまったこと、その中には後述するように対策が困難または不可能なものがあることで、(片方を切り捨てない限り)デザインの自由度が著しく下げられてしまった。した問題以前にバグとしか思えない仕様も存在する。これについては、全てのタグの装飾をリセットしてまっさらな状態にするCSS(https://dic.nicovideo.jp/css/reset.css)を適用してしまったことで生じているのだと思われる。ここに挙げる問題の大半はサポートに改善を働きかけるべきものであり、既にそうした動きも見られるが、すぐには修正されない可能性もある。そこで具体的にどんな表示上の問題が発生していて、どう対応するべきかを考察してみるとしよう。見出し(<h2>、<h3>など)の仕様変更これまでのスマートフォン版では、見出しの体裁はPC版とほぼ同じだった。背景画像として黄緑色のマーカーを表示し、見出しの直下に黄緑の線を引くというものである。■<h4>(見出し4)では左に灰色の四角があり、<h5>(見出し5)と<h6>(見出し6)では何もない状態となった。当該のスタイル指定を抜粋する(長いのでスクロールすること)。0;}これ単体で見れば「見やすくなった」という評価もできるかもしれないが、黄緑のPC版とオレンジ主体のスマホ版とは文字通り異なるカラーとなってしまった。見出し自体をいじっていなくても、ページが黄緑を主体としていることを念頭に記事をデザインしていた場合はちぐはぐになってしまう可能性がある。この仕様による一番の問題は、従来(背景画像)とは全く異なる方法でマーカーを表示している点にある。見出しのデザインをいじっていた場合、従来のマーカーを消すための処理しかしていないことがほとんどなので「自分で設定したマーカー」と「スマホ版のデフォルトのマーカー」が干渉してしまうのだ。よってオレンジ色の左枠が設定されている。擬似要素で■をねじ込んでいる。現在の大百科の仕様では擬似要素を編集者が設定することは一切できないので、この■をどけるのは容易ではない。同じ絶対値の+を設定して■を画面外に飛ばす方法が考えられる。見出しに下線が設定されているとその下線も左に突き出てしまう。要素をあてがうしかない。指定をしていなかった場合、背景画像が縦横に繰り返してしまう。参考までにPC版でご覧の方は、上のように背景画像のURLを指定しただけの<h4>見出しがスマートフォンでどのように表示されるか、ここをクリックして確かめていただきたい。単刀直入に、実物をご覧いただこう。パソコンから閲覧中の方はここをクリックしてスマホ版で表示されたし。使って画像(黄緑の丸)をマーカーとして指定していた。これは容易に編集者サイドで上書きできるので、箇条書きの<ul>は見出しと並んで装飾されることの多い要素である。擬似要素で灰色の●が付け足されている。画像ではなく文字の●である。位置が中心線から微妙に下にずれている。ついでに言えば階層を下げると今度はマーカーに背景画像(>みたいな)を使っている。<ul>と<li>のスタイル指定を抜粋する(長いのでスクロールすること)。指定されているので、いくらulに対してスタイルを指定しても反映されない。自分でマーカーを指定するには全てのliタグにスタイルを指定しなければいけない。マーカーを指定するなら、当然その前に邪魔な●をどけなければいけない。使う作戦はさらなる問題を引き起こしてしまう。引っ張られて●と共に葬り去られてしまうからだ。指定することである(繰り返すまでもないが全てのliタグに)。その場合、項目が長くなってしまって改行が発生すると、今ご覧いただいているとおり、字下げが働かずに二行目以降の行頭がマーカーと同じ位置になってしまうことに注意しなければいけない。inside;">それが嫌なら、さらなる邪道に手を染める必要がある。マーカーを背景画像にしてしまうのだ。これなら改行にも強いが、各種数値の指定で微調整を要求される。上からの位置をpxで指定してもemで指定してもスマホとPCとでデフォルトのフォントサイズが異なる以上、どちらかではマーカーが少し中心線から上下に移動してしまうのは避けられない。それでもスマートフォンのデフォルトで下にずれている●よりはマシかもしれないが。no-repeat;">だがこのサンプルを適用する前に少し待ってほしい。本当にやってしまったら、その後のメンテナンスがとても面倒になってしまうだろう。仕様が元に戻ることを期待して根気強く待つのも一つの手である。[一部修正済]大きな要素が右にはみ出る※この問題は2018年4月26日ごろに一部修正された。効いているため、親要素よりも大きな要素は自動的に親要素と同じサイズまで縮小される仕様だった。ところが新しい仕様ではこれがなくなってしまい、大きな要素、特に画像や表が画面の最大幅を超えて右に突き出てしまいやすくなっている。600px)を使っていたりする場合に顕著だ。対処法はpxの代わりに%で横幅を指定することである。変えればPC版での表示をほとんど損なうことなくスマートフォン版の枠内に収めることができる。2018年4月26日ごろに「max-width」「max-height」属性が解禁された。100%」と入れるだけで上記問題が軒並み解決するようになった。<img>についてはそのまま入れると画像が縦長になってしまう恐れがあるので、heightの属性を削除する必要がある。左右にフロート(画面の片側に寄せた上で続きの文章を反対側に回り込ませる)させると文章が良い感じに反対側に配置される。スペースが半分以上あまっているからだ。ところがスマートフォンの画面では横幅が狭いので、2-3文字分の余白しか残っていなくて読みにくいこと極まりないことがある。似たような問題は表でも発生しやすい。これは2018年4月2日のリニューアル以前からも起きえたことであり、狭い画面でウェブサイトを表示させるときの宿命とも言うべき問題なので、できれば対処したい。