Tag Archives: YouTube

relaxin’ リラクシン の地図表示が履歴対応しました!

0
Filed under JavaScript, ウェブサービス
Tagged as , ,

「relaxin’ リラクシン」は、弊社が制作、運営しているリラクゼーションサロンのポータルサイトです。

去年の7月末にリリースしてから地道にデータを追加したり、デザインを調整したりしています。
店舗データについては当初100店舗程度でしたが、現在は約1,300店舗となっています。
昨日、リラクシンをPCから見た時の使い勝手を良くしました!
という紹介記事です!
relaxin back button

「近所の店舗を探す」機能

「relaxin’ リラクシン」の最大の特徴は、全ての店舗情報に位置情報があることです。
これにより自分のいる場所などから近くの店舗を探すことが出来るようになっています。
そして、この度、この地図周りの機能を修正し、PCのブラウザの『戻る』『進む』ボタンに対応しました!
概要などを下記の動画にて紹介していますので、ぜひご覧ください。

ちなみに、relaxin’ リラクシンへの店舗掲載/情報修正の依頼等はこちら→http://relaxin.info/contact/

技術メモ

この機能について当初どうやればいいのか分からなかったのですが、弊社のパートナーに聞いた所 “window.location.hash” で出来るということが分かり、早速実装してみたのでした。
JavaScriptでwindow.locationをいじると基本的にリロードされてしまうのですが、window.location.hashの変更ではリロードされない、という特性を活かしたもので、Gmailなどでも広く使われている手法のようです。
あとはハッシュの変化を監視し、変化のタイミングで内容を変化させる、という仕組みですね。
※参考にしたサイトはこちらです→「AjaxでUnique URLを使い、戻る/進むボタンにも対応させる | TM Life」
ありがとうございました!


[AD]

↓Kindleで読めるJavaScriptの解説書

よくわかるJavaScriptの教科書 教科書シリーズ

よくわかるJavaScriptの教科書 教科書シリーズ

カテゴリ:Kindle版

発売日:2012-03-24


↓スタートアップといえばYコンビネーター。これは是非読みたい!

Yコンビネーター シリコンバレー最強のスタートアップ養成スクール

著者/訳者:ランダル・ストロス

出版社:日経BP社( 2013-04-25 )

定価:

Amazon価格:¥ 1,944

単行本 ( 456 ページ )

ISBN-10 : 4822249468

ISBN-13 : 9784822249465


TomblooのYouTube対応を改良してみた

4
Filed under Firefox, JavaScript, Mac, ウェブサービス
Tagged as , , , , , ,

Tombloo

Tomblooというとても便利なFirefoxアドオンがあります。
コンテキストメニューから選ぶだけで、見ているページをいい感じにウェブサービスに投稿出来るアドオンです。

私はこれでTumblrへの投稿を行っています。
文字列を選べばそれを引用として投稿でき、動画サイトならそれに適した形でプレビューなどを埋め込んでくれます。
インストール方法は、以下のリンク “tombloo.xpi” を右クリックし、 名前をつけてリンク先を保存でダウンロードしてください。ダウンロードされたファイルをFirefoxのウィンドウへドロップするとインストールがはじまります。

tombloo.xpi

追記:2010/08/18

tomblooの作者toさんがコメントされたように下記に書いたYouTubeでの問題への対応は、公開されているスクリプトに取り込まれました (github)

コミットされたコードも洗練されているので勉強になりますね。


情熱プログラマー ソフトウェア開発者の幸せな生き方

著者/訳者:Chad Fowler

出版社:オーム社( 2010-02-26 )

定価:

Amazon価格:¥ 2,592

単行本(ソフトカバー) ( 200 ページ )

ISBN-10 : 4274067939

ISBN-13 : 9784274067938



YouTubeでの問題

注意:前述したように、2010/08/18現在、最新tombloo.xpiでは下記の問題は修正されていますが、技術メモとして残しておきます。
最近YouTubeのHTML形式が変わったりしてちょっと問題があったりしましたが、それについてはこちらのブログエントリ「TomblooからYouTube動画をpostできなくなった件 – FLYING」で紹介されているようにアドオンのJavaScriptソースをいじることで対応出来ました。
ただ、それでもいくつかのYouTube動画で、これでも対応しきれないところがあり、ちょっと気になっていましたので、原因を調べてみました。

調査、解決コード

問題が発生する動画ページは、例えば、この動画です。
他のページと何が違うのか、考えてみると、左上の動画投稿者の名前が入るべきところにバナーが入っています。そこのHTMLタグ取得に失敗してるのが原因と分かりました。

