ねこづきあゆむのブログ

ねこづきあゆむです。今日はBootstrapを使って「ニコニ広告ex.」のサイトをリニューアルしました。 Bootstarapとは？ Bootstrapはレスポンシブデザインに対応したフロントエンドのフレームワーク https://techacademy.jp/magazine/6270 簡単に言うと、CSSファイルの集合体（たぶんちがう）です。htmlファイルでクラス指定するだけで、Bootstrapのスタイルできれいな感じにしてくれます。 例えば… index.html123<a href="#dl" class="btn btn-primary btn-lg" role="button" aria-pressed="true"> <i class="fas fa-download"></i>ダウンロード</a> こんな感じで、特定の class を指定してあげるだけできれいな感じにしてくれます。 使ってみて一長一短でした。 メリット要素を形にしやすい思っていたとおりにクラス指定するだけで大部分ができるのでとても楽です。ナビゲーションバーとかもサクッと作れてしまったのでびっくりしました レスポンシブ対応がしやすい自分が頑張らなくてもレスポンシブになるのでとても楽。 デメリットオリジナリティを出しづらいどうしても、オリジナリティを出しづらいです。先程ダウンロードボタンの画像を貼りましたが、あのボタン色んな所にありそうですよね。そんな感じでオリジナリティが出しづらいです。 作っていると既存サイトに引っ張られやすい自分だけかな？作ってて、これいいなあれいいなという感じで詰め込んでいったらN Airのサイトっぽくなってしまいました。（特にDLリンクより下の部分）どうしてもパーツで似たのがあると引っ張られる感じがします。 総合評価個人的にはうーん…っていう感じでした。ただ、今後いろんなプロダクトを作っていくとどこかで確実に使うことになりそうなので多少の勉強はしておいたほうが良い気がします。 まぁ今後、趣味で作ったプロダクトのサイトには導入しません。 あと、Fontawesomeとマッチしすぎてやばいｗ おわりに２・３時間で完成させるつもりが、色々ハマってしまって結局まる1日かかりました。家での自粛期間ももうそろそろ終わりそうなので、この間にできること・やりたいことをじゃんじゃんやりたいです。 document.querySelectorAll('.twemoji') .forEach(el => { if (!el.dataset.src) { return; } const img = document.createElement('img'); img.style = 'display:none !important;'; img.src = el.dataset.src; img.addEventListener('error', () => { img.remove(); el.style.color = 'inherit'; el.style.backgroundImage = 'none'; el.style.background = 'none'; }); img.addEventListener('load', () => { img.remove(); }); document.body.appendChild(img); });

猫月あゆむです。以前から開発しているブラウザ拡張機能「ニコニ広告ex.」のv1.1.4をリリースしました。 変更内容のお知らせの前に、この拡張機能についてサクッと説明したいと思います。 ニコニ広告ex. とはニコニコ動画・ニコニコ生放送の視聴ページに「ニコニ広告」のボタンがあると思います。通常、それをクリックすると「ポップアップウィンドウ」としてニコニ広告の画面が表示されるんですが、この拡張機能では、生放送の「ギフト」のように、コメント欄上に表示してくれる拡張機能となります。 DLはコチラから！ v1.1.4 更新情報ということで更新情報です。 不具合修正 ポップアップ画面からチケットの確認、福引などが行えなかった不具合を修正しました。 一部チャンネル動画（URLにsoID表記のない動画）でニコニ広告がポップアップで出てしまう不具合を修正しました。 軽微な修正 「ニコニ広告ex.」特設サイトのURLが変わったため、各所修正しました。 現在確認済みの不具合 soでないチャンネル動画で貢献度ランキングが表示されない 詳細 上記不具合に関して、不具合を直すには動画IDの取得方法をまるごと見直す必要が出てきてます…そこらへんも含めて対応検討中なのでもう少々お待ち下さい。なにかいい案ある方は GitHubのissue へコメントお願いします。 また、こんな機能欲しい！、バグってるから直して！っていう連絡は以下までお願いします。 @nekozuki_dev 特設サイト専用フォーム AyumuNekozuki/nicoad-ex document.querySelectorAll('.twemoji') .forEach(el => { if (!el.dataset.src) { return; } const img = document.createElement('img'); img.style = 'display:none !important;'; img.src = el.dataset.src; img.addEventListener('error', () => { img.remove(); el.style.color = 'inherit'; el.style.backgroundImage = 'none'; el.style.background = 'none'; }); img.addEventListener('load', () => { img.remove(); }); document.body.appendChild(img); });

