Home All posts

2017-03-31

|

【blogger】シンタックスハイライトはprism.jsで

prism.js
今話題のprism.jsをブロガーに実装するやりかた。

CDNを使います。
こちらのサイトからもって来ました。
https://cdnjs.com/libraries/prism

<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/line-numbers/prism-line-numbers.min.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/line-highlight/prism-line-highlight.min.css' rel='stylesheet'/>

の3行を</head>のすぐ上へ

<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/line-numbers/prism-line-numbers.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/line-highlight/prism-line-highlight.min.js'/>

の3行を</body>のすぐ上へ

それぞれ、2行目と3行目はプラグイン部分なので、行番号表示と特定行ハイライトが必要なければなくてOK。

記事中は
<pre class="line-numbers" data-line="4,9-10"><code class="language-markup">内容
</code></pre>

のように、<pre><code></code></pre>で囲みます。
line-numbersは行番号表示、data-lineはハイライトを指定します。
language-markupのmarkupの部分が言語指定です。

ちなみに、上記のコードもprism.jsで表示しています。
きれいに表示出来て気に入っているのだ。
Read More

2017-03-28

|

【blogger】トップページに動画のサムネイルが表示されない

【blogger】トップページのサムネイル

通常、記事中に画像（image）を入れると最初の1枚が自動的にトップページにサムネイル表示されると思います。
これを画像ではなく、動画、今回はyoutubeの埋め込みコード（iframe）を記事中に入れても、トップページのサムネイルに表示されないよー、ということがあったので、解決法？？のようなものを備忘録的に記録。

まず、こちらのサイトを参考にしました。

動画サムネイル画像に再生アイコンをCSSで上乗せして何かそれっぽくする方法

んで、youtubeのサムネイルを取得する、はこちらのサイトもわかりやすいので参照
YouTubeの動画サムネイル取得＆ブログへの貼付けの方法

上記２つの参照記事は、youtubeの動画が埋め込みコードだと表示が遅いので、youtubeのサムネイルを取得して画像として表示し、動画のページへリンクさせよう、という内容になっています。

これだー！と。

そもそも画像であれば問題なくブログのトップページに表示されるわけです。

これに加えて、トップページのサムネイル画像からもリンクで動画に飛べば完璧。

という訳で、元々のテンプレートでは

<head>内
function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;

 if(img.length>=1) {
  imgtag = '<img src="'+img[0].src+'" class="pbtthumbimg"/>';
  summ = summary_img;
 }
 
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}

<body>内
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
</b:if>
</b:if>


だったのものを、
<head>内
function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var atag=div.getElementsByClassName("ytlink");
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
　　
 if(img.length>=1) { 
  imgtag = '<a class="ytlink" href="'atag'" target="_blank"><img src="'+img[0].src+'" class="pbtthumbimg"/></a>';
  summ = summary_img;
 }
 
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}


と書き換え、

記事中に
<div class="separator" style="clear: both; text-align: center;">
<div class="ytlinkbox">
<a class="ytlink" href="https://www.youtube.com/watch?v=動画のID" target="_blank"><img alt="動画のタイトル" border="0" class="ytimg" height="240" src="https://img.youtube.com/vi/動画のID/0.jpg" title="動画のタイトル" width="320" /></a>
<a class="ytgray" href="https://www.youtube.com/watch?v=動画のID"><img border="0" src="再生ボタンの保存先" /></a>
</div>
</div>


と、リンク先のアドレスを　a class="ytlink"　で指定します。

すると、なんということでしょう！！


トップページに、取得したyoutubeサムネイル画像が表示され、動画ページへリンクもされましたが、ついでにyoutubeの埋め込み動画（iframe）までトップページに表示されちゃいました。

あれ？？


どうやら、変更した<head>内の9行目に、<a>タグを追加していることが関係しているようなのですが、どうしてそのような動作になるのか、パソコンの画面とにらめっこした所で、私の足らない頭では理解出来ませんでした。

。。。まあ、便利なのでそのままでいっか。

