2019年06月

HTML上で画像をポップアップ表示させるメモ

軽量で簡単そうなLightbox Plusを使う

導入

  • 配布サイトから「lightbox_sample.zip」をダウンロードする。
  • 解凍しsampleフォルダの中からresourceフォルダを取り出してそのまま配置する
  • HTMLソースのhead要素に以下を記述する
      <link rel="stylesheet" type="text/css" href="./resource/lightbox.css" media="screen,tv" />
      <script type="text/javascript" charset="UTF-8" src="./resource/lightbox_plus.js"></script>
    
  • 画像要素にLightbox Plusを使用して表示させるようにリンク属性を追加する

    <a href = "画像1.jpg" rel="lightbox"><img src="画像1.jpg" width="400" height="269">
    <a href = "画像2.jpg" rel="lightbox"><img src="画像2.jpg" width="400" height="269">
    
  • "rel="の部分を同じ値にすることでポップアップ時に矢印ボタンで連続表示可能になる

lightbox_plus.js内のgifファイルの参照先を編集すればLivedoorブログでも使えるかと思ったが、それだけでは動作しないようだ。

VSCodeのターミナルで利用するシェルを切り替える

VSCodeのターミナルで利用するシェルを切り替えて使いたい場合のメモ

  • 拡張機能「Shell launcher」をVSCodeにインストールする。
  • settings.jsonに以下を追加
    "shellLauncher.shells.windows": [
      {
          "shell": "C:\\Windows\\System32\\cmd.exe",
          "label": "cmd"
      },
      {
          "shell": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
          "label": "PowerShell"
      },
      {
          "shell": "C:\\Program Files\\Git\\bin\\bash.exe",
          "label": "Git bash"
      },
      {
          "shell": "C:\\Windows\\System32\\bash.exe",
          "label": "WSL Bash"
      }
    ]
    
  • コマンドパレットからShell Launcher:Launchと入力するとjsonファイルに指定したシェルが候補に表示されるので、使用したいシェルを選択するとターミナルのシェルが切り替わる。 キャプチャ

Visual Studio Codeのターミナルでwslを使えるようにする

デフォルトのターミナルをwslにする

  • コマンドパレットを表示させterminal: selectと入力すると「Select Default Shell」が候補に表示されるので選択する。
  • キャプチャ01
  • 優先するターミナルシェルでWSLを選択する。
  • キャプチャ02
  • VSCodeを再起動してターミナルを表示させる。
  • キャプチャ03

settings.jsonから変更する場合

  • "terminal.integrated.shell.windows": "C:\WINDOWS\System32\wsl.exe"

複数のLinuxをインストールしている場合

恐らくSystem32\wsl.exeはwslconfig.exe /lで表示される既定のシステムが起動するはず、 別のシステムを指定したい場合は、ユーザーフォルダからたどり例えばubuntuなら

%USERNAME%\AppData\Local\Microsoft\WindowsApps\ubuntu.exe

等にする必要があるかもしれない。

ffmpegのオプションが覚えられないので

必要なオプションをチェック、入力後表示ボタンをクリックすることでオプションが表示される。

ビデオコーデック リサイズ(横解像度を入力): ビットレート: フレームレート:

オーディコーデック ビットレート: サンプリングレート: チャンネル:

カット 開始:

ここに結果を表示

cueシートからオーディオファイルを切り出すスクリプトを試す

過去にCDから作成したape形式のオーディオファイルとcueシートから曲別のmp3ファイルを作成する。

cueシートを分析してffmpeg用のコマンドを出力するソースコード(cue_to_mp3.py)がgithubに公開されていたのでそれを利用してみる。

単一のファイルなので、テキストファイルにコピペしてもよかったがせっかくなのでVSコードからgitcloneコマンドで 取得してみる。

Pythonで動くので事前にPythonをインストールしておく。

以下手順

  1. コマンドパレットを表示させgit: cloneと入力
  2. リポジトリのURLの入力を求められるのでコピペで入力 bancek/cue_to_mp3.py https://gist.github.com/bancek/b37b780292540ed2d17d
    からソースをダウンロード
  1. 保存先のフォルダを指定してダウンロード
  2. 「複製したリポジトリを開きますか」と表示されたらリポジトリを開くをクリック
  3. 拡張機能'Python'のインストール確認のメッセージが表示されるのでインストールクリック
  4. キャプチャ011
  5. 「linter pylint is not installed」と表示されたらInstallを選択する(pipが必要になるが普通にpythonをインストールしていればpipもインストールされているはず)
  6. キャプチャ022

動作確認

先頭の'cue_file ='に目的のcueファイルをフルパスで記述 windowsだけかもしれないがpythonの場合、pathの区切り文字は2文字続けて(C\\py\\Test )記述するのがルールのようだ。

後はソースを全選択して、引きクリック→pythonターミナルで選択範囲を実行でffmpegのコマンドが出力されるはずだったが、いくつかエラーになった。

まず34行目の

t = map(int, ' '.join(line.strip().split(' ')[2:]).replace('"', '').split(':'))

これを

t = list(map(int, ' '.join(line.strip().split(' ')[2:]).replace('"', '').split(':')))

よく理解出来ていないが、mapの扱いが2.xと3.xでは異なるらしい。

次に最終行の

print cmd

print (cmd)

に変更

あとビットレートの指定が先頭になっているので cmd += ' -b:a 320k'の記述を出力ファイルを指定する直前に移動した。

ビットレートとファイルやタグの命名ルールは適宜修正する。

pythonのターミナルではなくてコマンドプロンプトやpowershellでも同様に出力出来た。