hi3103の備忘録

今回解決させること

カテゴリーアーカイブのURLから /category を取り除く

• WordPressデフォルトのカテゴリーアーカイブのURL形式は以下。
  • /notes/category/カテゴリースラッグ/
• このサイトでは、個別記事のURLを以下に設定している。
  • /notes/カテゴリースラッグ/記事ID
• なので、上記にあわせてカテゴリーアーカイブのURLも以下のようにしたい。
  • /notes/カテゴリースラッグ/
• つまり、カテゴリーアーカイブのURLから /category の部分を削除したい。

/category なしURLにアクセスした際の表示不具合を防ぐ

問題の挙動

• カテゴリーアーカイブのURL形式は
  • /notes/category/カテゴリースラッグ/
• なので、以下のURLは「正しくないURL」のはず。
  • /notes/カテゴリースラッグ/
• が、実際にアクセスすると404にはならず、カテゴリーアーカイブの1ページ目が表示されてしまう。

何が困るのか？

• カテゴリーアーカイブの2ページ目以降の正しいURLは
  • /notes/category/カテゴリースラッグ/page/2
• なので、ページネーションのリンク先として生成される以下のURLは「正しくないURL」
  • /notes/カテゴリースラッグ/page/2
• 実際にアクセスすると、こちらは404が表示される。

つまり

カテゴリーアーカイブURLから /category を抜いたURLにアクセスした場合、「1ページ目は問題なく見れるのに、2ページ目以降には行けないページが見れてしまう」状態になっている。

概要

• デフォルトのFacebookシェアボタンを使わないでFacebookのシェアボタンを作った
• ざっくりした流れ
  1. Facebook for Developersに登録・アプリケーションを作成し、app_idを発行
  2. シェアダイアログを使ったシェアボタンを作成

概要

• うちのサイトトップで出力しているYouTube動画埋め込みの出力に使っている仕組みの備忘録。
• プレイリストの情報（入っている動画情報も含む）をJSON形式で取得するところまでをまとめた。
  • 応用としてチャンネル情報＆検索結果も取得して遊んでみた。
• 実際にiframe等HTMLで出力するにはJSONをパースして組み立てる必要あり。

Sublime Text 上でコードの圧縮処理をするのに、Package Control から「YUI Compressor」をインストールしようとしたがパッケージがヒットしなかったので、Terminal 上でサクッと使えないかなと思って試してみた。

YUI Compressor とは

YUI Compressor

http://yui.github.io/yuicompressor/

• JavaScript / CSS ファイルの圧縮処理ができるツール
• Javaで書かれているため、動作には Java Platform (JDK) が必要

概要

• YouTubeチャンネルは、以下のようなURLでRSSフィードを吐いてる。

https://www.youtube.com/feeds/videos.xml?channel_id=【チャンネルID】

• これをPHPのsimplexml_load_file関数で読み込み、パースして出力する。

サンプル

• https://hi3103.net/study/1905-ytrss/
  • 今回は動画IDとタイトルを取得し、リスト形式のリンクを出力してみた。

ざっくりした解説

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

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スクリプトを記述

SublimeLinterとは

SublimeLinter

http://www.sublimelinter.com/

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

手順

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

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/