ラベル internet の投稿を表示しています。 すべての投稿を表示
ラベル internet の投稿を表示しています。 すべての投稿を表示

2017年1月25日水曜日

プレゼンで開始と終了時間を指定した Youtube の再生方法

このエントリーをはてなブックマークに追加 Evernoteにクリップ
Youtubeの開始と終了時間を指定 title

PowerPoint で作成したプレゼン資料に Youtubeの動画を使おうと思ったのですが、使いたいのは一部分だけ。Youtubeの再生で開始時間と終了時間を指定する方法がないかと探してみると、Googleの開発者向けページにYouTube 埋め込みプレーヤーとプレーヤーのパラメータ という説明ページがありました。

これをみると、start と end パラメータを使えば簡単にできそうです。

start
値: 正の整数。このパラメータを指定すると、動画の先頭から指定された秒数分進めた位置から動画の再生が開始されます。リクエストされた時間の直前から再生が開始される場合もありますが、ずれは通常、最大で 2 秒程度です。【引用:YouTube埋め込みプレーヤーのパラメータ】

end
値: 正の整数。動画の再生を停止する必要がある場合に、動画を開始してからの経過時間を秒単位で指定します。【引用:YouTube埋め込みプレーヤーのパラメータ】

ということで、さっそく実践。

Youtubeで埋め込みコードを取得する


細野晴臣 矢野顕子 - 終わりの季節 (Owari No Kisetsu) - YouTube を例にとって説明します。

① 上記をクリックして動画の下にある”共有”をクリックして”埋め込みコード”を選択
② 埋め込み用コードの下にある”もっと見る”をクリック

image

プレビューの下にあるオプションで”動画のサイズ”などを変更できます。プレゼンであれば、”動画が終わったら関連動画を表示する”のチェックはオフにします。

image

③ ここでは動画サイズで 640x360 を選択。
④ ”動画が終わったら関連動画を表示する”のチェックをオフ
⑤ 埋め込みコードをパワポにコピペ

下記が上記オプションを指定したときの埋め込みコードになります。

<iframe width="640" height="360" 
src="https://www.youtube.com/embed/dBK9_5boT4c?rel=0" frameborder="0" 
allowfullscreen></iframe> 
width と height が動画サイズ(640x360)の指定で、URLの ? の後ろにある rel=0 が動画終了後に関連動画を表示しないためのパラメータです。

開始と終了時間の指定

この埋め込コードに開始(start)と終了(end)の時間を秒単位で指定します。

<iframe width="640" height="360" 
src="https://www.youtube.com/embed/dBK9_5boT4c?rel=0;start=209;end=238"
frameborder="0" allowfullscreen></iframe> 

start=209
starが開始時間の指定で 209秒 (3分29秒)から再生されます。

end=238
endで終了時間を指定します。238秒(3分58秒)が再生終了ポイントです。

”;(コロン)” はパラメータの区切り文字です。

下記のURLから実際に3分29秒~3分58秒の動画確認できます。
https://www.youtube.com/embed/dBK9_5boT4c?rel=0;start=209;end=238

この埋め込み用のURLを使って開始時間と終了時間の調整をしましょう。

パワポにYoutubeの動画を組み込む

作成した埋め込みコードを使って、PowerPointに開始と終了時間を指定した動画を組み込みましょう。説明は PowerPoint 2016 をベースにしていますが、他のバージョンでも操作はほぼ同じです。

① 「挿入」タブを選択
② 「ビデオ」の中の「オンラインビデオ」を選択

image

③ 「ビデオの埋め込みコードから」に開始と終了時間を指定した埋め込みコードを貼り付ける

<iframe width="640" height="360" src="https://www.youtube.com/embed/dBK9_5boT4c
?rel=0;start=209;end=238" frameborder="0" allowfullscreen></iframe>

image

動画のサイズを調整して完成です。

2017-01-23

*動画はPCには保存されていないのでプレゼンのときはインターネット環境が必要です。

ブログへの貼り付け

上記の再生時間を指定した埋め込みコードはブログでも利用できるので、動画の一部分を紹介したいときにも使うことができます。


2016年6月25日土曜日

アンカー・リンクでブログに索引をつける

このエントリーをはてなブックマークに追加 Evernoteにクリップ
blog

