Bootstrap and Video に挑戦  

音楽が流れます。停止は下のボタンで。
下手なギターもYoshiの世界の1つです。

《 ときには星の下で眠りたい 》

Introduction

Bootstrap and Video に挑戦

流行のブートストラップによるレスポンシブデザインやHTML5の動画に興味があった。
しかし、
ブートストラップの通常使用だけではユニーク差に欠けその臭いが強く残る。
このスメールの最小減の抑制に挑戦。
そして更に、
プートストラップ内でのフルスクリーン背景動画で
動画の表示横幅を常に一定に保つためのスクリプト
に挑戦をした紹介です。
(2015/11/27)

メインメニューの内容

Introduction

このエリアとなります。
ページ全体の内容や構成を簡単に説明しています。

Category1~7

別ページ Yoshiの世界 の簡単な紹介とリンクです。
是非見てくださいね。

Scripts

作成過程で参考にさせて頂いた各サイトのURLを記載させて頂きました。
有難いものですね。

tools

このページの作成時に使用したソフトの紹介となっていますが
全てAdobe CC_15関連となります。

ときの流れのなかで

YoshiのPC環境も流れに押され仕方なく更新しました。
そして、WAV作成関連のソフトもAdobe-CC15を使用するようになりました。
*格安での購入事例も記述してありますが?

参考にした基本サイト

先ずは、臭いを消すための
ブートストラップスクリプトの参考サイトです。

名古屋のWEBデザイナーさま
megane84.com:
初心者からでも解りやすい内容だと思いました。

結果

パクリでも内容を理解するには難しく、
デザイン的にも本家には至当はかないませんね。
そして、PCとスマホ画面の縦横比の違いによる
レイアウトは難しく ソースも煩雑になり苦戦する。
Yoshiのような未熟者にとっては
ブートストラップの臭いをそのまま出すことが
無難のようですね。
また、ここではフルスクリーンとして見たが、
Yoshi的には必要ないと思えるが?
今度は Flex を使って試行錯誤しようと思っている。

ここでは、HTML,CSS,javascriptのソースは記述しませんが
最近ではお使いのブラウザーから簡単に確認できますね。

Yoshiの世界
Shizuoka Japan

次のカテゴリーでは Yoshiの世界 の各ページの簡単な紹介とリンクです。

《風の中にバラッドを感じるとき》

Yoshiの世界 Category【1~5】

Category【1/5】

約60年程前のこと、宗一郎とその仲間が高度成長時代を目指して造り上げたHONDA-C100(スーパーカブ)の魅力と自動遠心クラッチの機構を徹底的に解明した結果の紹介です。

 

 

Category【3/5】

Yoshiは60代であるが今もって引きずっている波乗りや海について、またYoshi的にそれに関連すると思われる渋い音楽の紹介となります。

 

Category【5/5】

Yoshiは60代であるが今もって引きずっている波乗りや海について、またYoshi的にそれに関連すると思われる渋い音楽の紹介となります。

 

《 洗いざらしの白いTシャツもいい 》

Scripts

使用したスクリプトと参考にしたサイトの紹介

Video Areas

背景全画面動画の組込

オーバーレイ上にMainMenuやPauseButtonの配置
基本のスプリクトは以下を参考としました。
サイト名:CodePen チャーミングな表情に見とれますよ!
ここでの変更は全レスポンシブ画面で動画のアスペクト比(縦横比)を一定に保ち且つ横幅を一杯に表示させ
メニューバーを開閉式としている。そして、動画以降のコンテンツをスクロールで表示できるようにすること。
方法は後述する[PauseButtonの配置方法]や [ Menuの開閉 ] を参照してください。

参考:現状の動画ファイルのサイズ
目標は5M以下としたかったが現状は約倍となっているがこれも参考の一つとして見てください。
フレーム幅:1280×720 動画時間:30秒 (mp4=7.76Mb/webm=9.86Mb)となっています。
決して綺麗な解像度ではありませんね。YouTube利用が画質的またサイトの容量的にも勝かな?
しかしYoshiにはYouTubeのポーズボタンのみを取り出せない。無念いや残念。

PauseButtonの配置方法

ビデオ上のPauseButtonは画面のレシポンシブに合わせ縦方向位置調整している。
方法は、動画画面上に透明レイヤーを被せ、それに続けてButtonの外枠を配置し、
各画面でのY方向の調整を透明レイヤーのWidthで行って見たが、
もっと簡単な方法もあるかも知れない?
動画以降のコンテンツはこの前述のButtonの外枠以降に続けて記述している。