猫月あゆむです。以前から開発しているブラウザ拡張機能「ニコニ広告ex.」のv1.2.0をリリースしました。 この拡張機能については上のリンクからどうぞ。 v1.2.0 更新情報機能改善 拡張機能のボタンをわかりやすくしました。 生放送：閉じるボタンを押しやすくしました。 不具合修正 生放送：一部公式番組でフルスク解除時に表示崩れが起きる不具合を修正 生放送：正常な状態で意図せずエラーログが表示されてしまう不具合を修正 細かい修正 動画：各所デザインのズレを修正しました。 生放送：エラーログを5秒後に自動で閉じるようにしました。 裏側の修正 スクリプトを全て見直しました。 スクリプトを軽量化しました。 現在周知の不具合 動画：一部チャンネル動画で貢献度ランキング・広告履歴が表示されない不具合 上記不具合に関して、不具合を直すには動画IDの取得方法をまるごと見直す必要が出てきてます…そこらへんも含めて対応検討中なのでもう少々お待ち下さい。なにかいい案ある方は GitHubのissue へコメントお願いします。 また、こんな機能欲しい！、バグってるから直して！っていう連絡は以下までお願いします。 @nekozuki_dev 特設サイト専用フォーム AyumuNekozuki/nicoad-ex 今回のアプデを解説拡張機能のボタンをわかりやすくしました 状況によっては「ex.」の文字が小さく見づらかったので、広告アイコン全体をオレンジ色にしました。また、今回アイコン画像の形式を PNG から SVG へ変更したので、ダークモード拡張機能等が入っていても綺麗に表示されるかと思います。 生放送：閉じるボタンを押しやすくしました これまで閉じるボタンが広告画面と被り、押しにくい状態でした。今回新しくヘッダー部分を作り、ボタンを押しやすくしました。 ほかいろいろと不具合が治っていたり、表示が綺麗になっていたりします。というのも、スクリプトをほぼすべて書き直しました。 かなりバグ取りをしましたが、なにかバグが有りましたらご連絡ください。 アップデートについてFirefox版は、すでに審査が終了し更新可能です。Chrome版は、前回に引き続き、新型コロナの影響で審査が送れています。今しばらくお待ち下さい。GitHubのReleaseタブから今回のバージョンも直DL可能です。開発への参加お待ちしております。 DLはコチラから！ document.querySelectorAll('.twemoji') .forEach(el => { if (!el.dataset.src) { return; } const img = document.createElement('img'); img.style = 'display:none !important;'; img.src = el.dataset.src; img.addEventListener('error', () => { img.remove(); el.style.color = 'inherit'; el.style.backgroundImage = 'none'; el.style.background = 'none'; }); img.addEventListener('load', () => { img.remove(); }); document.body.appendChild(img); });

今日はアップデートのお知らせです。ニコニ広告ex. v2.0.0を、6/9~10にリリース予定です。 変更の無い点・変更に伴う注意点以下の機能は変更なしです。ご安心ください。 動画／生放送の広告機能を新しいウィンドウではなくコメント欄上に表示させる機能 6/9に「ニコニ貢献」リリース後、現行バージョンが動作しなくなる可能性もありますが。v2.0.0にて修正・リリースしますので気長にお待ち下さい。 v2.0.0 の変更点（予定）新サービス「ニコニ貢献」に対応します。もちろん対応します。 ロゴ・アイコンリニューアルニコニ貢献のリリース、ニコニコのロゴ更新などもあった為、ニコニ広告ex.のロゴ・アイコンをリニューアルします。