YouTube Data API v3 を使って任意のプレイリストの動画情報をJSON形式で取得する jQuery + Ajax

Web

概要

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

Read More

Homebrew 経由でインストールした YUI Compressor を使って JavaScript ファイルを Terminal 上で圧縮する

Mac

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

YUI Compressor とは

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

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

Read More

YouTubeチャンネルのRSSフィードをPHPでパースして出力する

Web

概要

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

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

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

サンプル

Read More

jquery.qrcode.js を使用して生成したQRコードをPNG画像として保存する

Web

jquery.qrcode.jsとは

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

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

使用手順

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

Read More

Sublime Text 3 に OmniMarkupPreviewer を導入する

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"]
    }
}

2020-03-28追記:404再発

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

参考エントリー

YouTubeのサムネイル画像をクリックしたら埋め込みiframeを読み込むjQuery

Web

やりたいこと

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

サンプル

Read More

「瀬戸ツクリテの手仕事 in渋谷ヒカリエ」に行ってきた!

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

2019年12月3日追記:
ブログご覧いただきありがとうございます!こちらのイベント、今年は12月13日(金)〜15(日)に開催されるそうです。
8/01/COURT/瀬戸ツクリテの手仕事in渋谷ヒカリエ
この記事を読んで気になった方はぜひ会場に足を運んでみてください!

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

器や皿など焼き物のことを、ふだん何気なく"セトモノ"と呼んでいると思います。
これ、もともとは瀬戸で作られた焼き物を指す「せともの(瀬戸物)」が、日本中に広く普及して焼き物の代表的存在になったという背景から、いつしか焼き物全般を"せともの"と呼ぶようになったんだそうです。
そんな陶器のまち、愛知県瀬戸市の職人さんの作品を展示・販売するイベントが「瀬戸ツクリテの手仕事 in渋谷ヒカリエ」です。
Read More