サイト内Scriptsの紹介

メニューの開閉

シャッターのように開閉する動きが好きだが?
cbslideheader.jsを使用、チョット古臭いのでヘッダーと重ね合わせるようにしてみた。
サイト名:maechabin

スクロール位置をメニューに視覚化

ゲストへの細かな配慮も大切かな?
scrollspyの組込
サイト名:Bootstrap3日本語リファレンス

XS画面でプルダウンメニューを閉じる

スマホ対応には必ず必要?
スクリプトの追加
サイト名:Powered by HatenaBlog

ページ内外へのスムースストローク化

画面のスクロールが視覚的で解り易く好きだ。
以下サイトを参考に他HTMLへのジャンプ時にも対応するように変更した。
サイト名:Kyasper Web Design

指定位置での文字のfixed化と消去

行間が広い時には面白い動きだと思った?
headerPersistの組込
しかし、Yoshiの使い方が悪いのか?
画面を開いた状態でのレシポンスには文字ズレが発生するが
各画面サイズからの立ち上げからでは対応できている。
サイト名:webkaru.net

プルダウンメニュー

CSSのみでここまで出来るとは凄いと思った。
但し、CSSは長文となる。
サイト名:Ri-mode

スクロールに対応した画像表示

もう少し手を加えればスライダーより勝かも?
取合えずここでは、
レシポンシブに対応させるためイベントの発生位置をpx指定から%で指定している。
現在のスクリプトでは出没してくるx方向のスタート位置を大きく取ると
画面上にガータ部が発生してくる。
よって、縦方向のみの出没と消滅を繰り返している。
スクリプトの追加
サイト名:Black Flag

マウスホバー時に画像の透過度を変更

スプリクトに手を加えバックグランド色(白色)を表示させてみた。
サイト名:Hallurun Archives

《一日じゅう空を眺めていたい 》

Tools

ページ作成時に使用したソフトの紹介

Adobe Creative Cloud ADOBE

以下は全てAdobeCC15となります。そして、Yoshi的な一言レビューも辛口で記述してみましたが?
使い方も定かでないのにネ。
全てのソフトに言えることは、画面がフルスクリーン以上でないとサクサクとは使えない気がしました。
使い慣れれば良いのかねえ? ’2016/11/からはCC_17になりました。

ないしょのお話し
Yoshiは学生でも教職員でも無いがAdobeから「CC15を2980円/月で購入できます」と言うメールが届いた。
その理由は定かでは無いが取り合えずその過程を紹介しておきます。しかし購入できるかはわかりませんよ。
1、6月の始め頃からCC15の体験版の使用を始め、5種類程のソフトに渡り約3ヵ月間使い続けた。(1ソフト/月で期限切れ)
2、体験版の使用中や使用期間終了後にはAdobeから購入促進のメールが何回か届くがYoshi的には高価過ぎザボッテ置いた。
3、体験版の使用不可後の約1.5ヶ月後に突然Adobeから「CC15を2980円/月で購入できます」と言うメールが届き購入するに至った。

Adobe Creative Cloud
Yoshi的レビュー他

このページの作成では、Bootstrapの骨格となる部分だけに使い、
その他はフリーソフトの「TeraPad」を使用しました。
最初の作りだし時にはデザインビューでWavフォントが表示されません。
使い方が悪いのか?これは何だ?知らない間に使えるようになっていた。
便利なところは、
①対応するdivのハイライト表示。
②インテントの自動整形(ソースフォーマットの適用)機能である。
Bootstrapの臭いを残すのであれば簡便な仕上がりが期待できそうだが、
Yoshiのようにソースを打ちながら都度の変更や確認を繰り返し
作業する者にとっては余分な機能も多いと思えたが?

クイック選択ツール等は簡便な範囲指定ができるが、
細部ではやはり昔からのペンツールが勝る。
(下ではリムやコード類までペンで抜く)
カブの写真
選択範囲の拡大/縮小とその部分のボカシ機能が良い。
一番の使い道は、女性の髪の毛等の切抜き加工だと思う。
しか操作には技量と感覚が必要でそれらが出来栄に左右される。当然かな?
コンテンツに応じての切抜きや移動も便利な部分もあるが対象となる物の周辺の状態により
全く使えない機能となる?
ビットマップの絵を描いたり、写真への質感の付加、また切抜きや合成、
サイズ変更には無くてはならないソフトである。
そして、これらの修整後にも元画像が残っているところが良く
写真の管理が簡便になりましたよ。