前述したブログでの修正内容を見て、修正すべきは次のファイルであると分かりました。
Windowsの場合は、
C:\Documents and Settings\(ユーザー名)\Application Data\Mozilla\Firefox\Profiles\(プロファイル名)\extensions\tombloo@brasil.to\chrome\content\library
Mac OS Xの場合は、
/Users/(ユーザー名)/Library/Application Support/Firefox/Profiles/(プロファイル名)/extensions/tombloo@brasil.to/chrome/content/library
にある、
31_Tombloo.Service.extractors.js
です。
このファイルの1230行目辺りを以下のように書き換えます。これで動作するようになりました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{
  name : 'Video - YouTube',
  ICON : 'http://youtube.com/favicon.ico',
  check : function(ctx){
    return ctx.host.match('youtube.com');
  },
  extract : function(ctx){
    var author = $x('id("watch-username")');
    ctx.title = ctx.title.replace(/[\n\r\t]+/gm, ' ').trim();
    if( !author ){
      author = $x('id("watch-userbanner")');
      var t0 = author.href;
      var t1 = t0.match( /[^/]+$/ );
      var t2 = author.textContent.replace( /<img.*\/>/, t1 );
      return {
        type      : 'video',
        item      : ctx.title.extract(/ - (.*)/),
        itemUrl   : ctx.href,
        author    : t2,
        authorUrl : author.href,
      };
    }
    else{
      return {
        type      : 'video',
        item      : ctx.title.extract(/ - (.*)/),
        itemUrl   : ctx.href,
        author    : author.textContent,
        authorUrl : author.href,
      };
    }
  },
},

ちょっと強引に直していますが、まぁ、いいかな。


[AD]

↓YouTubeからUstreamへと、今、何かが変わりつつある。

USTREAM 世界を変えるネット生中継 (ソフトバンク新書)

著者/訳者:川井 拓也

出版社:SBクリエイティブ( 2010-05-19 )

定価:

新書 ( 200 ページ )

ISBN-10 : 479736016X

ISBN-13 : 9784797360165


↓ Make:ブランドのArduino本、面白そう!

Arduinoをはじめよう (Make:PROJECTS)

著者/訳者:Massimo Banzi

出版社:オライリージャパン( 2009-03-27 )

定価:

Amazon価格:¥ 1,500

単行本(ソフトカバー) ( 216 ページ )

ISBN-10 : 4873113989

ISBN-13 : 9784873113982


iMovieとGarageBandでの動画作成メモ

0
Filed under FrameCamera, Mac
Tagged as , , , ,