今回はアンカーリンク(ページ内ジャンプ)についての備忘録です。参考にしたのは、How to create anchor links in wordpress & Blogger – Jump links (wordpressとBloggerでのアンカーリンクの設定方法)ですが、アンカーリンクは、wordpress や Blogger に特化したものではありません。

ということで、アンカーリンクを使ってインデックス付きの記事を書いてみました。

Index:

アンカーリンクとは

Anchorアンカー(anchor)とは、船を固定するための錨(いかり)のことです。アンカーを下すことで船を固定できるので、固定した場所にリンクすることなのだと理解しています。

HTMLではaタグ(アンカー・タグ)を使ってアンカー・リンクすることでページ内の特定の場所にジャンプさせることができます。



索引としてアンカーリンクを使う

書籍や辞書では目的の内容を読むために索引を参照してページをめくりますが、ブログやネットの記事なら索引から直接目的の場所にジャンプさせることができます。またジャンプした場所の章の最後に「索引に戻る」リンクを付けておけば、スクロールせずに索引を行き来しながら記事を読むことができます。

何より記事の先頭に索引(目次)があると何が書かれているかを俯瞰することができるので読み手としては便利です。

アンカーリンクの設定方法

ジャンプ先であるアンカー名とジャンプ元のリンクの設定方法についてです。

リンク場所(アンカー)の設定

もともとはaタグのname属性でアンカーを指定するようになっていたようですが、HTML5からID属性だけで認識されるようになったようです。この記事ではh3の見出しにID属性でアンカーの設定をしています。

<h3 id=”アンカー名”>テキスト</h3>

例えば、この章の「アンカーリンクの設定方法」では、h3タグの中でid属性を使ってアンカー名を下記のように設定しています。

<h3 id=”how_to_set”>アンカーリンクの設定方法</h3>

下記は、aタグを使う場合です。

<a id=”アンカー名”>テキスト</a>

リンクの設定

リンクの設定は、aタグで外部ページにリンクするときと同じようにhref(Hypertext Reference)を使いますが、URLではなく#アンカー名 を設定します。別ページのアンカーにジャンプさせるのであれば、<a href="https://walking-elephant.blogspot.com/2016/06/flickr.html/#アンカー名">のようにURLを指定します。

<a href=”#アンカー名”>

Indexのアンカーリンクの設定方法 には、

<a href=”#how_to_set”>アンカーリンクの設定方法</a>

と設定しています。

ページの先頭に戻す

リンクの設定で下記のように#の後ろにアンカー名を付けなければページの先頭に戻ります。

<a href=”#”>


Bloggerでの注意事項

Bloggerの場合、リンク元の設定で <a href="#アンカー名"> としても、勝手に下記のように <a href="https://draft.blogger.com/……/#アンカー名"> とドラフト(プレビュー用)のURLがついてしまいます。

image

もちろんリンク元で正確なURLを設定してもいいのですが、Bloggerの場合だと、PostするまでブログのURLがわからないので、公開する前にもう一度リンク先を下記のように#アンカー名に書き換えてください。

URLを書き換える場合は、HTMLモードで変更してそのまま投稿する必要があるようです。作成モードに変更してしますとURLが書き換わってしまいますので注意を。公開後も内容を変更するのであれば、面倒ですが公開後にURLを確認して#の前にURLを追記しましょう。


2016年6月18日土曜日

Flickr の画像でブログを彩る

このエントリーをはてなブックマークに追加 Evernoteにクリップ
Fli
ckr Logole
ブログも写真があると引き締まりますが、ブログの内容によっては、なかなか記事にあった写真がない場合があります。そんなときには、Flickrで写真を探してみましょう。差し込み用のタグも用意されているので利用も簡単です。Flickrにアップされている写真には クリエイティブ・コモンズ・ライセンス(CC) で写真の利用を許可しているものがあります。営利目的でも利用できたり、加工して二次利用可能な写真も多数ありますので、ライセンスに従ってFlickrにアップされている写真をブログで使ってみましょう。もちろん、著作権で保護されている写真(© All Rights Reserved)は利用できませんのでご注意を。

クリエイティブ・コモンズ・ライセンス の写真の探し方

まずは、Flickrでクリエイティブ・コモンズ・ライセンスとなっている写真を探してみましょう。Search | Flickr - Photo Sharing! の Any license でパラメーターを指定します。

