[3027] ソーシャルメディアが非常時にできることは何か?

投稿:  著者:


《朝はかならず やってきます》

■アンビエントメディアの夜明け[16]
 ソーシャルメディアが非常時にできることは何か?
 川井拓也

■クリエイター手抜きプロジェクト[273]Adobe Media Encoder CS5編
 指定した映像ファイルをエンコードする
 古籏一浩

■講師だって、最初は初心者だもの[02]
 HTML5の新しい文書構造要素の話
 森 和恵

--PR------------------------------------------------------------------
★印刷通販「トクプレ」がリニューアルオープンしました!
┃ ≫≫≫ http://www.ddc.co.jp/tokupre/
≪≪≪ PDF/X-1a・PDF/X-4対応♪
┃ A4サイズ 片面カラー印刷 500枚が 2,310円〜 など格安印刷提供中!
┃ 印刷ご発注の方にFlash電子カタログへの変換サービスを無料でご提供中
┃ 印刷物だけでなくウェブでの告知活動・販売促進活動にお役立て下さい
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■運営:株式会社吉田印刷所(TEL:0250-43-6144) http://www.ddc.co.jp/

-----------------------------------------------------------------PR---


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■アンビエントメディアの夜明け[16]
ソーシャルメディアが非常時にできることは何か?

川井拓也
< https://bn.dgcr.com/archives/20110411140300.html
>
───────────────────────────────────
(2011.3.14記)

この週末に受けた精神的なダメージは、どこに住んでいる人にとっても相当なものだったと思います。まるでパニック映画のCGのような、信じられない光景が自分の国で起こっていることに、思考が止まってしまいそうでした。

一方、この未曽有の大災害に対して、マスメディアだけではなくソーシャルメディアという情報源があるということが、いろいろな意味で救われる状況を作っています。

私が特に注目してウォッチしているライブメディアのUstreamでは、NHKをはじめTBS、フジテレビ、テレビ朝日などが軒並みミラーストリームを公式に許可し、災害発生当日からネットを通じて見られるようになっています。

また、オルタナティブな中継としては、福島原発の放射能漏れを受けて、都内に自作のガイガーカウンターを設定してそのディスプレイを中継しつづけるユーザーが出るなどしています。

ケータイや固定回線は軒並み不通になりましたが、twitterなどは機能しており、さまざまなハッシュタグを通じて災害に関する情報のやりとりがされています。デマや風評などもかなり出回っていますが、それは災害時に限ったことではないネットメディアの特徴なので、真偽は各自が検証して情報として把握する必要があります。

海外メディアの報道は、もっぱら原発の問題にフォーカスされているように見えますが、国内メディアとは違った写真などを掲載しており、アクセスできる人は参照しておく価値はあります。

停電の情報は混乱を極めていますが、国家の非常時に節電を促す情報は数多く発信され、その結果午前中の停電はまぬがれたように見えます。エコを通り越した切迫した節電状況は、今後の私たちの生活スタイルを大きく左右することになりそうです。

「不謹慎」「自粛」ムードもありますが、生きている人たちは日常生活を送りながら、自分にできることをしていくのがいいと思います。私も自分にできることは何か? と考え、以下のようなイベントを細く長く続けていければと思っています。
< http://twipla.jp/events/6068
>

【川井拓也 / Takuya Kawai】
mail:kawai@himanainu.jp twitter @himanainu_kawai

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト[273]Adobe Media Encoder CS5編
指定した映像ファイルをエンコードする

古籏一浩
< https://bn.dgcr.com/archives/20110411140200.html
>
───────────────────────────────────
Adobe Premiere CS5とセットになっていて、映像のエンコード処理を行うのがAdobe Media Encoder CS5です。役割分担としては、Premiereで編集し映像エンコードをMedia Encoderが行うことになります。

PremiereはJavaScriptからあまり制御することができませんが、Media EncoderはJavaScriptによっていろいろ制御することができます。フォーマットを指定してエンコードするのはもちろんですし、定期的にフォルダを監視して処理することもできます。ただし、イン点とアウト点を指定してエンコードするようなことはできません。やはり編集機能はPremiereにまかされているようです。

以下のスクリプトは、特定の場所にある映像ファイルをH.264形式でYouTube用にエンコードするものです。

●●●●はユーザー名(ユーザーフォルダ名)を指定してください。★★★★にはエンコードする元の映像ファイル名、▲▲▲▲にはエンコードし保存するファイル名を指定してください。なお、書き出されるファイルと同じファイル名がある場合には▲▲▲▲_1のように番号が付いて別名で保存されます。


// 指定した映像ファイルをエンコードする
var basePath = "/Users/●●●●/";
var srcFile = basePath+"Desktop/★★★★";
var saveFile = basePath+"Desktop/▲▲▲▲";
var eh = app.getEncoderHost();
var encoder = eh.createEncoderForFormat("H.264");
encoder.loadPreset("YouTube SD");
encoder.encode(srcFile, saveFile);
eh.runBatch();