ドロー画像を扱うには必要であるがYoshi的には
あまり使わないソフトであった。
ここではメニューバー内の動画のバーナー(ロゴ)の
作成時に使用したが体験版の使用で初めて使い出したソフトである。
2016/04/09
しかし、
後述のAfterEffectsを使う中では必須のソフトとなった。
使用例としては、
次項のAfterEffectsでのアニメーション動画
「自動遠心クラッチの構造」の作成時に
各パーツを組立状態に描き、
動画内でそれぞれの各パーツを動かしてみた。
このとき各バーツの組立基準点を一定に保つことができ
アニメーション化させる時に便利であった。
本田宗一郎氏の遺産:自動遠心クラッチの構造
アニメの写真
是非見てくださいね。

初めて使い出したソフトである。
このページの動画の始まり部の「Yoshiの世界」が光る
部分では多数の光の色の組み合わせを施した。
また、空の星はパーティクルを地味に使ってみた。
最終的には後述のPremiiereProにて音も含め合成している。
エクスプレッションという言語で動きを制御する
機能を使ってみたものが下の動画となる。
しかし、
この機能に時系列で変化を与えることは不可能なのか?
Yoshi的にはできないように思えたが?
結婚式のオープニング動画
アニメの写真
駄作ですが見てくださいね。

初めて使い出したソフトである。
ここでは、
動画に流れる潮騒やサンコウチョウの鳴き声部の
雑音を消し、下手なギターを録音後、
後述のPremiiereで合成している。
録音時の雑音はしっかりと消去できましたよ。
サンコウチョウの写真
サンコウ鳥の囀り

Yoshiの様な写真や絵でスライドショウー的な
動画作りをする者にとっては
古いバージョンで十分な気がするが?
やり方は、
写真や絵を前述のPhotoshop等で作成/加工し
Premiiere上で繋ぎ合わせ動画としている。
この時バックミュージックもここで入れ、
音に合わせ画像の動きを調整している
積りでもあるが?
その後、
YouTubeへのアップやDVDへ焼き込んでいる。
書き出し時には、
MediaEncoder cc15が便利である。
しかし、
拡張子WebMへの
書き込み指定が無い事は残念である。
Googleとの格闘も分かるが
ユーザーにとってはいい迷惑である。
ネットで調べたらプラグインの紹介があったので
早々組込む。
そして、この動画用にも「Chrome」に使用している。
ちなみに、Yoshiは動画(ビデオ)撮影は殆どやらない。
その理由は、素晴らしい一瞬を切り抜いた写真(静止画)
が好きだからである(下手だから撮れないが)。
結婚式のおもいで
スライドショー
是非見てくださいね。

未だに全てを理解していない中での辛口の評価となりましたが矢張りAdobeは最高に良い製品だとも思っています。
お願い: 値段を1/10のにし、10倍の人が使えるように是非ご検討をお願い致します。
チュートリアル等では英文が多すぎる。また、英文サイトに飛ばされる。全日本語対応後に発売を開始してくださいね。
チュートリアルやクラウド道場では、各ソフトの取っ掛りや習得時に練習や失敗した時の後処理などの詳しい説明を濃厚にして欲しい。
特にDreamweaverやPremiiereProは使い出しが解り難くここが解らないと手も足も出ませんよ。
そう思うのはyoshiだけかな?

勝手な内容で大変失礼しました。習得あるのみですね。

ちなみに、Yoshiはプログラム言語も使い慣れた Delphy から Visual Studio 2015 Community に変えました。
個人で使うには無料ですからね。しかし、GUI的には15年以上前のDelphy4が優れていると思うが?
しかし、データベースサーバも無料で使えるとは有り難いものですね。これからC#とSQLを習得するぞ~。
これも時代の流れか、Delphiの開発者もMicroSoftにヘッドハンティングされたようですね。残念!
いや!
「 Delphi」の素晴らしかったテクノロジーを「Visual Studio」に埋め込んでくださいね。
VS-15 VS-15

それでは、楽しいPCライフを!

 
最後までもお付き合いを有難う御座いました。