結局youtubeのサムネイルを取得するのはやめて、埋め込みのまま表示することに。
速度より見た目を重視しました。

ちゃんちゃん。

完成したトップページはこちら
ヒバリとカタツムリは歌をうたう

Read More

2017-02-02

|

DTM作業環境レポート【2017年2月版】

DTM

まずはPC

MacBook Pro

MacBook Pro

2016年に購入
まったく何の問題もなし。

DAWのソフト

logic Ⅹ

Apple Logic Ⅹ
使いやすい。

AbletonのLiveも持ってるけど、DTMにはほとんど使わない。
（本業が舞台音響なので、そちらの方で使ったり使わなかったり・・）

インターフェース

インターフェース

TASCAM US-2×2

電子ピアノをMIDI入力させるのに必要。
PCのモニタリングもそのままインターフェースのヘッドホンアウトで確認してる。

後で出てくるEWI（イーウィー）は直PCへUSBなので、インターフェースを通してない。

外付けHDD

外付けHDD

G-Technology 3TB G-DRIVE with Thunderbolt

mac本体にすべての音源を入れるのは不可能なので、音源は基本的にこちらの外付けへ。
しかし、よく使うロジックの付属音源（Boesendorfer Grand Piano）でレイテンシー（発音の遅れ）が気になってしまい、ロジックの付属音源だけmac本体へ戻してしまった。
SSDがもっと安くなったら乗り換えたい。

音源

Logicに付属してる音源も使う。主にBoesendorfer Grand Piano。

AKAI ARIA

AKAI ARIA

EWI（イーウィー）に付いてくる音源。
Logicにプラグインして使ってる。
EWI（イーウィー）で使う音源は現状アリアで全てまかなえている。
中々きれいな音がするし吹きやすい。

その他

32lives

32lives

Logic Ⅹは32bitの音源を読み込まないので、このソフトを使ってアリアを無理やり読み込ませてる。でも動作は安定してて問題ない。
これがないとアリアを使えないので救世主。

電子ピアノ

電子ピアノ

Roland HP-2

私が社会人になった頃からの付き合い。
かれこれ10年以上。

ウィンドシンセ

EWI


AKAI EWI USB

イーウィーくんと呼んでます。君なしでは休日が充実しない。相棒くん。

おまけ

ヘッドホン

ヘッドホン
SONY MDR-CD900ST

長時間かけてても耳が痛くならない。



作成された作品はこちらのリンクから聞けます
https://www.youtube.com/watch?v=lim4oTXhMG8
（YouTubeの動画再生ページへリンクします）


18/11/12追記
macのOSを「High Sierra」にアップデートしたら、「32lives」が使えなくなってしまいました。
詳しくは【2018年11月版】レポートをご覧ください。
こちらから


Read More

2017-01-21

|

『秘密の金魚』ってどんな金魚？

金魚のみる夢


サリンジャーの書いた本の中に『秘密の金魚』っていう話があるのを知っていますか？
自分で買った金魚を大人に見せたがらないっていう子供の話しなんですが。で、全然関係ないんだけど、この間金魚の夢を見まして。

昔実家に住んでた頃の自分の部屋に、その頃にはなかった水槽が二つあって、その中に金魚がたくさん泳いでいるんです。まるまる太った結構立派なやつ。
で、なんか話しかけてきたんだ。日本語で。
わあ喋ったとか思いながら一旦びっくりして。

水槽の隣にエサが置いてあったから、じゃあエサでもあげようと思ってそのエサを水槽の中に入れるんだけど、すごいブーイング。
なんかエサが大きすぎるとかすぐ沈んじゃうんだよとかそんな感じで。
確かによく見るとピーナッツみたいのがそのまま入ってたり、大きいのとか小さいのとかまばら。
エサの横にふるいがあったから、ふるいに入れて細かいやつだけ落としてやった。したら、ありがとーとか言って喜んで水槽の間を行ったり来たり飛ぶんだ。ヒレをひらひらさせて。

なんか文句のふてぶてしい金魚だなあと思いながらも、ひらひら飛んでる姿がかわいかったから、まあいっかっていう、そういう夢。