違う形式でエンコードしたいと思う人は多いでしょう。その場合、形式は

var encoder = eh.createEncoderForFormat("H.264");

の行で指定します。H.264を別の形式名(QuickTimeとか)にします。そしてプリセットは

encoder.loadPreset("YouTube SD");

の行で指定します。形式名やプリセット名はMedia Encoderのポップアップから選択できる名前になります。

ただ、すべての形式とプリセットを調べるのは面倒です。そのような場合は、以下のスクリプトを実行すれば、テキストファイルにすべての形式と対応するプリセットが保存されます。


// プリセットを保存する
(function(){
var savefile = File.saveDialog("保存するファイル名を入れて下さい");
if (!savefile) return;
if (!savefile.open("w")){
alert("ファイルを保存できません");
return;
}
var eh = app.getEncoderHost();
var format = eh.getFormatList(); // 形式一覧を取得
for(var i=0; i<format.length; i++){
var encoder = eh.createEncoderForFormat(format[i]);
savefile.writeln("■形式:"+format[i]);
var list = encoder.getPresetList();
for(var j=0; j<list.length; j++){
savefile.writeln(" "+list[j].split("#")[1]);
}
}
})();

Media Encoder CS5では一部不具合があり、プリセット名が正しく記録されていないものもあります。また、カスタムで作成したプリセットも番号の羅列になってしまいます。


【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/
>

大震災から一か月経過しました。復興するまでには、まだまだ先が長いようです。震災と計画停電のおかげで、ここ一か月の間に、販売できる商品が次々と消えてなくなっていきました。長野県は中部電力管内なので停電とは関係ないはずですが、工場は東京、千葉なので計画停電の影響で生産できず。仙台支社では亡くなった方もいたとのこと。親戚は避難所はあきらめて結局、南相馬の実家に戻ったけど、新聞も何も届かないそうで。屋内待避範囲だから物が届かないのは仕方ないのかもしれませんが......。

・すべての人に知っておいてほしい WEBデザインの基本原則【発売中!!】
< http://www.amazon.co.jp/dp/4844361813
>

・iPhone/iPad × HTML5アプリ制作【発売中!!】
< http://www.amazon.co.jp/dp/4797362618
>

・HTML5+JavaScriptアイデア&実践サンプル
< http://www.amazon.co.jp/dp/4048704486
>

・JavaScriptコーディング ベストプラクティス
< http://www.amazon.co.jp/dp/4844361791
>

・Google API Expertが解説するHTML5ガイドブック
< http://www.amazon.co.jp/dp/4844329278
>

・ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/
>

・Adobe Illustrator CS3+JavaScript 自動化サンプル集 発売中
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/
>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■講師だって、最初は初心者だもの[02]
HTML5の新しい文書構造要素の話

森 和恵
< https://bn.dgcr.com/archives/20110411140100.html
>
───────────────────────────────────
ご無沙汰です。森和恵です。
もう、桜咲く年度初めになりましたね。気持ちを新たにがんばりましょう。

さて。
Visual Web Developer 2010 Express(VWDE)を使って、HTML5入門的なお話をしています。前回は、HTML5のひな形を登録しました。
< https://bn.dgcr.com/archives/20110207140200.html
>

今回は、典型的なHTML5文書構造を組んでみます。新しく追加された文書構造要素の意味や使い方を確認しましょう!

▼準備

今回使う新規ファイルを準備します。VWDEを起動して、プロジェクトを開きます。前回登録したhtml5テンプレートから、新しく flag2.html を作成します。
< title >や< meta name="description" >を指定します。
【画面】< http://r360studio.com/dgcr/dgcr-flag2-01 >

 |詳しくは、連載の[0][1]を参照してください。
 |< https://bn.dgcr.com/archives/44/
>

▼ヘッダーとフッターを作る

ヘッダー部分に「サイト名称・サイト説明文・ナビゲーション」を、フッター部分に「著作権表記」を作成します。
【画面】< http://r360studio.com/dgcr/dgcr-flag2-02 >

<header>
<h1>サイト名称</h1>
<p>このサイトは・・・・(サイトの紹介文)</p>
<nav>
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</nav>
</header>
<footer>
<p>© 2011 r360studio.</p>
</footer>

ここでの新要素は下記の3つです。

<header>
ヘッダーとして、始まりに付加情報をマークアップします。今回のようにbody要素の直下にある場合は、ページヘッダー部分を指定します。例えば、サイト名称や説明・サイトロゴ・グローバルナビゲーション...などを含めます。

<nav>
ナビゲーションをマークアップします。グローバルナビゲーションなど主要なナビゲーションで使います。

<footer>
フッターとして、終わりに付加情報をマークアップします。