FrameCameraFrameCamera (http://www.FrameCamera.com/) の操作デモを作ろうと思い立ち、トライしてみたら、3時間程度でYouTube にアップするところまで出来ました!
ある程度わかっているともうちょっと早くできるかもしれないと思うので、次回の作業のための踏み台メモです。

完成動画

こちらが完成した動画です。

以下では、この動画制作をざっくりと説明していき ます。

やりたかったのは、MacBook ProにFirewireで接続したDVカメラから直でMacに取り込んで、それをiMovieで編集し、BGMはGarageBandで付ける、とい うことでした。
この作業で学んだ最も重要なポイントは、「まずiMovieで編集したあと、GarageBandから読み込み、最後の出力を行う」ということ。
私はFinalCut Proとか、Premiereとか使った経験で「最後の編集は動画編集ソフトで行う」という前提が頭にあったため、ここにハマってしまいました。
とにかく「iMovie→GarageBand→出力」という流れを意識しておけば特に問題ないと思います。

iMovieで記録する

まずは撮影です。
YouTubeに書きだすのが目的なのでわざわざテープに保存とかしません。直接Macに保存します。
「ファイル」メニュー の「カメラから読み込む」を選び、記録します。
私はここで、iMoveでDVカメラ接続に手間取ってしまいました。
なかなか認識されなく て問題が分からず困ってしまいましたが、「システムプロファイラ」というのが「ユーティリティ」フォルダ内にあるので、それでFirewire接続されて いるかどうかを確認したら、しばらく待っていたらiMovieに出てくると思います。
1度くらいiMoveを再起動していると出てくるかもしれま せん。
ちなみに、昔から使っているFirewireケーブルは最近のMacにはつながらなかったので、変換コネクタを用意しておきました。

GeSPEC FireWire800-400 変換アダプタ GS-FW84W

GeSPEC FireWire800-400 変換アダプタ GS-FW84W

カテゴリ:Personal Computers

発売日:2009-08-04


ざっくり編集

今回は操作デモをつくるので、変種そのものはあまり凝りません。
テンポ感を重視して、ざくざく切って、ぺたぺた繋げていきました。
その上からテロップを載せて編集は完了です。
テロップは「ウィンドウ」メニューから「タ イトル」を選び、タイトルパネルを表示させ、そこからプロジェクト上にドロップして設定します。継続時間を適当に設定し、文字なども調整します。
iMovie の基本的な使い方については、「Mac Fan iMovie ’09 マスターブック」という書籍を参考にしました。

Mac Fan iMovie '09 マスターブック (Mac Fan BOOKS)

著者/訳者:TART DESIGN

出版社:毎日コミュニケーションズ( 2009-05-30 )

定価:

単行本(ソフトカバー) ( 160 ページ )

ISBN-10 : 4839932212

ISBN-13 : 9784839932213


BGMを用意する

次 にBGMを作ります。
GarageBandの基本機能でつくりますが、どうもインストール時にほとんどの音源をインストールしていなかったらし く、どの音源も要インストール状態になっていました。
制作時は、とにかく短時間でアップしてみたい、と考えていたので、追加インストールも面倒に なり、初期設定の音源をランダムで楽器変更し、トラック別にタイミングをずらしたりループ回数を増やしたりしただけで、完成、としました。
これで もそれなりの音楽ができてしまうのがGarageBandのすごいところ。
なんとなくは作れても、それでも一度本とかに目を通して、きちんとすべての操作をマスターしておいたほうが良さそう、とは思いました。

Mac Fan GarageBand '09マスターブック (Mac Fan BOOKS)

著者/訳者:木村 公彦

出版社:毎日コミュニケーションズ( 2009-04-28 )

定価:

単行本(ソフトカバー) ( 264 ページ )

ISBN-10 : 4839932247

ISBN-13 : 9784839932244


動画とBGMのミックス

最初に書いた通り、まずiMovieから出力します。
iMovieの「共有」メニューから「メディアブラウザ」を開 き、適当なサイズで出力します。
このとき出力先とか指定するダイアログが出てきませんが、iMovieのプロジェクトフォルダ内に出力されます。
次 にGarageBandのビデオトラックに先程の動画を取り込みます
GarageBandの右下にあるボタンから「メディアブラウザ」を開きま す。
iMovieのプロジェクトも見えると思いますが、その中に先程出力した動画があるので、それをトラックに追加します。

これで動画の長さを確認しつつ最後のBGMの調整を行います。
GarageBandからのミックスしたものの出力ですが「共 有」メニューから「ムービーからディスクに書き出し」を選び、「最高」品質で書きだします。
これでとりあえずMac上ではBGMと動画がミックス されたmovファイルが生成されます。

YouTubeにアップする前に

ここまででうまくいったと思いきや、最後にちょっとハマったのが、この動画ではYouTube上で見たときに、GarageBandでつけたBGMが無くなっている現象。
movファイルってデータはルー ズな結合をしていることがあったなぁ(BGMは参照としてのみつながっていることがある)、と思い出し、QuickTime Player Xで開いて、m4v形式で書き出したものをアップしたら問題なくなりました!

iMovieもGarageBandももうちょっと機能を勉強しておけば印象がぐっと良くなることがありそうですが、ここは少しずつ勉強と経験を積み重ねていくしかありませんね。

でもまぁ、短時間でここまでのものが公開できるソフトが標準で入っているっていうのはやっぱりMacBook すごい!と言わざるを得ません。

Apple MacBook Pro 2.26GHz 13.3インチ MB990J/A

Apple MacBook Pro 2.26GHz 13.3インチ MB990J/A

定価:¥ 138,651

カテゴリ:Personal Computers

発売日:2009-06-10



[AD]

↓この本ならiMovieとGarageBandの連携が書かれていそうですね。

iLife '09 Perfect Manual

著者/訳者:村上 弘子 白瀧 由裕 井村 克也

出版社:ソーテック社( 2009-04-18 )

定価:

単行本 ( 319 ページ )

ISBN-10 : 4881666827

ISBN-13 : 9784881666821


↓しかしXactiとか安いですね!これならもっと頻繁に動画撮るかも!(持っているのは10年くらい前のminiDVカメラなんで…)

SANYO デジタルムービーカメラ Xacti ザクティ DMX-CG11 ホワイト DMX-CG11(W)

SANYO デジタルムービーカメラ Xacti ザクティ DMX-CG11 ホワイト DMX-CG11(W)

定価:¥ 30,651

カテゴリ:Camera

発売日:2009-09-11