ウェブログ

[← 以前の投稿]
[新しい投稿 →]
 
 
 

パソコンでの一例。
必要なもの。
パソコン(今回はマック)、
グーグル・クローム
TokyoLoader for Chrome、または動画ゲッター
VLC media player

① グーグル・クロームをダウンロード。

② クロームに拡張機能 TokyoLoader for Chrome、または動画ゲッターをインストール。

③ gorin.jp の保存したいページを開く。

④ ツールバーのTokyoLoader/動画ゲッターのアイコンが保存可能な動画があることを示すので、クリックして保存ページを開く。

⑤ ダウンロードアイコンをクリックして保存。

⑥ 保存した m3u8ファイルはプレイリストファイルで動画ファイルではない。
  VLC などで再生はできるが、ネット上の動画をストリーミング再生しているだけ。

⑦ VLC をダウンロード、開いて、ファイルメニューから、変換 / ストリーミングを開く。

⑧ 開いたウインドウで、落としたm3u8ファイルを指定。保存ファイル形式と保存場所と名前を指定。保存する。

⑨ ストリーミングしながら保存するので、1時間の動画なら保存に1時間ほどかかる。

⑩ 指定した形式でファイルが保存されます。

ちなみにうちのマックだと保存したm4vの動画ファイルは、VLCなら問題なく再生できるが、クイックタイムだと音声が再生されない(コーデックが対応していないのか?)ので、動画変換ソフトでさらに変換をかけました。

2022年版もあるでよ。

よその管理サイトのリニューアルのために新しいデザインを考えたのだけど、ミニマルデザインはいまいちだったようで、しようがないので自分のサイトに持ってきました。

ドメイン引越ついでにデザインも変更することに。
前のは変に凝ってしまって自分でも分かりにくかったし、読みにくかった。
見れば分かると思いますが、今度のデザインのテーマは英字新聞です。
少し前なら無理だったかもしれませんが、css3の「columns」が使えるようになってきたので段組が簡単にできるようになりました。
段組にするとちょっと困るのが、画像も段組の中に入ってしまうので、小さくなってしまうこと。
「column-span」で段組を無視してボックスを広げることもできるのだが、横全部にしか広げられず、3段組のうちの2段に広げるということはできないので、画像には使わなかった。
そのかわりに、「transform」の「perspective」と「translate3d」を使って、ホバー時に画像をちょっと拡大するようにしました。ただし、この機能は現時点のグーグル・クロームではバグがあってうまく表示できないので停止させています。

他の新要素というと、記事のタイトルに長体をかけてみました。
「transform」の「scale」を使っているのですが、最初タイトルを普通に縦に伸ばしたら、すぐ下の本文の位置はタイトルを変形させる前のボックスの下に入るので、縦に伸ばしたタイトルが下の本文の上に重なってしまいダメだった。
そこで、普通のcssでタイトルのボックスの横幅を大きくして、文字も大きくしてから、scaleXで縮小するやり方でうまくいきました。
具体的には、タイトルのボックスを、width: 142%; にして、transform: scaleX(0.7); で横幅を0.7倍に縮小してます。

あとは、最近wired.jpがやりだしたのだけど、個別記事のページを表示した時に、その記事だけじゃなく、その下に関連記事や最新記事などをリンクではなく全文表示してしまってどんどん読ませていこうというやつ、新聞というテーマなので、短い本文の記事とかだけだとレイアウトの間が持たないし、あれを真似てどんどん関連記事などを勝手に表示していくようにしました。

それと、スマートフォン対応しています。スマートフォン向けには段組は解除して普通です。

古いブラウザーだと表示が崩れるかもしれません。ご容赦を。
そんなとこかな。

(でまたこのあとデザイン変えました)