What's New Qiita

20190909のHTMLに関する記事は4件です。

  • 投稿日：2019-09-09T21:17:39+09:00

長形（横に伸縮する）フォントの表示

長形フォントの描画に苦労したのでメモ

    <div class="longtype-container">
        <p class="longtype-content">長形フォント</p>
    </div>

$scale: 0.5; //倍率
$font-size: 50px;

.longtype-container {
    width: 100px;
    margin: 0;
    background: grey;

    .longtype-content {
        font-family: "メイリオ"; //計算の簡単のため等倍フォント
        font-size: $font-size;
        line-height: $font-size; //font-sizeと同じ値を設定しない場合上下の位置がずれる
        text-align: left; //左寄せ
        transform: scaleX($scale);
        transform-origin: left; //拡大の起点を左端に
        width: 100% / ($scale); //行折り返し点の調整
    }
}

$scaleの値を変更すれば伸縮率を変更できる。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-09-09T18:48:20+09:00

Visual Studio Code (VSCode) でHTMLを編集するときにライブプレビューしながら編集したい時に使う拡張機能

概要

HTMLファイルを編集するときにいちいちブラウザを更新するのがめんどいので拡張機能を使用してリアルタイムプレビューしながら編集する

方法

Live Server という拡張機能を使う

左のExtensions のボタンをクリックする、またはCtrl + Shift + X を押下する
検索窓にLive Server と入れて検索する
Install する

使い方

コードの場所で右クリック > Open with Live Server をクリック (Open Folder している必要がある)
またはAlt + L > Alt + O でサーバ起動
サーバを停止するときはStop Live Server か、Alt + L > Alt > C で停止する

結論

こんな感じで編集できる
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-09-09T10:52:45+09:00

課金なんて必要ない？YouTubeの広告自動スキップ＆バナー自動削除のChrome拡張作ってみた

やっぱりYouTubeの広告、邪魔じゃない？

YouTubeプレミアムなるものがあって、課金すれば広告をなくすことができるようですが、貧乏学生の僕は月額でお金を払う余裕はありません（汗）。
それでも、ストレスレスにYouTubeを見たい！！

普段、普通に鑑賞しているときはいいのですが、料理をしながらラジオ感覚でYouTubeを再生しているとき、手が汚れていて広告をスキップできない。
いちいちバナー広告が出てきて、字幕が読めない、などなど...

そこで、自動で広告を飛ばしたり、バナー広告を消したりしてくれるChrome拡張があればいいやん！！ってことで、作ってみました。

とりあえず作ったもの紹介

タイトルなし.gif

※見づらくてすみません！

動画はプログラマー系YouTuberのKKBOYさんhttps://www.youtube.com/channel/UCEj6hquMBUiQGunwIO1zVZA
です。
動画のキャプチャ＆Qiita、Twitter掲載はちゃんと許可をいただいてます！

動画では動画の最初に流れる広告を飛ばしています。
ここでは写せていませんが、バナー広告も自動で消すことができます。

スクリーンショット 2019-09-08 3.01.21.png

ちゃんと Chrome拡張としてChromeに追加してあります。（アイコンも作りました。）

機能

・広告が流れたらすぐさま飛ばす
・バナーが現れたらすぐさま消す

やること

  1. JavaScriptで機能実装
  2. アイコン作成
  3. JSONで設定ファイル作成
  4. Chromeに追加

実装について

まずはJavaScriptで機能実装

まずはソースコードをご覧ください。

youtube_auto.skip.js
const host_url = location.host;

if (host_url === "www.youtube.com") {
    setInterval(
        function () {
            try {
                const elem1 = document.getElementsByClassName("ytp-ad-overlay-close-container");
                elem1[0].click();
            } catch (e) {
                ;
            }
            try {
                const elem2 = document.getElementsByClassName("ytp-ad-skip-button-container");
                elem2[0].click();
            } catch (e) {
                ;
            }
        }, 1000
    )
}

仕様説明

URLからホストを特定して、YouTubeの時だけ動きます。
毎秒ページを監視して、動画広告やバナー広告を発見したら問答無用で消しに行きます。

技術説明

初めてまともにJavascriptに触ったレベルなので、むしろアドバイスくださいって感じですが、念の為。
setInterval(第一引数, 第二引数)ってのは、定期的に処理を行う関数みたいです。
第一引数に定期的に行いたい処理、第二引数に定期的に行うそのインターバルの時間を設定します。
今回は『広告やバナーを消す』という処理を『１秒毎』に行いたいので、setInterval(function(), 1000)としています。
functionの中身は、『動画広告を消す』処理と『バナーを消す』処理になっています。
document.getElementsByClassName()というのは、クラス名を指定して、要素を配列で取得できる関数です。動画広告の『広告を飛ばすボタン』のクラス名とバナー広告のバツボタンを取得しています。
そして、その要素に対して.Click()を行うことで、要素に対して直接クリックイベントを起こします。

