生活を良くします - 怠惰なプログラミング

読者です 読者をやめる 読者になる 読者になる

生活を良くします-怠惰なプログラミング

外資系でエンジニアをやっています。便利なサービスや商品、プログラミングで作ったものなどを紹介していきます

Macでgeektoolを使い Wallpaper Engineのように無料で壁紙を動画にした

プログラミング ブログ 便利

壁紙を動画にする

Wallpaper Engineとは


このように壁紙が実際に動くという近未来感溢れるツールです。Steamというサイトから購入することができます。Wallpaper Engine on Steam

すごいと思ったのですが案の定、この「Wallpaper Engine」はwindonws専用っぽかったので諦めました。初音ミクの動画壁紙が一番有名になっているような気がします。

まだ完全な製品版ではないようですが、それでもかなりのクオリティで動いているのはさすがだなという感じですね。現在(2017年1月7日時点)はまだ日本語に対応していないようです。ですが実際は動画を壁紙にするのであまり日本語サポートが必要なのかな?という気はします。

398円で購入することが可能です。対応している動画のファイル形式は次のようなものですね、 mp4, WebM (Workshop); mp4, WebM, avi, m4v, mov, wmv (local files)、とほぼ主要なのが出払っている感じです。またこのWallpaper Engineはゲームをプレイしている間などは勝手に止まってくれるようです。確かにパソコンでゲームやっているときは壁紙のことなんて誰もみないですよね。ちょこっとした工夫ですがこの機能は相当便利な気がします。

今回遊んでみた

#wallpaperengineというタグでのツイートが多かったので


たぶんMacでもできるだろうと思って色々とやっていたところ簡単にできてしまいました。むしろMacでスクリーンショットを動画のように撮影したりする方がやや手間取りました。そして一番の難関がはてなブログでの動画の投稿です。はてなブログでは動画のサポートも一応行なっているようですが、動画が動かなかったり読み込みで時間がかかりまくり挙げ句の果てにはカクカクの動きを見せたのでtwitterにあげてそれを使うことにしました。twitterもなぜかパソコンからでは.MOVファイルを上げることはできないみたいだったので.mp4に変換したりと色々と大変でした。

www.what-a-day.net


実際に壁紙を動画にしてみたのですが、思ったより重くはないというのが感想です。ちゃんと音声も出ています。もっと高画質な動画にした場合、話は別だと思いますが今回のレベルでは問題ないように思えます。今回は備忘録も含めてどのようにして壁紙を動画っぽくしたのかということを書いていきます。

使っているのはMacbook Proで、GeektoolのCPU使用率はだいたい5%です。30%くらい消費すると思っていたのですが本当に少ないので驚きました。結構重たい動画も再生できます。PS4 shareで個人的に撮った割と重たい高画質な動画を流して見ましたが普通に流れます。

動画が2分くらいで勝手にループ再生に入るのですが、これはgeektoolというよりはhtmlの書き方によるものなのかなという気がしています。まあ原因は探してみようかなと。

単純にrefresh timeの設定を間違えているだけでした。

ここのRefresh everyが100になっていますが、普通に初期設定のまま0にしておけば何の問題も発生しませんでした。

f:id:what_a_day:20170108123700j:plain:h500


Html, Javascriptなどは初心者なのでstackoverflowやこういうエンジニアが集まっているQ&Aサイトでよくバグの原因を探しています。

質問して役に立つかどうかはわからないので上のような無料登録か、無料で観れるものをいつも使っています。有料のものを批判する意図はないですが、すでに十分な無料サイトがあるので、ネットで探しているとそっちの方を使ってしまいます。


使っているカニの動画はNHKのクリエイティブ・ライブラリーというところが出典です。営利目的の使用以外では無料で使えます。もちろん何か問題がおきた場合は自己責任となってしまいます。

NHKクリエイティブ・ライブラリー

Geektool

まずGeektoolとは

Macのデスクトップをカスタマイズできる無料のアプリです。シェルスクリプト、htmlのどれかがわかればカスタマイズできます。自分はどちらも結構苦手な部類に入るのでGoogle先生に頼りっぱなしになっています。Geektoolをダウンロードする

使い方自体は簡単です。

f:id:what_a_day:20170107011005p:plain:w450


Shell,web,Log,Imageと4つのアイコンが出ていますが、そのうちのどれかを選んでデスクトップにドラッグ&ドロップするだけです。htmlが得意な人はwebを、シェルスクリプトが好きな人はShellを、という形でいいと思います。今回はwebを選びました。

今回やったこと

なぜか「Edit Script」を選択してそのまま直接htmlを書いたのですが、それだとloadingのまま動かなかったので外部ファイルを読み込むという作戦にしました。