image

この中でクリエイティブ・コモンズとなっている写真を探すのであれば、下記の4つの中から指定します。
  • All creative commons (すべてのクリエイティブ・コモンズ・ライセンス)
  • Commercial use allowed (商用利用可)
  • Modifications allowed (二次利用可)
  • Commercial use & mods allowed (商用利用可かつ二次利用可)
検索キーワードは日本語でも可能ですが、英語で検索した方がより多くの写真がヒットします。

クリエイティブ・コモンズ・ライセンスの種類

Flickrの検索結果から写真を選択すると写真の右下にライセンスについてのロゴ(黄色アンダーライン)があります。

image

Flickr: Creative Commons にクリエイティブ・コモンズのロゴについての説明がありますが、英語表記となっているので、クリエイティブ・コモンズ・ライセンスとは | クリエイティブ・コモンズ・ジャパン と合わせて説明を記載します。


Attribution Attribution License (表示)
原作者のクレジット(氏名、作品タイトルなど)を表示することを主な条件とし、改変はもちろん、営利目的での二次利用も許可される最も自由度の高いCCライセンス。

原作者のクレジット(氏名、作品タイトルなど)を表示すれば、商用利用もできますし、また加工して二次利用も可能です。

by Paul Downey - Flickr logole

加工をしないのであれば、Flickrが提供する差し込み用のタグを利用すれば簡単に利用できます(Flickrの画像を簡単に利用する方法を参照)。

Attribution No Derivative Works Attribution-NoDerivs License (表示-改変禁止)
原作者のクレジット(氏名、作品タイトルなど)を表示し、かつ元の作品を改変しないことを主な条件に、営利目的での利用(転載、コピー、共有)が行えるCCライセンス。

こちらは、加工が禁止されている画像なので埋め込みタグで利用しましょう(Flickrの画像を簡単に利用する方法を参照)。

Attribution Noncommercial No Derivative Works Attribution-NonCommercial-NoDerivs License (表示-非営利-改変禁止)
原作者のクレジット(氏名、作品タイトルなど)を表示し、かつ非営利目的であり、そして元の作品を改変しないことを主な条件に、作品を自由に再配布できるCCライセンス。

営利目的の利用と加工が禁じられていますので、アフィリエイト・ブログでの利用も避けましょう。

Attribution Noncommercial Attribution-NonCommercial License (表示-非営利 )
原作者のクレジット(氏名、作品タイトルなど)を表示し、かつ非営利目的であることを主な条件に、改変したり再配布したりすることができるCCライセンス。

こちらは非営利目的であれば利用可能です。

Attribution Share Alike Attribution-ShareAlike License (表示-継承)
原作者のクレジット(氏名、作品タイトルなど)を表示し、改変した場合には元の作品と同じCCライセンス(このライセンス)で公開することを主な条件に、営利目的での二次利用も許可されるCCライセンス。

ShareAlike Licence(継承)とは、この表示がされている作品を二次利用して利用した場合には、原著作物と全く同一の条件下でライセンスしなければならないということです。

