個人的「Markdownってこうやって使えばよかったのか」発見伝
Markdownというのは、簡単な書き方をすることで手軽に見出しとか箇条書きといったフォーマットの文書がつくれるというものです。（ざっくりと）
ブログやWebサービスと連携するエディタなどがあったので、Markdownといえば「ブログの更新とかするときに楽になる」というイメージでした。あるいは、プラグインなどのフォルダにmarkdownで記述したファイルが入っていることも多いので、「HTMLほどではなく、気軽に整形できる書き方」くらいに思ってました。
そのイメージを変えたのは、QuiverというMarkdownエディタを使ってからでした。
そもそもは数式をメモしたいなーと思って探していたところ、LaTexという、これまた簡単な記号を使って数式を記述するっていう使えるエディタとして、このQuiverの存在を知りまして。
他のMarkdownエディタとちょっと違っていたのは、「Markdownに対応したタグのCSSを自分で設定できる」というところでした。
その他のだと「GitHub風」などの既存のCSSから選ぶよーというのが多い印象なのですが、Quiverの場合はまんまCSSが書けます。
試しに、Markdownで出てくる「見出し <h>」や「強調 <strong>」などをいじる前といじった後がこちら。
いじる前
いじった後
見た目に統一感がなかったり、見出しの目立ち具合がそれでいいのか？などは目を瞑っていただいたとしても、見栄えは結構違うのはわかるのではないでしょうか。
普段記述するのは「## 見出し２」のようなものなのに、描画されるときには縁取りとかされてるなんて！CSSで指定しているから当たり前なのだけど、エディタでそれが行われると、ちょっと新鮮。
ちなみにhoverも使えるので、画面上にマウス重ねることで動かしたり色変えたりすることも可能です。
Quiverのサイトではテーマは公開されてたりするものの、CSSは公開されてない模様。残念。
Themes · HappenApps/Quiver Wiki · GitHub
こういうMarkdown向けのCSSセットみたいなのが、じゃんじゃん公開されるといいなぁ。。。
ということで手始めに、いろいろなCSSデザインサイトを参考に作った自分のCSSを公開してみます。
参考にさせていただいたサイト：
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10 | NxWorld
[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ | コリス
Quiverの場合。Preferences → Stylesで、CSSを選んでペーストすることで適用できます。元に戻す場合は、同じ画面で「Reset」を押します。
PreviewとExported HTML、PDF and Printなどが別々に分かれてますのでご注意を。印刷してみたら素のCSSだったということが起こります。
/**
* Text Cell
*/.text-cell {
font-size: 14px;
}/**
* Code Cell
*/.code-cell {
font-size: 12px;
}/**
* Markdown Cell
*/.markdown-cell {
font-size: 14px;
}/**
* LaTeX Cell
*/.latex-cell {
font-size: 14px;
}h1 {
position: relative;
padding: 1em 0;
}
h1::before,
h1::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 6px;
box-sizing: border-box;
}
h1::before {
top: 0;
border-top: 2px solid #4682B4;
border-bottom: 1px solid #4682B4;
}
h1::after {
bottom: 0;
border-top: 1px solid #4682B4;
border-bottom: 2px solid #4682B4;
}h2 {
position: relative;
padding: .75em 1em .75em 1.5em;
border: 1px solid #4682B4;
}
h2::after {
position: absolute;
top: .5em;
left: .5em;
content: '';
width: 6px;
height: -webkit-calc(100% - 1em);
height: calc(100% - 1em);
background-color: #4682B4;
border-radius: 4px;
}h3 {
padding: .5em .75em;
background-color: #F0F8FF;
border-left: 6px solid #4682B4;
}h4 {
padding: .5em .75em;
background-color: #F0F8FF;
border-radius: 6px;
}h5 {
padding: .5em .75em;
border-bottom-style: dotted;
border-bottom-color: #4682B4;
border-bottom-width:thin;
}table thead th {
background: #4682B4;
font-weight: bold;
vertical-align: top;
color: #fff;
}hr {
background-color: #fff;
border-top: 1px dashed #4682B4;
}strong {
background: linear-gradient(transparent 60%, #4682B4 100%);
}ul>li{
padding:0px;
margin:0px;
}
ul>li{
list-style-type:none !important;
list-style-image:none !important;
margin: 5px 0px 5px 0px !important;
}
ul>li{
position:relative;
padding-left:20px;
}
ul>li:before{
content:'';
display:block;
position:absolute;
box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
top:3px;
left:2px;
height:0;
width:0;
border-top: 6px solid transparent;
border-right: 7px solid transparent;
border-bottom: 6px solid transparent;
border-left: 9px solid #4682B4;
}a {
position: relative;
color: #4682B4;
}a:before {
content: "→ ";
}ol {
counter-reset:li; /* Initiate a counter */
padding:0; /* Remove the default left padding */
list-style:none; /* Disable the normal item numbering */
}
ol li {
position:relative; /* Create a positioning context */
margin:0 0 8px 4em; /* Give each list item a left margin to make room for the numbers */
padding:2px 8px;}
ol li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top:-2px;
left:-2em;
width:2em;
padding:3px 0;
color:#fff;
background:#4682B4;
font-weight:bold;
text-align:center;
border-radius: 20px;
}img {
height: 50%;
width: 50%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}img:hover {
width: 100%;
height: 100%;
}
CSSに詳しくないため、おかしな記述があるかもですのでそこはご注意ください。
メモするのが楽しくなる、いろんなCSSがたくさん出てきますように！
クリップボードに入れたURLを元にMarkdown形式のリンク文字列を作りたい！
最近ようやく便利さに気がついたMarkdown（とLaTex）。それもこれもQuiverというアプリのおかげ。
Markdownのどこが便利に感じたのかは改めていつかひょっとすると語るとして、いろいろ使ってるとリンクをメモるのが結構面倒くさいなーと思いました。
というのも、Markdownとしての記述はこう。
[リンクテキスト](URL "タイトル")
これを自分でメモの時に作ろうと思ったら、こんなことに。
１：ブラウザのURLをコピーして貼り付け
２：そのページのタイトルっぽいところをコピーして貼り付け
３：その間にMarkdownのタグも書く
今時のチャットツール系だとURLを貼り付けると自動的にそのページの情報も表示してくれるので、それに慣れ親しんだ体には面倒くささが・・・。
ということで、URLをコピーするだけでそのページのタイトルを取ってきてMarkdown形式にしてくれるものを作ってみました。
やりたいこと
URLを選択して、右クリック的なもので処理を選択。
Markdown形式になったものが貼り付けられる。
やりかけたこと
いつもお世話になってるClipMenu。
ClipMenu.com: クリップボード管理ソフト - ClipMenu.com
これはJavaScriptで処理を実行させることができます。これを使ってMarkdownのいろいろなのをやっていたので、これでできると嬉しいなぁ・・。
しかし、JavaScriptから任意のサイトへアクセスすることができないので、断念。
実際にやったこと
URLを選択した状態でMacOSのコンテキストメニューの「サービス」から処理を呼び出し、クリップボードにMarkdown形式になった文字列を入れるようにしました。
手順
処理をPHPで書く
取得そのものは、こちらを参考にさせていただきました。
PHPのmb_convert_encodingを使って文字コードを検出する方法 |
そして、実際に書いたのはこんな感じ。
<?php
$to_encoding = 'UTF-8'; // 取得した文字は、最終的にUTF-8で扱う
$url = $argv[1]; // クリップボードの中身
$html = file_get_contents_curl($url); // 該当ページを取得
preg_match('/<title>(.+?)<\/title>/s',$html,$matches); // titleタグの間を取り出す
$title = trim($matches[1]); // 改行や空白に対応
$title = mb_convert_encoding($title, $to_encoding, check_charcode($title)); // 文字コードをUTF-8に変更
// http;が付いていないとリンクとして認識されないので、付与する
if(!preg_match('/^http.+/', $url, $maches)){
$url = 'http://'.$url;
}
echo '[' . $title . '](' . $url . ' "' . $title.'")'; // これをシェルスクリプトで受け取る
// 指定のURLからページ内容を取得
function file_get_contents_curl($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
$data = curl_exec($ch);
curl_close($ch);
return $data;
}
// 文字コードを判別
function check_charcode($str){
foreach(array('UTF-8','SJIS','EUC-JP','ASCII','JIS') as $charcode){
if(mb_convert_encoding($str, $charcode, $charcode) == $str){
return $charcode;
}
}return null;
}
シェルスクリプトから実行されることを想定して、引数を$arv[1]で取ってます。自分だけが使うので、それがURLかどうかのチェックはナシ！他にもいろいろナシ！
あとは、ページによって文字コードが異なったり、titleタグで囲まれた中身が改行されてたりするので、そういうのを入れてます。
さらに、ブラウザのURL欄から呼び出すと、引数に「http://」というのが省略されており、Markdownで書かれたページからリンクしようとすると開けないということが起こったので、そういうのがなければ追加するっていうのを挟みました。
これを、任意の場所に任意の名前で保存しておきます。このフルパスを次で使用します。
Automaotrでサービスにする
Automatorを開いて、サービスを選ぶ。
処理の流れとしては、クリップボードのURLをさっき作ったPHPに渡して処理してもらい、出来上がった文字列を再びクリップボードに返してもらうというものです。
なので、こういう感じに。
上から順に「クリップボードの内容を取得」「シェルスクリプトを実行」「クリップボードにコピー」です。
注意点は２つ目で、シェルスクリプトの実行の際、右肩にある「入力の引渡し方法」を「引数として」とすることです。
で、この中身は次のようにしました。
$1という変数に、クリップボードの中身が入ります。
これを任意の名前で保存すれば、めでたくサービスの中から処理を呼び出すことができました！
これまでClipMenuでいろいろやってきたので、可能ならこれにまとめたかったのですが、さすがに無理か。
期待のClipyもまだスクリプトに対応してないし・・・。
ショートカットでコンテクストメニュー的なやつを開いて、自分で登録したちょっとした好きな言語のスクリプトなどを実行できるのがあるといいのだけどなあ。。。
いずれはこんなノリでAI的な奴でごにょごにょしてみたい。
プログラム的にWordPressの「変更をプレビュー」の内容を取得したい！
WordPressの便利機能の１つである「プレビュー」。これがsingle-xxx.phpのようなテンプレートを使ってる時は何も考えずに使えるものの、データを引っ張ってきて別の箇所で使ってる場合はなかなか厄介。
ようやくそれっぽく使う方法がわかったっぽげなので、メモ。
動作が「保存」されたことがあるかどうかでちょっと異なるっぽいので、注意が必要です。
１：一度も保存されたことがない場合
新規作成で作った直後、保存する前にプレビューするぜ！というとき。今いじっている投稿のPIDが、そのまま使用できる。
なので、get_post()とかWP_Query()などを使ってPIDを指定することでそのまま取得できる。
２：保存されたことがある場合
下書き保存とか公開とかした後で、「ちょっと編集してプレビューしたい」というとき。この場合は、オートセーブされたデータを参照する必要がある。
wp_get_post_autosave()で編集中のPIDを指定すると、「変更をプレビュー」で表示すべき投稿の内容が取得できる。
とりあえずwp_get_post_autosave()を取ってみて、そこにIDがなければ元のPIDで取り直すってことをするのが良いのかな〜という感じでした。
カスタマイズをやりだすと、管理画面を使うくらいになってきちゃってどうしたものか・・・ということになるけど、ひとまず。
サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル
- 作者: 宮内隆行,西川伸一,岡本渉,三好隆之
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2014/07/22
- メディア: 大型本
- この商品を含むブログ (1件) を見る
Macで動画の縦横サイズを変更したい！
Macで動画の編集といえば、お手軽にできるのはiMovie。ドラッグドロップなどでトランジションなんかも入れることができます。
ところが、あまりに簡単にできすぎて、動画の書き出しに関して自由度が低いのが弱点。そもそもメニューが「共有」というラベルになってるくらい。あらかじめ小・中・大などでプリセットされた縦横サイズの動画に書き出すことしかできない・・・。
普段はこれで十分なのだけど、時々任意の縦横サイズに動画を変換したい時があリマす。いい方法がないかなーと検索すると、大抵広告系のサイトにつながってしまって、あーなんかもう・・・などと思ってしまうことがしばしば。
ということで、そうかこれか！という方法がわかったので備忘録。
使うのはHandBrake。
DVDとかをなんやかんやするツールの印象があるものの、実はこれで縦横サイズを変更して書き出すことができました。
該当の動画を読み込んだ後、「Picture Settings」を選択。
開いたウインドウにWidthとHeightの設定があるので、ここに値を指定します。
これを指定した後で、改めてメインのウインドウにある「Start」ボタンを押すと変換開始！ちなみにコーデックなどはメインウインドウ側にあるので、それらの設定は必要に応じて。
また困った時に検索しなくて済むようにメモしてみました。
ひさしぶりにJavaScriptを書くと忘れてることを、次に書くときのためにメモ
JavaScriptをよく使っていると「そんなん、当たり前やーん！」なことでも、たまにしか書かないために「え？あれ？？」ということがやたらとあります。僕は。
完全に個人的な「あるある」をまとめておけば、次にやるときに多少は時間短縮になるんじゃないかということでのメモ。
HTMLの中に書く時
<script>
</script>
の間に挟む。前はもうちょっと書かないといけなかった気がするけれど、今はこれで十分らしい。
文字列の連結方法
文字列は「＋」でつなぐとりあえず最初は「.」とか「&」で繋ごうとしちゃう。
if文の別条件
if ( ) else if ( );
elseifじゃなく、else if。離す。
配列の書き方
普通の配列は[ ]。連想配列は{ }を使う。つい( )で囲ってしまう。
変数の定義
var hoge;
複数なら
var hoge, hogege;
日付の「月」の取り出し
var dt = new Date();
とやっといて
var month = dt.getMonth()+1;
０から始まるので、７月のつもりが「６」って取れちゃう。しかもgetYearとかは普通で０から始まらない。絶対忘れる。
配列の要素をぐるぐる回す
forEachというのが使えるけど、forとかと違って配列に引っ付いたメソッド。そのため、ちょっと思ってたのと書き方が違う。
var hoge = [1,2,3,4,5];
とかあった時、
hoge.forEach(function(num){
console.log(num);
});
とかすると、配列の１つ１つの要素に触れる。
ハマりポイントはVue.jsのmethodsの中で自分のdataの値にアクセスしようとして
this.name
とかしようとした時、このforEachのループ中だとthisの内容がWindowとかになっちゃってて、これまた思ってるのと違うことになってる。
自分の変数を更新するために外のfunctionを使ったりしないとダメ？もっといい方法ない？？
また「ああ！もう！」ってなったら、追加していこうかなと。
Vue.jsを使ってみたい！
Vue.jsの2.0プレビュー版が出たという記事を読んで、今更ながらVue.jsを使ってみました。「どうもデータを表示したりするのが簡単らしい」程度の前知識でスタートです。
しかも2.0ではなく1.0で、あくまでも初心者の入門、基礎の基礎ということで。
準備
とりあえず使ってみたいので、CDNを使って読み込みます。HTMLファイルのheadあたりで、これを記述。
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.js'>
※この時の安定版の最新が1.0.21なのでこれにしてみました。
仕組み
Vueというのをnewして使います。この人の変数とHTML内の記述を紐付けておくと、変数に合わせて描画を更新する仕組みのようです。（ざっくり）
なので、このオブジェクトをnewして以降しか機能しないので、最初からこれで描画するぞ！という場合は
window.onload = function() {}
の中で作っておいたりしないと、あれ？？ってことになります。当たり前か。
やってみる
今回試してみようと思うのは、次のようなものです。
・ページ表示時点で、同じ変数の値を同一ページ内の複数の場所に表示する
・ボタンを押したら値が変わる
色々手抜きしたいので、HTMLファイルの中にscriptタグを書いて、そこで試してみることにしました。以降は<head></head>の間に書いた↓の中で書き進めて行くことにします。
<script>
// （１）
window.onload = function() {// （２）
}
// （３）
</script>
先に、表示する場所を記述しておきます。<body></body>の間に適当に。
基本は{{ 変数名 }}という書き方のようです。
<div id="demo">
<h1>{{ message }}</h1>
<p>{{ message }}</p>
<p>{{ num }}</p>
// （４）
</div>
// （５）
（４）と（５）には後でボタンをおきます。
単に描画するだけでおしまいなら変数に入れなくてもいいのだけど、色々値を書き換えることを考慮して、demoという名前の変数に入れてみます。とりあえずこんな感じ。
varを先に宣言してるのは、この後（３）で書こうとしてるfunctionからも見えるようにするためです。
// ここは（１）に
var demo;
--------
// ここは（２）に
demo = new Vue({
el: '#demo',
data: {
message: '最初のメッセージ',num: 3,
},methods:{
change: function(val){
this.num = this.num * val;
},
}
});
newするときに渡す配列の値で、色々定義できるということみたい。ここで僕がよくやらかすのが、間の「,」を忘れること。何でもかんでも「,」入れとこ。
el
値を変えたい場所を指定します。 divのidでdemoと言うのを指定したので#demoと書いてます。classなら.demoのように。ただし、classであっても複数の場所に指定していると最初に登場する領域しか対象にならないっぽげ。なので結局idの方が用途にあってそう。
data
変数。インスタンス変数ってやつか？
methods
メソッド。ここでは自分の変数（this.num）の値を引数をもとに書き換えてます。この中に書いてもいいし、ここから別のfunctionを呼び出してもOK。returnで値を返すこともできるので、普通に使える。
とりあえずこのままこのファイルをブラウザで開くと、{{ message }} と{{ num }}の場所に値が表示されてるかと思います。何箇所書いてもOK！便利！注意すべきは、elで指定しているidあるいはclassの下に書かれている必要があるということです。
（２）のwindow.onload = function() {}の中に書いてるので、読み込んだら即生成されてるために、表示することができてます。
さて、ここまでなら別にVue.jsじゃなくてもいいやんってことで、値を変えて表示も変わるというのを試します。
まずは、インスタンスのメソッドを使って値を書き換えてみます。
ここで一つ、ボタンにイベントを仕掛ける方法。ボタンから直接そのインスタンスのメソッドを叩くには、さっきの「el」の下に入れておかないとダメ。
ということで、（４）に次のように書きました。
<input type="button" v-on:click="change(3)" value="numを変える" />
v-on:clickというので、クリックイベントを引っ付けてます。属性を書き換えるときは「v-なんちゃら」というのが使えるようです。ある値の時だけ表示するとかもできるみたい。ここでは引数「３」を一緒に渡してます。
methodsの下で書いてるchangeというメソッドの中で変数numを更新しているので、ボタンを押すたびに{{ num }}と書いた箇所の値が更新されていきます。
メソッド使って値を書き換えるのも面倒くさいなーって思ったら、直接変数を更新することもできるようです。（他から弄れるべきかどうかは考えるとして、ひとまず）
次はその方法。（５）に次のようなボタンを設置します。
<input type="button" value="messageを変える" onClick="changeMessage('別のメッセージ');"/>
onClickで指定したfunctionを（３）の場所に次のように書いてみました。
function changeMessage(val){
demo.message = val;
}
ここでdemoというふうにいきなり使えてるのは、（１）でvar demo;のように宣言してるためです。そして変数messageに＝で代入することでも、値を更新できます。ここでも変数を更新することで、すべての表示箇所の値が書き換わります。
他にもループが作れる「v-for」とか、条件によって表示/非表示を変えらる「v-show」などがあって、ちょっと何かやるには便利そうっす！
アニメーションでグリグリ動かすとかっていうのではなく、データを動的に表示しまくったりするときには楽そうかなーと思いました。
MacでOctaveを使いたい！
機械学習と言うのをかじってみたくて調べてたら、「Octave」っていうMATLABみたいなGNUなものがあるらしいことを知りました。
これを使えば僕も今日から機械学習！（甘い＆誤解）
と言うことで早速入れてみました。
苦難でした。
訳も分からず試したため僕自身は前後してしまった作業が一部ありますが、どうもこういう順番でやればよかったっぽい と言う清書で。
■環境
■手順
１）Homebrewを入れる
詳しくはこちらで。
僕のはまりポイントとしては、以前入れていたHomebrewをアップデートしようとしたら「パーミッション ガー」と言われてしまいました。そのためこういうのを実行。
sudo chown $(whoami):admin /usr/local && sudo chown -R $(whoami):admin /usr/local
２）AquaTermを入れる
これはdmgで配布されてるので、それを。
https://sourceforge.net/projects/aquaterm/files/latest/download
３）octaveなど色々入れる
ここからはこのページを参照。ここに書かれてる通りに実行した。
https://kiskeyix.org/articles/605
４）環境変数を設定
このままでもとりあえず動くのだけど、グラフを描画するたびに
warning: could not match any font: *-normal-normal-10
warning: ft_render: unable to load appropriate font
と言うアラートが出る。ここによると、どうもパスが通ってないらしいとのこと。
なので、.bash_profileに以下の内容を設定してみる。
これでアラートが消えた。
よくやらかしてしまうのが、これを書き換えただけでは設定が反映されないので、
source .bash_profile
をやるってことか。
５）fig2devを入れる
画像にして保存しようとすると次のようなアラートが出た。
warning: print.m: fig2dev binary is not available.
Some output formats are not available.
warning: called from
__print_parse_opts__ at line 385 column 9
print at line 288 column 8
そのため、こちらを参考にhpmebrewでfig2devを入れる。
が、僕の環境では「brew install transfig」を実行した時に
Error: No available formula with the name "imake" (dependency of mistydemeo/xfig/transfig)
と言うのが出た。アラートの最後を見ると
と書かれていたので、これを実行。その後「brew install transfig」として、無事にインストールできて、アラートも消えた。
と言うことで、これでバシバシ機械学習るぞー！
注意
ただし・・・
この環境でprintなんちゃらとやってグラフの画像を保存しようとすると、グラフ部分が真っ黒になってしまった。どうやら利用しているgnuplotというのの5だと発生してしまうらしい。4.6.6を入れろと。。
人工知能は人間を超えるか ディープラーニングの先にあるもの (角川EPUB選書)
- 作者: 松尾豊
- 出版社/メーカー: KADOKAWA/中経出版
- 発売日: 2015/03/11
- メディア: 単行本
- この商品を含むブログ (10件) を見る
