《ゾンビ映画を日本で作るとこんなんなるのね》
■まにまにころころ[97]
ざっくり日本の歴史(後編その15)
川合和史@コロ。 Kawai Kazuhito
■クリエイター手抜きプロジェクト[465]
Adobe Premiere CC 2014〜CC 2015編
映像のエフェクト一覧をファイルに書き出す
古籏一浩
■LIFE is 日々一歩(32)[コラム]
Bootstrapの使い方をまとめてみた(1)
森 和恵
─【PR】───────────────────────────────
★ グラシン工房 ★ →→ http://bit.ly/1LWFYLN
半透明の極薄紙「グラシン紙」の封筒など、ラッピングアイテムを販売
オリジナル柄の印刷やOEMでの製造も承っております
───────────────────────────
☆極薄紙の印刷事例はこちらでチェック →→ http://bit.ly/1h1Vw8i
←←☆
向こうが透けるほどの薄紙へ あなたのイメージを印刷します
───────────────────────────────【PR】─
■まにまにころころ[97]
ざっくり日本の歴史(後編その15)
川合和史@コロ。 Kawai Kazuhito
■クリエイター手抜きプロジェクト[465]
Adobe Premiere CC 2014〜CC 2015編
映像のエフェクト一覧をファイルに書き出す
古籏一浩
■LIFE is 日々一歩(32)[コラム]
Bootstrapの使い方をまとめてみた(1)
森 和恵
─【PR】───────────────────────────────
★ グラシン工房 ★ →→ http://bit.ly/1LWFYLN
半透明の極薄紙「グラシン紙」の封筒など、ラッピングアイテムを販売
オリジナル柄の印刷やOEMでの製造も承っております
───────────────────────────
☆極薄紙の印刷事例はこちらでチェック →→ http://bit.ly/1h1Vw8i
←←☆
向こうが透けるほどの薄紙へ あなたのイメージを印刷します
───────────────────────────────【PR】─
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■まにまにころころ[97]
ざっくり日本の歴史(後編その15)
川合和史@コロ。 Kawai Kazuhito
https://bn.dgcr.com/archives/20160530140300.html
───────────────────────────────────
こんにちわん、コロこと川合です。今回から幕末の話に移ろうかと思いつつも、出来事が複雑すぎて何から手を付ければいいのやら。プレイヤーも山ほどいて、主義主張も入り乱れてるし。
前回のNHK大河『花燃ゆ』もそうでしたが、幕末を題材にした作品って、ドラマ、小説、漫画などでも星の数ほどあって、それは、やはり人気の高い時代だからなんでしょうけど、それらを見たり読んだりした人でさえ、今ひとつよく分からないのがこの「幕末」じゃないでしょうか。
幕末モノでよく登場するのは、新撰組と維新志士。もうこれさえ出しておけば失敗はしないというくらいの人気を誇り、時代小説からBLゲームまであらゆるジャンルで取り上げられていますが、「沖田総司かっこいいよねー」って人もやっぱり幕末全体の流れを知っている人は少なかったりします。
キャラ萌えと歴史は別物というか。まあ実際に、新撰組の沖田総司と言えば、
知らない人はいないくらいの有名人ですけど、歴史の中で何をしたかってなる
と、個人では特に名を残すような影響はなかったりして。
さて、前置きが長くなりましたが、まにころではまずは全体をざっと眺めた後、個々の人物や団体にフォーカスして、なんとなくふんわり幕末の空気に触れていただけたらと思います。難しいので、興味を持ったなら後は各自にお任せという投げっぱなしスタイルで行くことにしました。
まずは、最低限知っておきたいことをいくつか。
◎──幕末っていつ?
幕末、幕末って言うけど、いつからいつが幕末なのか。こんなことさえ意見が分かれるのが幕末。江戸幕府末期、だから幕末。ということで、終わりはまあ、幕府がなくなるまでかなと思いきや、明治の初期まで含んだりもします。
幕府がなくなった後もしばらくは旧体制が残っていたので、それが片付いたところまでが幕末ってことで、廃藩置県、版籍奉還までとしたりします。
幕末の開始時期も、一番分かりやすいのはペリーの来航からとするものですが、ペリーもいきなりやってきたわけでなく、そこに至るまでに既に幕府は色んな意味で末期を迎えていましたので、鎖国体制がぐらつき始めたあたりから幕末とする考え方もあります。
また、ぐらつく幕府を片付けて、新しい政治体制を求めた動きをひっくるめて明治維新と呼びます。明治維新の時期も人によって定義がまちまち。明治維新というくらいだから明治元年からだろうと思うのですが、前年の大政奉還からとしたり、そこに至る出来事も含めたり、前後にちょっと幅があります。
終わりも、廃藩置県、版籍奉還までとしたり、西南戦争が終わるまでとしたり、内閣制度ができるまでとしたり、大日本帝国憲法が公布されるまでとしたり。
まあ、だいたいその辺の時代ってことです。
◎──新撰組 vs 維新志士
先にも挙げた両者ですが、これらの登場する作品に触れたことがある方なら、それぞれの立場も少しご存じかもしれません。あくまでも「かもしれません」で、まったく知らない可能性もなきにしも非ずというのが面白いところで。
大雑把に言うと、新撰組は、武士として幕府を守るぞーという一派。維新志士は、幕府を倒して新しい政治体制を作るぞーと志す人たちです。
前者は団体名ですが、後者は団体ではないので色んな考えの人がいます。基本的には志士は藩の枠組みを超えて個人に焦点を当てた呼び方で、脱藩者や浪人、士族以外が中心です。
有名なので新撰組を取り上げましたが、幕府を守るぞーというのは新撰組だけではなくて、他にもいます。幕府を守るぞ助けるぞ、というのが後で出てくる佐幕です。
◎──尊王攘夷?
日本史の授業で習うのでなんとなく刷り込まれる幕末ワード、尊王攘夷。尊王とは文字通り天皇を尊ぶこと。もう少し言えば、天皇を中心とした政治体制を目指すことまで含んだりします。
勤王というのも、まあ似た感じの言葉です。文字からいけば、尊王は思想に軸を、勤王は行動に軸を置いた言葉でしょうか。
攘夷というのは、外敵を退けようという考え。一般的にはアンチ開国派ですが、開国して欧米列強の技術を取り入れた上でそれらに対抗しよう、という攘夷派もいたので、「欧米列強を退けよう」という考え方ということで。
アヘン戦争の話をはじめ、欧米がアジア・アフリカを食い物にしようとしていたことへの危機感によるものです。
ややこしいのは、佐幕という、幕府を補佐するという幕府寄りの立場があって、尊王に対立する言葉として捉えられがちなこと。尊王は天皇を尊ぶことですが、佐幕は別に天皇をないがしろにする考えではありませんので、対立はしません。
この時代、幕府自体も含め、ほぼ全ての人が尊王です。中には長州のように、武力で京都から天皇をかっさらおうとする輩もでてきますが、それもまた尊王の意識があるからこそってことで。あくまで、佐幕の反対語は倒幕です。
もっとも、政治の中心を天皇(朝廷)と幕府のどちらに置くべきかという問題はあり、天皇の権威と幕府の武威を結びつけて強固にしようという、公武合体という考え方も出てきます。
第十四代将軍・家茂と、仁孝天皇の第八皇女で孝明天皇の異母妹である和宮の婚姻(降嫁)は、公武合体派の思惑によるものです。和宮は婚約破棄してまでの政略結婚でしたが、夫婦仲は良かったようです。
◎──水戸学
あまり学校ではしっかり習った記憶がないのですが、明治維新の原動力はこの水戸学によるところが大きいと言われています。水戸学というのは、水戸藩で形作られた学問、思想で、朱子学を中心に広く様々な学問を統合したものです。発端は水戸光圀による『大日本史』編纂の開始から。
水戸学という名前の固有の学問というわけでなく、様々な学問を取り入れつつ、それらが水戸藩の空気によって方向付けられていった結果、特徴を持った学問とみられるようになったもの。その特徴がまさに「尊王」です。
以前にも何度か出てきましたが、水戸藩は徳川御三家なのになにかと尊王派。幕府より天皇を立てる気風が強くあります。
前にも一度触れ、またそのうちに改めて触れると思いますが、徳川幕府最後の将軍、第十五代徳川慶喜は、水戸家から一橋家に養子に入り、紆余曲折を経て将軍の座に着いた人物です。
元々、水戸家は御三家の中でも一番家格が低く、さらには吉宗によって御三卿が立てられたことで、将軍を輩する可能性なんてほぼゼロだったのに、何の因果か水戸の出身者が将軍になりました。
さくっと大政奉還して最後の将軍となったのも、もしかしたら水戸の血がそうさせたのかもしれません。いや、ぜんぜん関係ないかもしれませんけど。でも面白い。
◎──鎖国
幕府が、というかこの日本が大きく舵取りを迫られた最大のポイントが、外国とどう付き合うかという話。江戸時代の大半、外国との付き合いを大きく制限してきました。いわゆる鎖国と呼ばれる状態です。
もっとも、元々そんなに外国と交流があったわけではありません。古代からの中国、朝鮮との付き合いのほかは、東南アジアと少し、それに加えて鉄砲伝来とキリスト教伝来以降に、ポルトガル、スペイン、オランダとの付き合いが。
そのキリスト教が問題で、ヨーロッパに対する警戒が生まれたのが秀吉の頃。江戸時代に入り、秀忠の頃から少しずつ明確に締め付けを強化していきます。禁教令に始まり、玄関口を長崎の平戸に限定したり、スペインと断交したり、渡航や帰国を禁止したり、ポルトガルとも断交したりと、徳川幕府四代将軍の家綱の頃以降、ヨーロッパとの付き合いは基本的にオランダのみになります。
それが1792年、前回紹介したラクスマン来航を皮切りに、諸外国が徐々に日本に外交を迫ってきます。
まずそのラクスマンですが、定信が突っぱねたと書きましたが、長崎への入港許可証は渡していました。結局ラクスマンはそのまま帰ったのですが、1804年にレザノフがその許可証を持って訪日。でも幕府は、これも突っぱねます。
1806年(文化3年)、「文化の薪水給与令」を出し、水と燃料は補給させてあ
げるからおとなしくお帰りくださいと少し譲歩。しかし、交渉を諦めたレザノ
フは報復とばかりに攻撃してきました。この薪水給与令はすぐに撤回、国防の
重要性が叫ばれることになります。
同時期にアメリカ船も日本に来ています。1797年、フランス革命とナポレオン戦争のために本国がフランスに押さえられてしまったオランダ商館の依頼で、オランダ国旗を掲げてアメリカ船が出島で貿易を代行しています。
そのことを知ってか知らずか、1808年、オランダと敵対していたイギリスがオランダ国旗を掲げて出島に来港、オランダ商館員を拉致して物資を強奪する事件が勃発。これがフェートン号事件です。
その後もイギリス船はちょいちょい出没したり、他にも諸々外国と摩擦があって幕府は、1825年に異国船打払令を発令します。
1837年、漂流民を送り届けてくれたモリソン号を打ち払って批判が高まった上、アヘン戦争で清が酷い目に遭ったと聞いてびびった幕府は、1842年(天保13年)、ちょっと折れて、遭難した船に限り給与を認める「天保の薪水給与令」を発令。この右往左往な感じ、幕末って雰囲気になってきてますよね。
◎──そしてアメリカ
鎖国体制を決定的にぶち壊したのは、ご存じアメリカです。アメリカから最初に訪れたのはペリーではありません。まあモリソン号もアメリカ商船ですが、その他にもちょいちょいやってきています。
1846年、アメリカ東インド艦隊司令官ジェームズ・ビドルが開国交渉に来日。突っぱねられてすぐ帰ってますけども。
1848年にはラナルド・マクドナルドが漂流の振りをして日本にきます。別に悪いことをしに来たわけでなく、母国で日本人漂流民と交流のあったことがきっかけで、日本に興味津々だったんです。なんだかんだで思惑が一致し、幕府はマクドナルドから英語を学ぶことに。
ビドル来日と同年の1846年、蝦夷地沖で難破したアメリカ捕鯨船の船員18人が、捉えられ、長崎で牢に入れられました。そのことを知ったアメリカは、1849年、ジェームス・グリンを長崎に派遣、強硬的な姿勢も見せつつ解放を交渉します。マクドナルドもこの時に一緒にアメリカへ帰っています。
グリンは帰国後、日本と外交交渉する時には強さを見せる必要があると建議。それがペリーの姿勢に反映されることになります。
1853年、マシュー・ペリー率いるアメリカ艦隊が来航し開国を要求。翌1854年、再来航し、日米和親条約を締結。1858年、タウンゼント・ハリスが来航し日米修好通商条約を締結。これで通商面での鎖国は完全に終わりを迎えました。
ここからだいぶ時間はかかりますが、海外渡航の禁止や禁教も次第に解かれていきます。日本人にキリスト教が解禁されたのは、1873年(明治6年)です。
◎──次回は流れを追う予定
思いの外ちょっと鎖国の話が長くなりましたが、鎖国政策の崩壊が幕府の崩壊に繋がっていきます。次回は順を追って、崩れていく幕府の流れを紹介したいと思います。次々回くらいからが面白いと思いますので、ひとつ我慢を……
【川合和史@コロ。】koro@cap-ut.co.jp
合同会社かぷっと代表
https://www.facebook.com/korowan
https://www.facebook.com/caputllc
http://manikabe.net/
WordCamp Kansai 2016の開催日程が発表されました。
https://2016.kansai.wordcamp.org/
WordPress界隈はいつも熱いなー。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト[465]
Adobe Premiere CC 2014〜CC 2015編
映像のエフェクト一覧をファイルに書き出す
古籏一浩
https://bn.dgcr.com/archives/20160530140200.html
───────────────────────────────────
Adobe Premiereにはたくさんの映像エフェクトや、トランジションがあります。映像だけでなくオーディオのエフェクトもあります。今回は、これらのエフェクト一覧をテキストファイルに書き出すスクリプトです。
まず、映像のエフェクト一覧をファイルに書き出すスクリプトから。
// 映像のエフェクト一覧をファイルに書き出す
var fx = qe.project.getVideoEffectList();
(function (fx){
var savefile = File.saveDialog("保存ファイル名を入れてください");
if (!savefile){ return; }
var flag = savefile.open("w");
if (!flag){
alert("書き込めません。書き込み権限を確認してください");
return;
}
app.enableQE();
for(var i=0; i<fx.length; i++){
savefile.writeln(fx[i]);
}
savefile.close();
})(fx);
次は映像のトランジション一覧をファイルに書き出すスクリプトです。
// 映像のトランジション一覧をファイルに書き出す
var fx = qe.project.getVideoTransitionList();
(function (fx){
var savefile = File.saveDialog("保存ファイル名を入れてください");
if (!savefile){ return; }
var flag = savefile.open("w");
if (!flag){
alert("書き込めません。書き込み権限を確認してください");
return;
}
app.enableQE();
for(var i=0; i<fx.length; i++){
savefile.writeln(fx[i]);
}
savefile.close();
})(fx);
次はオーディオエフェクト一覧をファイルに書き出すスクリプトです。
// オーディオのエフェクト一覧をファイルに書き出す
var fx = qe.project.getAudioEffectList();
(function (fx){
var savefile = File.saveDialog("保存ファイル名を入れてください");
if (!savefile){ return; }
var flag = savefile.open("w");
if (!flag){
alert("書き込めません。書き込み権限を確認してください");
return;
}
app.enableQE();
for(var i=0; i<fx.length; i++){
savefile.writeln(fx[i]);
}
savefile.close();
})(fx);
最後は、オーディオのトランジション一覧をファイルに書き出すスクリプトです。でも、中身はそっくりというか同じで、2行目だけが違うという、いかにも使い回し的なプログラムです。
まあ、プログラムは同じものを使い回してこそ効果的というものです。使い回せば不具合(バグ)も減り、より安定したプログラムとして使えるからです。枯れたプログラム・コードは安心感があります。
// オーディオのトランジション一覧をファイルに書き出す
var fx = qe.project.getAudioTransitionList();
(function (fx){
var savefile = File.saveDialog("保存ファイル名を入れてください");
if (!savefile){ return; }
var flag = savefile.open("w");
if (!flag){
alert("書き込めません。書き込み権限を確認してください");
return;
}
app.enableQE();
for(var i=0; i<fx.length; i++){
savefile.writeln(fx[i]);
}
savefile.close();
})(fx);
【古籏一浩】openspc@alpha.ocn.ne.jp
http://www.openspc2.org/
田舎だと都会で放送しているアニメがあまり見られない。が、そんな中で「甲鉄城のカバネリ」は結構よござんす。無名のキャラ素晴らしい(個人的な好み)。ゾンビ映画を日本で作るとこんなんなるのね、みたいな。でもまあ探すと日本版ゾンビアニメは、いろいろあるみたい。
●甲鉄城のカバネリ
http://kabaneri.com/
長野県では皆同じ番組を放送しているものだと思ったら、どうもそうではないことを先週知った。凄く田舎だと違うけど、そうではないそこそこのところでも放送番組が違うのか、と。
で、判明した番組名は「電子戦隊デンジマン」……。戦隊モノは全部放送されていて見ているはずだ、と思っていたらそうではなかった。
今の時代、日本人より中国の人の方がたくさん日本のアニメ見てそうだし、日本人よりも詳しいような気がする……。
・みんなのIchigoJam入門 BASICで楽しむゲーム作りと電子工作
http://www.amazon.co.jp/dp/4865940332/
・Premiere Pro & Media Encoder自動化サンプル集
http://www.amazon.co.jp/dp/4802090471/
・JavaScriptによるデータビジュアライゼーション入門
http://www.amazon.co.jp/dp/4873117461/
・Photoshop自動化基本編
http://www.amazon.co.jp/dp/B00W952JQW/
・Illustrator自動化基本編
http://www.amazon.co.jp/dp/B00R5MZ1PA/
・Adobe JavaScriptリファレンス
http://www.amazon.co.jp/dp/B00FZEK6J6/
・データビジュアライゼーションのためのD3.js徹底入門
http://www.amazon.co.jp/dp/4797368861
・4K/ハイビジョン映像素材集
http://www.openspc2.org/HDTV/
・クリエイター手抜きプロジェクト
http://www.openspc2.org/projectX/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■LIFE is 日々一歩(32)[コラム]
Bootstrapの使い方をまとめてみた(1)
森 和恵
https://bn.dgcr.com/archives/20160530140100.html
───────────────────────────────────
こんにちは! 森和恵です。体調不良とバタバタを乗り越えたご褒美に、週末映画を観てきました。アメリカのヒーローたちが活躍するシリーズの最新作“シビルウォー”です。
http://marvel.disney.co.jp/movie/civilwar.html
実は、前作をまったく観たことがありませんでした。なのになぜ観に行ったかというと、声優の中村悠一さんが、おそ松さんのイベントで「キャプテンアメリカ役の中村悠一です。シビルウォー見てる?」って挨拶していたのがきっかけです。カラ松、恐るべし。
ついていけるか不安でネットの前評判を探ると、「前設定知らないとわかりにくいかもね」という意見がありました。そうか〜と、「シビルウォー 前提」って検索したところ、ちょうどいいページが見つかって助かりました。おかげで、混乱することなく映画に集中できました。ネット社会ってありがたい。
【『シビル・ウォー』を観る為の予備知識。キャプテン・アメリカとアイアンマンの関係性って?】
http://music-book.jp/video/news/column/117543
映画は面白くて、見終わったらすっかり世界観にはまってしまいました。キャプテンもトニーもどちらも素敵。続き…あるのかなぁ。
さてさて。今回から、Bootstrapの使い方をぼちぼちとまとめていきます。最終的には、Dreamweaverのテンプレート化して、自分のサイトでガシガシ使ってみるところまでいきたいなぁと思っております。
まずは、事始め的な話から。
●Bootstrapって何だろう?
Bootstrap(ブートストラップ)とは、Webページを作るためのひな形になるものです。レイアウトや修飾のためのデザインをCSSコードで、スライドショーやポップアップウインドウなどの動きをJavaScriptコードで提供してくれます。
フレームワークと呼ばれるものの一つです。
BootstrapをWebページに組み込むことで、そのお作法に従ってHTMLをコーディングすれば、苦労なく簡単にページ作成を進めることができます。
ブラウザ上で動くWebアプリケーションを開発するエンジニアの間で、Webページを自分でデザインしなくても、簡単にイマドキのカッコイイページが組めるという理由で使われ出したのが、流行るきっかけだったように思います。
もともとは米ツイッターがオープンソースとして開発しました。以前はTwitter Bootstrapと呼ばれていましたが、最近では単にBootstrapと呼ばれます。
http://getbootstrap.com/
●HTMLページへの組み込み
では、さっそくHTMLページにBootstrapを組み込んでみましょう。公式サイトの“Getting started”ページを開きます。
http://getbootstrap.com/getting-started/
冒頭をみると“Download”とありますが、BootstrapはCDN(シーディエヌ:Contents Delivery Network)と呼ばれる、URLで直接ファイルを参照するリンクファイルが提供されています。下手に自分でファイルをダウンロードするよりも手軽で表示も速く扱えるのでおすすめです。
なので、ダウンロードは無視してページの下へ進みます。“Basic template”の見出しがついた部分のHTMLコードをそのままページへコピペしましょう(コードがある枠の右上ある[Copy]リンクをクリックすると手早くコードをコピーできます)。
次に、コードを書き換えたり、不要な部分を削除したりと調整をします。
2行目)<html lang="en">
enをjaと書き換えます。これは、ページで使う言語の設定で“ja”は日本語です。
7行目)<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
「4〜6行目の<meta>タグは先頭になくてはならない」という説明のコメント文です。不用なので削除しましょう。
9・10行目)<!-- Bootstrap -->
9行目の空白行、10行目の上記コメントは不用なので削除します。
11行目)<link href="css/bootstrap.min.css" rel="stylesheet">
Bootstrapで用いるCSSコードです。CDNを用いて外部ファイルを参照するために、“Bootstrap CDN”の項目にある下記コードと差し替えます。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
12〜14行目)
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
12行目の空白行、13・14行目の上記コメントは不用なので削除します。これは、
15行目から始まる古いInternet Exploerへの対策コードについての説明です。
15〜18行目)
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js
"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js
"></script>
<![endif]-->
これは、Internet Exploer8・9用の対策コードです。このバージョンでは、HTML5のコードを理解せず、レスポンシブ(CSS3のMedia Queries)に対応していません。Bootstrapではその両方を用いています。そのため、JavaScriptで書かれたプログラムを使って、無理矢理対応させています。
【IE8以下でCSS3とHTML5の対応 - respond.js、html5shiv.js】
http://pb-times.jp/P_52ce2f4c3db6a
ただし、Internet Exploer8・9は、メーカーのサポートもほぼ終了しているバージョンですので、サポートが不用であれば削除してもOKです。
21〜23行目)
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
22行目の空白行と、21・23行目の上記コードは不用なので削除します。21行目は本文として仮に入れられた文章(伝統の「Hello, world!」)で、23行目は次に続くコードはBootstrapで必要な、JavaScriptコードであることを説明しているコメントです。
25行目)<!-- Include all compiled plugins (below), or include individual files as needed -->
次の26行目は必要に応じてコードに付加してください、というコメントです。不用なので削除しましょう。
26行目)<script src="js/bootstrap.min.js"></script>
Bootstrapのコンポーネントを使ってさまざまな動きをつけるために必要なコードです。CDNを用いて外部ファイルを参照するために、“Bootstrap CDN”の項目にある下記コードと差し替えます。
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
ここまで書き換えたBootstrapのテンプレートファイルを、下記にアップロードしました。ブラウザで表示してもまだ真っ白ですので、ソースコードを確認してくださいね。
http://r360studio.com/dgcr/bootstrap/step1.html
次回から、このファイルを使って実際にBootstrapを動かしていきます。
《補足1》CDNコードの中にあるintegrityという属性が気になって調べてみました。CDNでは、外部サイトを参照します。皆がつかうコードなので、愉快目的の攻撃者がそのソースを書き換えるなどの悪質な行為をするかもしれません。
そこで、CDNコードの提供者が、ソースの整合性をチェックするための仕組みとしてSubresource Integrityという仕組みを用います。そのチェックのために必要な鍵となるコードが、integrity属性です。
万が一問題がある場合は、参照先からコードが読み込まれなくなっています。
【Subresource Integrityについて調べた】
https://blog.kazu69.net/2015/10/01/check-for-subresource-integrity/
《補足2》24行目で読み込んでいるのは、JQueryの本体ファイルです。Bootstrapで提供されるJavaScriptコードは、JQueryライブラリのため、JQueryの本体ファイルを先に読み込まないと実行することができません。
JQueryは、JavaScriptコードとの間を取り持つ中間言語と呼ばれるもので、これを間に入れることでJavaScriptプログラムの開発を容易にします。
https://jquery.com/
●あの“とほほ”さんにもBootstrap入門が!
今回Bootstrapを改めて取り上げることにしたのは、あの“とほほのWWW入門 ”さんが取り上げていたからです。
HTMLやCSSを学ぶ時にお世話になっているこのサイトですが、いつもはコードを直接検索するので、トップページはほとんど見ることがありません。ある日、たまたま見る機会があり、驚きました。「Bootstrap増えてるやん!」と。
http://www.tohoho-web.com/ex/bootstrap.html
とほほさんで紹介されるぐらいであれば、世間一般に広く普及したのだろうなぁ…ということで、今回取り組んでみることにしました。
さて、次回はおそらくこの続きです。今度は、Bootstrapを使って、HTMLタグを修飾したり、ボタンを作ったり…をCSSを書かずにサクッと行ってみたいと思います。
ちなみに公式サイトの解説ページはこちらです。予習したい方は、どうぞ。
http://getbootstrap.com/css/#type
ではでは、また!(^^)
【森和恵 r360studio 〜 Web系インストラクター 〜】
site: http://r360studio.com
mail: r360studio@gmail.com
Twitter: http://twitter.com/r360studio
web系の担当講座、8月までのスケジュールが公開されました。好評受付中です。ぜひ!
http://r360studio.com/seminar/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
編集後記(05/30)
●おバカな映画は好きだけど、ここまでバカだと腹立たしいやら情けないやら。
「新選組 OF THE DEAD」は予告編を何度も見せられて、それなりに楽しみにしていた。お笑いバナナマンの日村勇紀が、新選組の名を盾に、放蕩の限りを尽くすお荷物隊士“屑山下衆太郎”を演じるゾンビ映画だという。屑山がゾンビに噛まれてゾンビ化する、ゾンビコメディのようだ。クズでゲスな役に日村とは、ナイスな配役かもしれない。主なキャストは12人、主演ということになっている日村以外は、初めて名前を聞く役者ばかり。語りは目黒祐樹(一応知ってる)。場所は新選組の地元京都、じゃなくて、どう見ても日光江戸村だ。
新選組は屑山らわずか4人。リーダーが監察方・山崎烝とはシブ過ぎる。新選組のユニフォームが最も似合わない人のはずだ。屑山以外の二人は見習いだという。棒術の使い手・火藤は男装した女性だが、それを誰も気づかないという設定が強引すぎる。他に出てくる有名人は坂本龍馬と唐人エックス(なんじゃそれ)。一応ちゃんと演技らしいことしているのは12人、それだけ。どこが新選組だよ。まともなゾンビ(笑)は外国人一人だけ。おっと、牢内にはゾンビ化進行中の屑山がいた。別の牢には坂本龍馬がいて、捕らえられたゾンビ・ジョージの通訳をやる。人間とゾンビの枠(?)を超えて友達になるみたい。
ホラーの味覚は最初からまったく期待はしていない。どれだけくだらないのか、ナンセンスコメディの出来を、温かく見守ったのであった。ああ、くだらないの見ちゃった、と言いたかった。しかし、ぜんぜん要望に応えてくれない。まったく面白くない。クスリとも笑えない。最大の問題は、新選組の屑山(日村)が主役ではなかったことだ。予告編を見ても、なんらかのビジュアルを見ても、屑山(日村)は主役以外のなにものでもない。ところが、主役にしては登場シーンが異常に少ない。クズでゲスなお荷物隊士、といった見せ場も少なく(そこが見せ場だろうが)、ゾンビ化するプロセスが時々出てくるだけなのだ。
一番目立つ、一番おいしい役は坂本龍馬である。メリケン語でゾンビ・ジョージと意思疎通できる龍馬は、ストーリーを回す重要な役で出番が多い。演じているのは渡辺一志という役者で、軽妙な演技がそこそこ上手い。後から知ったが彼はこの映画の監督であった。日村勇紀を看板にして、じつは監督が主役におさまるという仕組みのようだ。新選組の「誠」の一字を見て覚醒した屑山ゾンビは「ゾンビではなく、新選組として死にたい」と願い切腹させてもらう、ってつまらな過ぎる。もっとコメディらしい死に様にしてくれ。BC級トンデモ映画の域に達していない、監督の自己満足映画というべきダメ作品。(柴田)
「新選組 OF THE DEAD」
http://www.amazon.co.jp/exec/obidos/ASIN/B014UL9Q8G/dgcrcom-22/
●いまやっているアニメで好きなのは「僕のヒーローアカデミア」だ。原作は読んでいない。劣等生(語弊あり)である主人公は、努力と知恵で成長していく。努力する主人公の話だと、「はじめの一歩」「シャカリキ!」「弱虫ペダル」「ガラスの仮面」あたりも好きだけど、彼らは自分たちで知らず知らずのうちに(努力とは思わず)土壌を作っていたり、元から天才だったり。ヒーローの方は、努力してもどうにもならないところからスタート。
「シビルウォー」面白そう〜! 家で見ていた「アベンジャーズ/エイジ・オブ・ウルトロン」は途中で眠くなった……。
名古屋ウィメンズマラソン続き。団体が仲間を励ますためにこちらのペースが崩れてきて困っていたが、そんな時にノリのいい曲が流れたら、気が紛れて走れたりするんだから不思議。
走るだけなら大会に出ることはないのに、という人はいるが、違うんだよ〜。飲み物食べ物トイレを用意してくれた上で、広い道と人の背中と応援と距離表示がある。大会でのテンションの高さというのがある。マイペースで頑張っている人がいたら、私も頑張ろうとなる。練習だと到底走れない距離が大会ではどうにか走れる。迷っている人がいたらぜひ。 (hammer.mule)
僕のヒーローアカデミア
http://www.amazon.co.jp/exec/obidos/ASIN/4088802640/dgcrcom-22/
はじめの一歩
http://www.amazon.co.jp/exec/obidos/ASIN/B018I6L5YM/dgcrcom-22/
シャカリキ!
http://www.amazon.co.jp/exec/obidos/ASIN/B002DEL442/dgcrcom-22/
弱虫ペダル
http://www.amazon.co.jp/exec/obidos/ASIN/4253214517/dgcrcom-22/
ガラスの仮面
http://www.amazon.co.jp/exec/obidos/ASIN/B0095F3AWQ/dgcrcom-22/