Attribution Noncommercial Share Alike Attribution-NonCommercial-ShareAlike License (表示-非営利-継承
原作者のクレジット(氏名、作品タイトルなど)を表示し、かつ非営利目的に限り、また改変を行った際には元の作品と同じ組み合わせのCCライセンスで公開することを主な条件に、改変したり再配布したりすることができるCCライセンス。

最後がクレジットの表示、営利目的の禁止、継承というパターンです。

Flickrの画像を簡単に利用する方法

Flickrが提供するEmbed(埋め込みタグ)を使えば簡単にFlickrの画像が利用できます。サンプルで使用した画像は Attribution Attribution License なので原作者のクレジットを表示すれば営利目的での利用も加工も可能です。

① 右下のオレンジで囲った共有アイコンをクリックします。

image

② Embedタグでソースをコピーします。

image

後は、コピーしたソースをブログに張り付けるだけです。オプションには Header(下図①)  Footer(下図③) 、Slideshowがあります。Slideshowは作者の他の写真をスライドショーとして見せるためのオプションです。写真のサイズも選択できますが、ブログ上で変更することも可能です。下図 のFacebook、Tumblr、Twitter、Pinterest での共有アイコンについては写真をマウスオーバーすると現れます。また写真をクリックするとFlickrの該当ページが開きます。

image

Flickrを活用しましょう!

Flickr icon

2016年3月13日日曜日

ブログを書くのも簡単なのがいい

このエントリーをはてなブックマークに追加 Evernoteにクリップ
ブログを更新するのに Windows Live Writer を使っていましが、GoogleのOAuth2認証に対応をしなかったので、2015年12月にBloggerで使うことができなくりました。マイクロソフトは Windows Live Writer のサポートは行わないようです。

現在、Windows Live Wrier から Blogger にアクセスしようとすると "NotFound: Not Found" とエラーとなります。

Windows Live Writer - Error Message

「どうする?ブログの更新」と思っていたら、MicrosoftのWindows Live Writerがオープンソース化され.NET Foundationで、Open Live Writer (OWL) として生まれ変わりました。Google Bloggerの認証も問題ありません。

Open Live Writer でブログを書こう

Open Live Writer の特徴
  • スタイルシートが適用された状態で編集
  • 写真の加工(枠線なし、切り抜き)が便利
  • 表の作成が簡単 
  • Word感覚の操作
  • プラグインで更に便利に
Open Live Writer の機能や操作性は、Windows Live Writer とほとんど同じです。事前に横幅やスタイルシートなどを読み込むので、自分のブログ上に直接書きこんでいるように使うことができます。

Windows Live Writer - Editor

プレビューモードだとこんな感じです。

Windows Live Writer - Preview

基本的な操作はWordなどで装飾した文章を作成するのと同じです。写真をコピペして、そのあとに必要な部分だけを切り抜いて、枠線を消すという作業も簡単にできます。もちろん表も挿入できます。HTMLコードも直接編集することもできますが、Office製品と同じ操作性というのは大切なことです。

残念なのは、Windows Live Writer の機能を拡張してくれていたプラグインはComing Soonとなっています。

Open Live Writer - Plugins

Windows Live Writer のプラグインは超便利

Windows Live Writer はプラグインをインストールすることで機能拡張ができます。早くOpen Live Writerでも各種プラグインが利用できるようになるといいのですが。多くのWindows Live Writer向けのプラグインがありますが、重宝しているのは下記の3種類のプラグインです。
プラグイン三種の神器
  1. Url2Ttile
  2. コード左衛門
  3. Dynamic Template

1.URLをコピペするとタイトルに変換

リンク先のURLを設定するにはハイパーリンクでできますが、Url2Title Plugin for Windows Live Writer を使うとリンク先のタイトルを入力する手間暇が省けます。

URLをコピペすると、http://walking-elephant.blogspot.jp/ ではなく、象と散歩 となります。

2.アフィリエイトの差し込みを簡単に

HTMLを直接変更できるのですが、差し込み位置などを探す手間が発生します。コード左衛門 | 鍋風呂 を使うとHTMLソースをみることなく、編集画面上からHTMLコードを差し込むことができます。

選択した範囲をタグで囲む

Dynamic Template は選択した範囲を指定したタグで囲ってくれます。例えば文字を枠で囲みたいときにあらかじめBorder1という名前で下記のように設定しておくと、選択した範囲を<div class=”border1”></div>で囲ってくれます。

<div class="border1"><%= _selection %></div>

Windows Live Writer と Open Live Writer の併用

Windows Live Writer と Open Live Writer を両方インストールしてあると、ローカルに保存した記事が両方から参照できました。つまりプラグイン機能を使ってWindows Live Writerで記事を書いて、ブログへのアップロードはOpen Live Writerという使い方ができます。

ということで、OWLがプラグインをサポートするまで暫くの間は、Windows Live Writerと併用するのがよさそうです。

2016年1月30日土曜日

Windows10 で Sony VGF-WA1を楽しむ

このエントリーをはてなブックマークに追加 Evernoteにクリップ
自宅でBGMを楽しむためには、Apple Music を始めとしたさまざまな音楽のストリーミングサービスがあります。またインターネットラジオに関してもスマホアプリで受信して、BluetoothやAirplayでスピーカーやコンポと接続する方法があります。それでも卓上型のインターネットラジオには捨てがたさがあります。

長年 SONYのVGF-WA1を愛用していますが、音質の良さとラジオと同じ手軽さ、そして、SHOUcastからお気に入りのインターネットラジオ局を登録していれば、そのときの気分に合わせてクラシック、JAZZ、ロック、ポップとボタンひとつで色々なジャンルの音楽に囲まれることができます。また気になった局があればパネル上に表示される曲名もチェックできます。

先日、Sony VGF-WA1をWindows7で使う | 象と散歩 にSHOUTcastが使えないというご質問もいただきました。まだVGF-WA1を同じように愛用しているひとたちもいるんだとうれしく思い、あらためてWindows10でのSHOUTcastの登録方法を記載しておこうと思いました。

しかも、Amazonで検索するとVGF-WA1/W(ホワイト)VGF-WA1/B(ブラック)と各1台ではありますが販売さていました。(2016年1月31日 現在)




先ずは、SHOUcastが使えないということに関しての質問の答えですが、考えられる原因は下記の3つです。
  1. インターネットラジオ局のURLが変更された
  2. AACで放送するラジオ局を登録した
  3. WA-1で再生できないラジオ局を登録した
1.SHOUTcastで取得したURLは変更されてしまうことがあります。再生できなくなったらSHOUTcastで再度インターネットラジオ局を探して登録し直す必要があります。

2.AACで提供しているインターネットラジオ局はVGF-WA1では再生できません。MP3で提供しているラジオ局を登録しましょう。

3.MP3で配信しているラジオ局でもWA-1で聴取再生できない場合がありますので、登録後にエラーとならないか確認します。

SHOUTcast で探したネットラジオ局の登録方法

VGF-WA1の設定画面にはIPアドレスを指定して設定画面を開くことができますので、VGF-WA1に割り当てらているIPアドレスを調べます。

VGF-WA1のIPアドレスの調べ方

1)VGF-WA1本体のSETTINGSを押します。
VGF-WA1 SETTINGS