kani.htmlとvideo.cssを使いました。video.cssは動画をフルサイズにして再生できるようにするcssで、kani.htmlはカニの動画を再生するためのhtmlです。kani.htmlでは動画を自動再生、ループをオプションで選んでいるので放っておくと勝手に壁紙がずっと回り続けます。

[追記] なんかMac版が出そうな雰囲気になってきたのでとりあえず対応する予定かどうかを観てからファイルを書くことにしました。


ローカルファイルでやる

[2017/1/7更新]

調べてみるとそのままlocal fileを選択することもできました。

つまり作ったkani.htmlとvideo.cssをdesktopにおくとすると次のようなコマンドをURLとして設定すれば動きます。難しい設定は要りませんでした。localhost://などはつけなくてもよかったので驚きました。

/Users/yourname/Desktop/kani.html

もちろん、ファイルのディレクトリが違えばこのコマンドも違ってきます。このコマンドをここに打っておきます。これで壁紙が大画面で動画として再生されます。

f:id:what_a_day:20170107013456j:plain:h450

ただ理由は不明ですが、若干の不具合が見られます。一度動画が壁紙として再生されるとURLを変更しても、削除しても音声だけは流れ続ける場合が、ほんの少しですがあります。外部ファイルを使った場合では今のところこのようなバグはなかったです。

外部ファイルを使う

こちらに書いたものを参考にして、上の二つのファイルを外部ファイルとしてホスティングします。この時に壁紙としたい動画を一緒にアップロードします。他にホスティングのサービスがある人はたぶん何を使ってもいいと思います。

www.what-a-day.net


その後、webのアイコンをデスクトップにドラッグ&ドロップします。

そして最後にkani.htmlがホスティングされているURLをAddressのURL:に打ち込むと完成です。

f:id:what_a_day:20170107013456j:plain:h450

あとはEnableにちゃんとチェックが入っているかを確認します。これで終了です。壁紙が動画になります。

f:id:what_a_day:20170107013728j:plain:w450

これにて無事に自分の場合だとカニの動画がデスクトップの壁紙になります。(これは上のtwitterの単なるスクリーンショットです。実際は動画を表す矢印っぽいのは出ません。)

適度にサイズを調整できるので自分好みに合わせると良いと思います。

f:id:what_a_day:20170107014753p:plain:w450

Geektool以外を使う方法について

MovieDesktop - Daniele MurabitoScreenwatcherというアプリでも同じようなことができるようです。

おまけ

Geektoolで簡単な天気予報を表示させることができます。デスクトップに天気予報が書いてあればそこそこ便利になります。実際にどのように見えるのかというと下の画像のような感じになります。まあまあ綺麗になっているかなという感じです。

f:id:what_a_day:20170106232420p:plain


今回はさっきよりずっと簡単です。Shellのアイコンをデスクトップにドラッグ&ドロップします。

f:id:what_a_day:20170107014158j:plain:h450

そのあとにcommandという欄があると思うのでそこに以下のコマンドを打ち込みます。これはTokyoにしてあるので東京の天気予報が表示されます。確か横浜とか大阪とかでも行けたような気がします。外国の都市はかなりカバーしています。

curl -4 wttr.in/Tokyo


普通にやると天気予報のアスキーアートみたいなのがずれてしまうのでフォントの調整をします。一番いい状態なのが下の画像のようなMenloのイタリックです。どうやらフォントによって幅が違うようなのでそこらへんには注意しておきましょう。

f:id:what_a_day:20170106232429p:plain:w450

これからやりたいこと

html,javascriptの勉強をそろそろ真面目にやりたいなと思っています。javascriptはわからない、俺たちは雰囲気でjavascriptを書いているみたいな感じになっているのでいつかやらないとなって感じです。ドットインストールでやってる内容はわかる。だいたいプログラミング言語で共通してる基礎はわかっているのでその先をやるつもりです。

最近わかったこととして、忙しくなってきた時はネットで勉強するのはおざなりになるということです。無理にでもどこかに通って勉強しようと思います。

なんだかんだ一番コスパが高いように思います。webスクとかかな、まだ決めてないです。

それかオンラインでも専任のエンジニアが一人一人についてくれるオンラインでのマンツーマンみたいなプログラミングスクールがあればいいですけどね。

[追記]

codecampというのにしようかなという気になっています。Javascriptやhtmlを勉強しようかと思っていたのですが「wordpress 講座」というのを見つけたのでそちらにしようと思います。まあwordpressの勉強してればhtmlとかもわかってくるでしょう、たぶん。無料体験してみてあっていればやろうと思います。

まとめ

  • windowsではwallpaper engineがでた
  • MacではGeektoolがある
  • Geektoolを使って壁紙を動画のようにした