今回のようにbody要素の直下にある場合は、ページフッター部分を指定します。例えば、著作権表記・著者情報・連絡先...などを含めます。

 |VWDEは、コード・ヒントがHTML5に対応なので便利です。
 |【画面】< http://r360studio.com/dgcr/dgcr-flag2-03 >
 |また、開始タグ入力後に終了タグを自動補完してくれるのもイイ感じ。

▼ページ本文を作る

1ページ完結の記事を作成します。記事が長くなる場合を想定し、本文に小見出しを指定しています。
【画面】< http://r360studio.com/dgcr/dgcr-flag2-04 >

<article>
<h1>このページの記事タイトル</h1>
<section>
<h2>記事内の小見出し</h2>
<p>本文</p>
</section>
<section>
<h2>記事内の小見出し</h2>
<p>本文</p>
</section>
</article>

ここでの新要素は下記の2つです。

<article>
独立したコンテンツをマークアップします。今回は1ページ完結の記事のため、記事全体を指定しました。

<section>
章や節のようにコンテンツを切り分けた一単位をマークアップします。また、内部には見出しを付けます。今回は、小見出しの単位で記事を指定しました。

 |内容の意味や用途で適切な要素が決まるので、
 |<article>と<section>の使い方は難しいです。
 |いろいろな例をみながら、感覚を掴みましょう。

今回作成したページのソースは下記にアップしています。
【ソース】< http://r360studio.com/dgcr/flag2.html
>

 |headerとarticle要素の両方にh1要素があります。
 |header要素内では、ページ付加情報にサイト名称を指定し、
 |article要素内では、独立した記事のタイトルを指定しています。
 |新要素で文書構造を明確にしたおかげで意味が解りやすいですね。

......はい。今回は、ここまでにしましょう。
次回は、HTML5のreset.cssやバリデートなどの補足事項をお話しします。どうぞよろしく。(<ゝω・)綺羅星☆

※記事へのご意見・ご要望は下記より受付ま〜す。お手柔らかに。
< http://bit.ly/gIHFfu
>

【森和恵 r360studio 〜 Web系インストラクター 〜 】
< site: http://r360studio.com
> < twitter: http://twitter.com/r360studio
>
< mail: r360studio@gmail.com >

近況報告:
先日、東北地方太平洋沖大地震 チャリティイベントUntitled!!!!!!!!に出演しました。大勢の方が「がんばろう!」とひとつになった良い一日でした。そこで、仕事でずっと続けてきた"伝える"ということをお話ししました。人とのコミュニケーションって、大事だし深いですね。
フォローページでご覧いただけますので、お時間あればどうぞ。
< http://r360studio
>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記(4/11)

・東日本大震災により被害を受けられた皆さまに、心からお見舞いを申しあげます。一日も早い復興をお祈り申し上げます。

・ああ なんという ことでしょう テレビを見ながら 唯 手をあわすばかりです 皆様の心の中は 今も余震がきて 傷痕がさらに 深くなっていると思います その傷痕に 薬を塗ってあげたい 人間誰しもの気持ちです 私も出来ることは ないだろうか? 考えます もうすぐ百歳になる私 天国に行く日も 近いでしょう その時は 日射しとなり そよ風になって 皆様を応援します これから 辛い日々が 続くでしょうが 朝はかならず やってきます くじけないで!
99歳で詩集「くじけないで」でデビューした詩人・柴田トヨさんの「被災者の皆様に」という詩である。4月6日の飛鳥新社の新聞広告を何度も読み返し、半ば「情報鬱」に陥った妻とともに涙するわたしです。3.11の数日後から、わが家はテレビのニュースを見られなくなりました。(柴田)

・森さんが近況報告で書かれている「Untitled!!!!!!!!」に当日スタッフとして参加した。担当はバザーブース。協賛企業さんから提供された書籍やソフトウェア、ラーニングDVDを定価以下から販売。購入権を抽選で得た人たちがブース前に来て、最低価格以上を義援金箱に入れてくれる仕組み。ほとんどみなさん定価以上を箱に入れてくださるのに、なんていうか感動してしまった。5千円以上で、と説明したソフトウェアでも倍額を出してくださったり。自分たちの売り上げになるものではないので、お礼を言うのもなんだか変なんだけど、思わずお礼を言いたくなる。/ほんとテレビは見たくないし、でも情報を得ないといけないしで心が揺れた。テレビをつけると、何もやる気にならない。前向きなことが考えられない。元気なはずの西日本にいるのに、復興に向けての活動をしなければと思うのに、引きずられてしまう。家庭でもいろいろあって(詳細は省く)、その一番の原因はテレビでの震災報道だろうなぁと思っている。/今でもテレビには違和感。なんだろう、このズレ。/知り合いの知り合いの印刷会社が倒産。原因は東北で生産しているインクが入らないため。紙が手に入らなくて困っている会社もある。東北の印刷会社の代行をしている印刷会社もある。/国の決断力には期待していないけれど、頼むから早く動いて欲しい。(hammer.mule)
< http://m2.cap-ut.co.jp/un/
>  Untitled!!!!!!!!