hi3103の備忘録

ざっくりした解説

今回は h1 要素を装飾する。左右に配置する砂時計型のブロック要素は、h1 の :before と :after で作る。

Read More

jquery.qrcode.jsとは

jquery.qrcode.js

http://jeromeetienne.github.io/jquery-qrcode/

• QRコードを生成するjQueryプラグイン
• 画像は生成されず、tableタグまたはcanvasタグで描画することができる。
• ソースはGitHubで公開されている。
  • GitHub – jeromeetienne/jquery-qrcode

使用手順

1. GitHubから jquery.qrcode.min.js をダウンロードし、jQuery本体よりあとで読み込む
2. HTML側に描画スペースを用意
3. 用意した要素に対してjQueryスクリプトを記述

Read More

SublimeLinterとは

SublimeLinter

http://www.sublimelinter.com/

SublimeText上でコードの構文チェックをリアルタイムで行えるプラグイン

手順

1. 「SublimeLinter」本体をインストール
2. 言語ごとに必要なプラグインを別途インストール

Read More

OmniMarkupPreviewerとは

OmniMarkupPreviewer is a plugin for both Sublime Text 2 and Sublime Text 3 that preview markups in web browsers.

GitHub – timonwong/OmniMarkupPreviewer

マークダウン記法で書かれたテキストを、ブラウザ上でリアルタイムプレビューできるパッケージ

導入ログ

• Package Controllから「OmniMarkupPreviewer」をインストール
• cmd + option + O でブラウザプレビュー
  • 初回、404状態になってしまった。

• パッケージのユーザ設定を追記して解決
  • Preferences > Package Settings > OmniMarkupPreviewer > Settings – User

{
	"renderer_options-MarkdownRenderer": {
		"extensions": ["tables", "fenced_code", "codehilite"]
	}
}

参考エントリー

• OmniMarkupPreviewerでブラウザプレビューすると404エラーになる | INCOMPLETE++
• Sublime TextのリアルタイムMarkdownプレビューが便利 – YoheiM .NET

やりたいこと

• 余計なデータ通信を発生させないために、YouTube動画のサムネイルをタップ・クリックしたときにだけ、埋め込み動画のiframeを読み込ませる。
• 16:9のレスポンシブ対応をする。
• サムネイル画像と埋め込みiframeで表示位置がズレないようにする。

サンプル

• https://hi3103.net/study/1902-loadytlater/

用意するもの

• 埋め込みたいYouTube動画のID
  • 再生ページのURLのパラメータにある文字列を控える

 https://www.youtube.com/watch?v=【動画ID】

ソース

HTML

• imgタグのソースに指定しているYouTubeサムネイル画像は、以下のエントリーを参考にURLを取得。
  • YouTubeの動画のサムネイル取得が思った以上に簡単だった件 | EMiAC-Works

<div class="embed-responsive" id="hoge">
	<a href="#">
		<img src="http://i.ytimg.com/vi/【動画ID】/maxresdefault.jpg" alt="">
	</a>
</div>

• クリック後は以下のようなソースになるようにする。

<div class="embed-responsive" id="hoge">
	<iframe src="https://www.youtube.com/embed/【動画ID】?autoplay=1&rel=0&controls=0"></iframe>
</div>

javascript

• jQueryのライブラリ読み込み後に以下を記述。
  • クリックされたaタグの親要素の中身をまるごと書き換えるという処理。

$(function(){
	$('#hoge a').on('click' , function(e){
		e.preventDefault();//リンクの停止
		$(this).parent().html('<iframe src="https://www.youtube.com/embed/【動画ID】?autoplay=1&rel=0&controls=0"></iframe>');
	});
});

• 埋め込みのオプションを指定する場合は、動画IDの後にパラメータを付与。
  • クリックしたらで自動再生：autoplay=1
    • これは入れておくのがおすすめ。
    • 入れないと、サムネタップ→再生ボタンタップで2回閲覧者に行動させることになる。
    • 【追記】YouTubeブラウザの仕様上、スマホだと自動再生しない。追って調べます。
  • 再生終了後に関連動画を表示しない：rel=0
  • コントローラーを表示しない：controls=0
• パラメータは、1つめは「?」で、2つめ以降は「&」でつなげる。

CSS

• サムネイルと埋め込み動画を16:9比率のままレスポンシブ対応させる
  • 参考：Embeds · Bootstrap
• アスペクト比を変えたい場合は、 .embed-responsive の padding-top を変更する。
  • 例：16:9の場合、100/16×9=56.25なので56%。4:3の場合、100/4×3=75なので75%、という考えかた。

.embed-responsive{
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	padding-top: 56%;
	margin-bottom: 1em;
}
.embed-responsive iframe,
.embed-responsive img{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

追記

• 2019-02-23：ソース一部修正しました。

2018年10月26日(金)〜28日(日)に渋谷ヒカリエで開催された「瀬戸ツクリテの手仕事 in渋谷ヒカリエ」に行ってきました。行くきっかけになった名古屋旅行とイベント当日の出来事をレポートします！

“セトモノ”のまち・瀬戸の職人さんのものづくり

器や皿など焼き物のことを、ふだん何気なく”セトモノ”と呼んでいると思います。

これ、もともとは瀬戸で作られた焼き物を指す「せともの(瀬戸物)」が、日本中に広く普及して焼き物の代表的存在になったという背景から、いつしか焼き物全般を”せともの”と呼ぶようになったんだそうです。

そんな陶器のまち、愛知県瀬戸市の職人さんの作品を展示・販売するイベントが「瀬戸ツクリテの手仕事 in渋谷ヒカリエ」です。

Read More

クリーンインストール後のセットアップの一貫で Soundflower をインストールしようとしたらエラってちょっと苦戦したので、未来の自分のためにまとめました。

Read More

前回のあらすじ

• macOS High Sierra から macOS Mojave にアップグレードする
• OSアップグレード後は必ずクリーンインストールしているので、こちらも同じように記録しました。
  • 蓄積されたゴミファイルや設定を一掃してからセットアップしたほうが不具合が少ない(と思う)ので、いつもセットでやってます。

Read More

2012年製のMacBook Airをしつこく使い続けているサトウです。ようやく最新OSにアップデートできたので、所要時間と流れを記録しました。

Read More

Adobe MAX 2018の発表で大型アプデが来ましたね。

バージョンが変わるので一応アクションなどバックアップを取っておこうと思ったのですが、毎回どこにあるか調べてるなあと思ったので、まとめておきます。

イラレはヘビーに使ってないのであっさり気味です。

Read More