2)パネルの「機器情報」をタップします
VGF-WA1 SETTINGS

3)パネルの「ネットワーク情報」をタップします。
VGF-WA1 SETTINGS

4)下記画面からEnterを4回タップします。
VGF-WA1 SETTINGS

5)下記がVGF-WA1本体のIPアドレスとなります。(IPアドレスは環境によって異なります)


VGF-WA1に任意のインターネットラジオ局を登録する

上記で調べたIPアドレスをブラウザで入力するとVGF-WA1の設定画面が開きますので、ウェブラジオ設定をクリックしてください。

Microsoft-Edge-Web-Notes-VGF-WA1-ホ142406859 [1615063]

下記の「任意のラジオ局を登録します」の一覧に20局まで登録することができます。

Microsoft-Edge-Web-Notes-VGF-WA1-ウ149289484 [1628561]

SHOUTcastでお気に入りのラジオ局を探そう

SHOUcastには多くのインターネットラジオで放送しているラジオ局が登録されています。Searchボックスでジャンルやキーワードを入れてラジオ局を探します。下記は west coast で検索した結果となります。

Station ラジオ局名
Genre ジャンル
Listeners 現在の聴取者数
Bitrate ビットレート
Type AAC, MP3

Listenersが多い曲は人気の目安となります。またBitrateはいい音で聴ける128Kbps以上の局を選びます。Typeは前述したようにMP3しかWA-1に登録することができません。

* MP3で配信しているインターネットラジオ曲でもWA-1で再生できない場合がありますので、登録後に確認が必要です。

SHOUTcast   Search

再生ボタンをクリックすれば、現在、どのような放送をしているかを確認することができます。VGF-WA1に登録するにはダウンロードのアイコンで右クリックをして、アドレスをコピーします。

VGF-WA1へのラジオ局の登録

任意のラジオ局の登録の一覧のURLに上記でコピーしたアドレスをペーストします。表示名もSHOUcastからコピーしましょう。

VGF WA1 ウェブラジオ設定(登録)

後は、保存ボタンを押せば登録完了です。

おススメのインターネットラジオ局

下記は、自分が気に入っているインターネットラジオ局です。ラジオ局名でSHOUcastで探してみてください。