Read More

2016-12-18

|

マネーフォワードを使って自動で資産を管理しよう

マネーフォワードログイン画面

マネーフォワード、ご存知ですか？
銀行口座の残高やクレジットカードの明細などを一括管理できる今流行りのアグリゲーションサービスです。

さすが、精度が高いですねー。

クレジットカードなどのオンラインID情報を登録するだけで、過去数か月分のデータを読み込んで人工知能が自動で項目ごとに振り分けてくれます。

今まで自分のお財布の中身はどんぶり勘定だった私も、これなら負担なく続けられるし、収支がグラフでわかりやすく表示されるので、楽しい楽しい。

ざっと紹介します。

まずユーザー登録

マネーフォワードへ登録するのに必要な情報は、メールアドレスとパスワード。あと性別や職業などの簡単なプロフィールのみ。
住所や名前を入力する必要はないんですね。
フェイスブックのアカウントなどとも連携できるようですが、自分の名前や住所などの情報を入力しているSNSとは連携しない方が安心ですね。
後に銀行口座のオンラインID、パスワード等を入力しますから、これらのパスワードとマネーフォワード自体のパスワードも別の物にしておきましょう。
項目を手動入力して家計簿を作るだけであれば、この状態で使用することが出来ます。

次に銀行口座やクレジットカードのオンラインサービスIDを登録

次に銀行口座やクレジットカードなどのオンラインサービスのIDとパスワードを登録します。
例えば三菱東京UFJ銀行だったら、「三菱東京UFJダイレクト」の契約番号とログインパスワード。
エポスカードだったら、「エポスNet」のエポスNet IDとパスワード。
といった具合です。
登録可能なサービスは、2016年12月現在、2598サービスだそうです。

登録可能サービス

株や投資信託などを行っている方は、証券会社等も登録しましょう。
変わった所では、Amazonや、Tポイント（Yahoo ID）なども登録出来ますよ。

【家計簿】

家計簿グラフ

クレジットカードなどを登録しておけば、細かい支出が自動的に記入されていきます。
食費→夜ご飯、交通費→帰省など、自分のわかりやすい項目に振り分け直すことも出来ます。振り分けた項目はAIが覚えて、次回同じ支出があると同じ項目に分類してくれます。

ちなみに私が自分用に使っているオリコカードは、画像認証をしないとデータを取りに行ってくれません。
私はマネーフォワードを開くたびに画像認証をしてデータを取得しています。
他の銀行口座やクレジットカードは、一度登録すると画像認証なしでデータを取得してくれているのですが・・
ちょっと不便な感じがしますが、セキュリティなので仕方がないですかね。オリコさん。

【予算】

予算をたてる

毎月の予算を決めて支出を管理します。
1か月の期間ですが、何日からの1か月間なのかと、設定日が土日祝日の場合前倒しにするか後倒しにするかなど、設定で変えることが出来ます。

集計期間の変更

【資産】

株や投資信託をされている方は、ここを見るとポートフォリオが見れるようです。


Read More

2016-11-01

|

スクリーンショットを撮ったら自動でクラウドに保存させよう

今までは

スクリーンショットを撮る　→　ペイントやパワーポイントなどを開く　→　貼付ける　→　ファイルを保存する

などの行程を経なければ欲しいスクリーンショットを使用することが出来なかったwindows機。

今後はOneDriveを使用してる方ならスクリーンショットを撮った瞬間すぐにOneDriveに保存されます。
（OneDriveはwindows10にプレインストールされています）

OneDriveはクラウドサービスなので、他のPCやタブレットなどからも、撮ったスクリーンショットを参照することが出来て便利ですね。

Microsoftのページへリンク　https://onedrive.live.com/about/ja-jp/

ちなみにmacは撮ったスクリーンショットはデスクトップにpngとして保存されるので、macユーザーにはこの便利さが感じてもらえないかも。

macでスクリーンショットを撮る方法　https://support.apple.com/ja-jp/HT201361


Read More
登録: 投稿 (Atom)