これはこのアプリを作った後に気づいたのですが、YouTubeの動画広告はスキップボタンの上に『5秒後にスキップ』などの要素を被せてクリックできないようにしているようで、今回のアプリではそのようなクリックできないカバー要素を貫通してスキップボタンをクリックできます（下の要素に直接作用するため）。

追記

try~cacthを使っている理由としては、動画再生中も絶え間なくこのスクリプトが１秒おきに実行されていて、もちろんその間には動画広告やバナー広告がない時間もありますから、そのようなタイミングで実行した場合本来消すべき要素が見つからず１秒ごとにエラーを吐いてしまいます。
したがって、基本的に何もしなくていい場合はcatchでエラーを受け止めてあげます。

今回if文を使ってホスト名による分岐処理を行なっているのは、後々他の動画サイトやその他webサイトの広告をにも対応させるためです。
サイトによって、消すべき要素を指すクラス名が違うと思われるので、どのようなサイトにも対応できるような仕様になっています。
YouTubeに限れば、ここの分岐処理ではなく、後述するmanifest.jsonでの設定を行うと良さそうです。

Chrome拡張として公開したい！

ここまでしっかりとした機能を実装できると、Chrome拡張として世に出したい気分になります。
そこで、実際に公開するまでの手順も軽くシェアしておきたいと思います。（今はまだ審査中で世に出てはおりません...）

JSONで設定ファイルを作る

Javascriptのプログラムファイルとは別に、その拡張機能についての設定ファイルを作る必要があるみたいです。

manifest.json
{
    "name": "YouAd Skipper",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "Sample Chrome Extension",
    "content_scripts": [{
        "matches": [ "http://*/*", "https://*/*" ],
        "js": ["youtube_auto_skip.js"]
    }],
    "icons": {
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },
    "permissions": ["activeTab"]
  }

このファイルには、アイコン画像の指定、実際に動かすプログラムファイルの指定、拡張機能の名前などを設定します。
これがないとChromeには登録できません。

アイコン画像について

アイコン画像はフリーのアイコンと文字をパワポで組み合わせて適当に作りました。
スクリーンショット 2019-09-09 10.19.57.png

拡張機能公開について

結構めんどくさかったです。
アップロードするアイコン画像や宣伝用の画像はサイズが指定されていたり、初期登録料として5.00$取られたり...。
いつかこの5ドルを取り返すべく、何かサービスを作ろうと思います。

審査待ちの状態⤵︎
スクリーンショット 2019-09-09 10.22.39.png

審査を通過し公開でき次第、リンクを貼るか記事を書くかしたいと思います！
審査は３〜４日かかるみたいで（さっき手続きした）、公開にはしばらくかかるみたいです...。
（YouTube広告を消す拡張機能をGoogleさん、許してくれるかな...）

Twitterの方も、いいね＆フォロー＆拡散お願いします！

とりあえず拡張を試してみたい方へ

TwitterでDMを送っていただければ、ファイル一式お送りいたします。
Chromeストアに登録されていない拡張機能もローカルから読み込むことができます。

設定手順

  1. Chromeを開きます
    スクリーンショット 2019-09-09 10.48.28.png

  2. その他ツールから拡張機能を開きます
    スクリーンショット 2019-09-09 10.48.41.png

  3. デベロッパーモードにして、パッケージ化されていない拡張機能を読み込むを開きます
    スクリーンショット 2019-09-09 10.48.53.png

  4. 追加したい拡張機能のファイル一式をフォルダごと選択します
    スクリーンショット 2019-09-09 10.49.26.png

  5. 追加されます
    スクリーンショット 2019-09-09 10.49.37.png

速報（2019/9/12）

Google審査通りました！！！
ChromeストアのURL↓
https://chrome.google.com/webstore/detail/youad-skipper/nhjhjoenmfpjglhfganelcdcdhebbmmi

なお、現在公開中のバージョン2.0.0では、manifest.jsonファイルでYoutube限定起動設定にしてあるので、通常のブラウジングに速度的な影響は出ないと思います！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-09-09T08:05:11+09:00

超カンタン！CSSで画像を自在に切り抜く方法

どうも！Hiroyukiです！

今日は、

「CSSで画像を自在に切り抜く方法」

をご紹介しますっ！