ラジオ局 ジャンル 備考
WEST COAST Golden Radio Classic Rock 気分は西海岸
Love Radio USA Love and Rock ラブソング
181.fm - The Heart Love and Rock ラブソング
181.FM - The Beatles Channel Oldies ビートルズ
1.FM - OTTO's BAROQUE MUSICK Classical バロック音楽
1.FM - Acappella Radio Pop アカペラ
SwissRadio Modern Jazz Jazz モダンジャズ
1.FM - Adore Jazz Radio Jazz ジャズボーカル
WPBB Church Radio Gospel ゴスペル
HawaiianRainbow.com Worldbeat ハワイアン
La Grosse Radio Reggae Reggae レゲエ
RadioTeenTaal Hindi インド音楽
Japan-A-Radio Japanese 日本のポップ

卓上型インターネットラジオ

久しぶりにSONY VGF-WA1と同じコンセプトで、卓上型でネットラジオを楽しめる製品があるかを探してみました。しかし、スマホが普及した中での需要もないのか多くの製品はありませんでした。下記のREVO AXIS インターネットラジオ RV-3006 は、形状はよさげですが、任意のネットラジオ局を登録できるかはわかりません。


BluetoothやAirplayに対応した音質が担保された卓上型スピーカーにインターネットラジオ機能があれば文句なしのですが、SONYさん頑張ってもらいえないでしょうか。

2015年12月21日月曜日

海外でのGoogle検索結果を調べる方法

このエントリーをはてなブックマークに追加 Evernoteにクリップ
企業のグローバル化も進みサイトも各国での対応が必要となります。でも日本からアメリカでGoogleで検索した場合の検索結果を調べる場合にはどうしますか?

日本からhttps://google.com と入力しても、google.co.jp にリダイレクトされてしまいます。これは検索をした場所(IPアドレス)から適切な結果を返すローカリゼーションという仕組みのためです。また検索結果は検索言語によっても異なります。

海外でのGoogle検索結果を確認するにはいくつか方法はありますが、一番簡単な方法は、Google AdWords で提供している Ad Preview and Diagnosis tool(広告プレビューと診断ツール)を利用することです。

広告プレビューと診断ツールでは、検索する地域、言語、デバイスとGoogleのドメインを指定して、通常の Google 検索結果ページと同じようにGoogle検索結果を表示させることができます。

本来の利用方法は、インプレッションを発生させることなく、検索キーワードで広告がどのように表示されるかを確認するツールですが、米国からPCで google.com を使って検索した結果を簡単にみることができます。またAdWordsのアカウントも必要ないので誰でも使えます。

海外での検索結果の調べ方

では、実際に Ad Preview and Diagnosis tool (広告プレビューと診断ツール)を使って、海外からのGoogle検索結果を見てみましょう。検索語句は、各国サイトを持っているSONYを使って、米国からのGoolge検索結果を調べてみます。

Ad Preview and Diagnosis tool(広告プレビューと診断ツール)

ここから、広告プレビューと診断ツールを開きます。

image_thumb2

左側に「地域」「言語」「デバイス」「ドメイン」の設定があります。

地域の設定

image_thumb5

地域の検索オプション枠に(アメリカ)を指定します。

image_thumb8

国だけではなく、地域も選択できますが、「アメリカ合衆国-国」を選択します。

言語の設定

続いて言語で英語を選択します。

image_thumb11

デバイス

デバイスは、PC、スマホ、タブレットの選択ができます。

image_thumb14

スマホ、タブレットを選択すると「オペレーティングシステム」「OSバージョン」「通信キャリア」が選択できます。

image_thumb17

ドメイン

ドメインには調べたい国のドメインを選択します。米国であれば www.google.com なので com を選択します。

image_thumb26

アメリカでSONYを検索した結果は?

あとは、検索語句に調べたい語句(SONY)を入力して、プレビューボタンをクリックすれば結果が確認できます。

image_thumb29

下記の通り、米国でSONYと検索するとSony USAが検索でヒットすることが確認できます。

image_thumb32

また同じ米国からの検索でも言語を日本語とすると、Sony Japan が先頭となり、次に Sony USA が検索されます。

image_thumb35

まとめ

前に海外での検索結果を調べたときは、各国のProxyサーバーを使ってブラウザの言語変更して調べたのですが、Ad Preview and Diagnosis tool (広告プレビューと診断ツール)を使えば簡単です。使用頻度は高くありませんが、備忘録として残しておきます。