つまり、

好きな位置で画像を切り抜いて表示できるっ！

という、素ん晴らしぃ〜ものです（＾o＾）

僕もやってみたら、超カンタンで驚きでした（笑）

実際の利用例は、下記の通りです。

元となる画像のアップロード機能

スクリーンショット 2019-09-09 6.14.08.png

切り抜き後の画像表示　※切り抜き高さを「任意」で指定できますっ！

スクリーンショット 2019-09-09 6.14.36.png

元となる画像アップロード機能を実装

HTML

<h2>トップ画像をアップ</h2>

<figure>

        <img class="rounded" src="{{ Storage::disk('s3')->url(Auth::user()->top_image_url) }}">
        <figcaption>現在のチャンネルトップ画像（編集前）</figcaption>

</figure>

<form method="POST" action="/storeTop" enctype="multipart/form-data">

         {{ csrf_field() }}

         <input type="file" name="photo" class="btn">

　　　　　<input type="submit" value="更新する？" class="button btn btn-primary">
             　
</form>

コードだとこんな感じです。

アップした画像を表示させる　imgタグ の src = "〜〜" の中身は、当然自由なパスを入れて下さい！

ここでは、PHP/Laravelを使って、S3というAWSのストレージ機能のパスを示しているんですが、
ご自身が画像を保存する先のパスを入れて貰えれば、OK!!

CSSを使って画像を切り抜く！

はい、ここから本題ですね！

HTML

<h2>トップ画像を編集</h2>

<figure>

        <img class="rounded" src="{{ Storage::disk('s3')->url(Auth::user()->top_image_url) }}" style="width:1200px; height:200px; object-fit:cover; object-position:0% {{ $user->top_trim }}%;">
        <figcaption>現在のチャンネルトップ画像（編集済）</figcaption>

</figure>
　　　　　　　　　　
<form method="POST" action="/topTrim">
   <div class="form-group">
     <label>切り取る位置（高さ）を 0 ~ 100 の数値で入力</label>
     <div>
          <input type="number" name="top_trim" required>
          <div>例）画像の一番上を切り取る : 0 を入力</div>
          <div>　　画像の一番下を切り取る : 100 を入力</div>

     </div>
   </div>

   <input type="submit" value="更新する？" class="btn btn-primary">

</form>

imgタグ の src = "〜〜" で、上のアップした画像を表示させるものと「同じパス」を持ってきて、
それを切り抜きます！

ボクのページの場合、Twitterのマイページのトップ画像みたいに、横に細長〜く切り抜きたいので、

（上記コードも横に細長〜いため、右にスクロールしないと分かりづらいかも知れませんが（笑））

imgタグに

style="width:1200px; height:200px; object-fit:cover; object-position:0% {{ $user->top_trim }}%;

"width:1200px; height:200px" と、任意で「表示させたい画像幅・高さ」を書いています！

で、ここからがポイント！

"object-fit:cover;"と記載することで、

「画像のタテヨコ比を保持したまま、トリミングが可能となりますっ！！」

初めてできたとき、「スッゲぇ〜〜」ってなりました(笑)

更に、

"object-position: 横の位置% 縦の位置%;"と追記すれば、

「横の位置＝一番左から○%の位置で切り取る」

「縦の位置＝一番上から○%の位置で切り取る」

なんていう、すごく融通が効く、、、ステキすぎることが出来ちゃいま〜す！！（感涙）

このCSSの設定方法も、なかなか奥が深いので、ボクが書いたものじゃございませんが
下記のサイトも参考にしてみて下さい〜

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー

https://www.webcreatorbox.com/tech/object-fit

で、ボクのページでは、上記機能を更に少し発展させて、

画像を切り取る高さ（縦の位置○%）をユーザーが好きな高さに設定できるようにしてます＾＾

つまり、コードをみて頂ければ分かりますが、

object-position:0% {{ $user->top_trim }}%;

という風に、

「%」の前の数値を変数として、任意の値（高さのパーセンテージ）を

持ってこれるようにしています！！

ここでは、Laravelの変数で表現していますが、当然JavaScriptの変数など、他の変数でもOKですよ〜！

実際のサービス上で、上記機能を試して確認して頂くのが一番分かりやすい

と思いますんで、下記にボクのサービスのリンクを載せておきまーす

ボクが作ったオリジナルWebサービス（下記リンク）

http://youtubematome.herokuapp.com

新規ユーザ登録　→　チャンネル設定　→　ページ真ん中らへんの「トップ画像を編集」

で実際に使ってみることが出来まっす！！

宜しければどうぞ〜〜

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