サイトデザインの変更、jQueryでアコーディオン

カテゴリー:  Tech  タグ:  web/tech

以前からこのサイト1では、”@Style Bootstrap Theme for Movable Type“というテーマを使用させていただいていました。Bootstrapをベースにしておりレスポンシブなサイトを簡単に実現できます。これに、少しだけ変更を加えていました。

だんだん変更が億劫になり、同じ作者さんのアットスタイルから有料ですが「Movable Type 6 ブログテーマ(テンプレート) Bootstrap 301 スマートフォン・タブレット端末対応」を購入しました。シンプルで気に入っています。時間も節約できました。

が、デザインが良くなると、ビローンと下に伸びてしまう「月別アーカイブ」が気になり始めました。

節約できた時間で対応してみました(節約になっていないという気もするが)。サイドの月別アーカイブのところをみていただくとわかりますが、年ごとに折りたたんで表示して場所を取らないようにしました。jQueryを使って俗に言うアコーディオン型のメニューにしています。

詳細は続きを。

まず、HTMLヘッダーでjQueryを読み込みます。今回は、1.11.3を使っています。

そして月別アーカイブのウェジットを変更します。デフォルトでは単純なリストになっているので、定義リストに変更します。そして、スタイルをつけるためのクラスをつけておきます。

<mt:IfArchiveTypeEnabled archive_type=\"Monthly\">
<mt:ArchiveList archive_type=\"Monthly\">
<mt:ArchiveListHeader>
<ul class=\"nav nav-list\">
<li class=\"nav-header\"><i class=\"fa fa-folder-open\"></i>&nbsp;Archives</li>
</ul>
<dl class=\"acArchiveList\">
<mt:SetVar name=\"year\" value=\"9999\" />
<mt:SetVar name=\"first\" value=\"y\" />
</mt:ArchiveListHeader>
<mt:ArchiveDate format=\"%Y年\" setvar=\"current_year\" />
<mt:If name=\"current_year\" ne=\"$year\">
  <mt:If name=\"first\" eq=\"y\">
     <mt:SetVar name=\"first\" value=\"n\" />
  <mt:Else>
  </ul></dd>
  </mt:If>
  <dt class=\"toggle\">&nbsp;<mt:GetVar name=\"current_year\" /></dt>
  <mt:getVar name=\"current_year\" setvar=\"year\" />
  <dd><ul>
 </mt:If>
<li><a href=\"<$mt:ArchiveLink$>\"><$mt:ArchiveDate format=\"%m月\"$> [<$mt:ArchiveCount$>]</a></li>
<mt:ArchiveListFooter>
  </ul></dd>
</dl>
</mt:ArchiveListFooter>
</mt:ArchiveList>
</mt:IfArchiveTypeEnabled>
<hr>

そして、スタイルシートは以下のようにしています。

.acArchiveList {
  padding-left:15px;
}
.acArchiveList .toggle {
    padding-left: 15px;
    display:block;
    cursor: pointer;
    -webkit-transition: .2s ease-in-out;
}
.acArchiveList .toggle:before {
      font-family:FontAwesome;
      content:"\f114";
}
.acArchiveList .open:before {
      font-family:FontAwesome;
      content:"\f115";
}
.acArchiveList dd {
    padding-left:  45px;
    display:none;
}

最後に、JavaScriptです。

  $(function(){
        $(".acArchiveList .toggle").on("click", function() {
            $(this).next().slideToggle("200");
            $(this).toggleClass("open");
        });
    });

見やすくするよう分けて掲載しましたが、実際には「月別アーカイブ」のウェジットの中に何もかもブチ込んでいます。


  1. この時はMovable Typeで運営していました。 

チタニウムの万年筆 Namisu

カテゴリー:  Gadget  タグ:  pen stationary

先週 Kickstater でポチってた Namisuの万年筆が届きました。

コンセプトは書くことにのみフォーカスして余計な機能は省いてシンプルに必要な機能だけに突き詰めたペンを創るというものでした。Namisuのサイトを見てみてください。フォルムもシンプルで美しいですね。

さらに、わたしが選んだのはボディがチタン製で、さらにニブまでチタン製というものです。インクは普通のカートリッジが使えますが、わたしはコンバーターも注文しました。

本体はチタン製のためかずっしりと重みを感じます。真ん中のちょうど指がかかる部分には溝があり、持った時ちょうど指がかかるように計算されているようです。本体は本当にシンプルでその他の装飾は全くなく、メーカー名さえ入っていません。

この less is more ってコンセプトに惹かれたのですが、これは同時に問題でもありました。

まず、キャップがネジ式なのですが、うっかり軸の後ろ側を持っているとキャップでなく本体が軸が外れてしまうことがあります。字を書く時も外すのに時間がかかります。普通のキャップの方が良かった。

また、キャップを外した後よく軸の後ろに挿しますが、この万年筆はそういうことは考えていないようでハマりません。よって、無くさないように机の上に置いておく必要があります。落としてしまうと、転がっていきます。

そして、たとえキャップが軸のお尻にハマったとしても、突起が全くないためすぐに転がってしまいます。これはちょっと神経を使いそうです。

ネガティブな部分を並べてみましたが、とにかくラミーのブルーを入れてみました。

おお! 書いてみて驚きました。書き味はさすがにペン先を調整してもらってる愛ペン アガサ・クリスティの滑らかさには遠く及びませんが、インクの流量が多く非常に滑らかです。なおかつ、ちょっとした力加減で線に良い感じで強弱をつけることができます。非常に描きやすいです。

本体に重みも、字を書く時少し軸の後ろ側を持つようにして重みで紙に接するようにすると疲れにくく楽に字が書けるようになります。万年筆を使う時は自然にそうなるんですが、普通の万年筆だとそれほど重みがないので紙への圧を意識する必要があるように思います。

海外の万年筆は重みをペン軸後ろ側に持ってきて(キャップで)振り回すように書くスタイルが多いのですが、これはしっかり重みで字が書ける日本語にあってそうな気がします。

インク漏れもないようなのでしばらく仕事で使ってみます。

Github Atomリリース

カテゴリー:  Tech  タグ:  atom editor

一昨年くらいに触った時には、まだちょっと安定してない感じで動作もテキスト量が多くなってくると遅い印象がありました。

久しぶりに起動するとなんだか動作がサクサクです。「遅いから使いもんにならん」と見捨てたのにもう一度再評価しなければ。

プラグインもたくさん開発されていて、便利そうです。Linterの類も豊富で多くの言語に対応しています。また、HTMLやMarkdownへの対応も充実しています。

ただ、デフォルトのキーバインドが Emacs Likeってところが躊躇する一因ですね。

いや、Emacsが悪いといっているんでなく、結局エディタって慣れたキーバインドがなんぼです。PC変えても、いつもの操作が通用するって大事なんです。なんとかもどきのエディタでは微妙に動作が異なるケースが絶対あって、そういうの編集してるときすごいきになるんです。

そうすると、新しいエディタの機能が素晴らしいから乗り換えるより、歴史があってある程度キーバインドが定まっているEmacsとかVimでないとキーを覚える投資にの方がリーズナブルという気がします。

しばし、Atomを使うか悩みながら試用です。

え? Swift 2.0ってTry / Catchが導入されてたん?

カテゴリー:  Tech  タグ:  software

最近忙しすぎて、すっかりWWDCでの発表の詳細を追っていませんでした。 やっと時間ができて、Swift 2.0の The Swift Programming Language を見てみました。

「え?!」と思ったのは Error Handlingです。

do {
    try エラーが起こり得る処理
    次の処理
} catch pattern {
   エラーが起こった時の処理
}

そう、Try/Catch を導入してしまったんです。 Javaでの教訓を持ってOptional型を導入したのに、何故!?

確かにOptional型ではエラーの情報を保持できないと欠点はありました。が、例外処理がうまくいかないことは多くの言語でも言われていることです。例外クラスではなくEnum型がThrowされるということでまだマシですが……

退行です。

iPhone 6 plus用ケース

カテゴリー:  Gadget  タグ:  gadget iphone

さて、iPhone 6 plusですが、移動中はカバンに入れておくことになりそうですが、やっぱり裸で放り込んおくのはさすがに不安です。

今まで薄手のジャケットを使用することが多かったのですが、「カバンに入れておくんだから、多少取り出しに手間がかかってもしっかりしていた方がよいな」と思い、国立商店の「職人が作るオイルドレザースリーブ for iPhone 6 Plus用(5.5インチ))」にしました。

少し小さめですので本体を中に入れて馴染ませるとよい感じで緩みつつタイトな使用感です。

ポイントの赤いバンドはカバーに巻いて使えます。わたしはDr.Beatsのイヤフォンを巻きつけてやろうかと思っています。

皮や縫製は大変しっかりしているので、使っているうちに風合いも出てきそうです。

Yosemiteにtmuxを

カテゴリー:  Tech  タグ:  software

App.Netのコマンドラインクライアント Ayadnをtmuxで使うと便利そうだと、tmuxの導入ではまりました。

以下のようなエラーが出ていまします。

dyld: Library not loaded: /usr/local/lib/libevent-2.0.5.dylib
  Referenced from: /usr/local/bin/tmux
  Reason: image not found
Trace/BPT trap: 5

どうもlibeventが絡んでるようなので、

$ brew uninstall tmux
$ brew uninstall libevent
$ brew install libevent
$ brew install tux

これでもlibeventがうまくリンクできておらず、

$ sudo chown -R $USER $(brew --prefix)
$ brew link libevent
$ brew install tux

これでやっと成功。

シェルを多重化して画面分割で表示し、TimelineとGlobal、自分のポスト用の枠を表示しているといい感じです。

何故 iPhone 6 plusを買ったか

カテゴリー:  Gadget  タグ:  gadget iphone mobile

今更ですが、iPhone 6 plusを購入しました。

本当はソフトバンクからMVNOに移行してiPhone 5Sをしばらく使おうと思ったのですが、

SIMロックフリーの処理がなかなか完了せず、わたし更新月の6月中にめどが立たない。 MNPを申し込んだ際、機種購入のポイント追加を提案されて価格面でのメリットが逆転した というのが理由です。

特に追加ポイントは、現在ソフトバンク自体が下取りプログラムで16,000ポイントを追加するプログラムをやっており、解約保留で提案されたポイントと合わせると50,000円弱の値引きになります。さらに月々割が効きますから、実質的には端末代は限りなくゼロに近くなります。

こうなるといくらMVNOの月々の料金が安くてもなかなかJustifyしません。

以下は、2年を目処に料金の積み上げの比較です。どちらもこの2年で一度は買い換えることを想定しています。

本当は今年の新機種を待とうかと思いましたが、ポイントの使用期限が決まっているので今回機種変も合わせてソフトバンクに残存です。

しかし、plus デカい。

居酒屋グイン亭

カテゴリー:  Dining  タグ:  books foods and drink

仕事で神田に行ったのですが、雨宿りをしようとカフェを探しているところで偶然見つけた居酒屋グイン亭。

「なんじゃ!? こりゃ」と早速入ってみました。 中を覗くと、やはりグイン・サーガの本のディスプレイがあります。そして壁一面にグイン・サーガの歴代の表紙が貼られています。

テンションを上げながら席に着くと、スタッフの女性が来て「どちらからですか? Webか何かで知ったのですか?」と質問されました。いやいや、偶然です。

パンケーキセットを注文すると、クイズがあるのでやるかと聞かれました。当然やります。20問ほどありかなりマニアックです。前半は楽勝でしたが、後半はちょっと悩みます。

クイズをやっていると、パンケーキが来ました。単行本に入っていたグインのシルエットがココアパウダーで再現されています。

途中でトイレに行ったのですが、同じビル内ですがお店の外です。スタッフ専用って感じのドアを開けてトイレに行こうとしたら、ちょっとした打ち合わせスペースで採用面接っぽいことが行われています。疑問に思いながら、トイレから戻ってくる時にあたりを見回すと、そこはあの早川書房でした。そう、早川書房の一角が居酒屋になっているのです。

聞くと、普段は「カフェ クリスティ」という店名で、7月まで限定で「居酒屋グイン」となっているそうです。夜は居酒屋になってグインに出てくる料理を再現しているそうです。

しまった、あの「カラム水」もメニューになっていたらしい。オリーおばさんの肉まんじゅうやノスフェラス丼など食べてみたいではないですか。

さて、清算の時にクイズの答え合わせをしてもらったら、70点でした。

今更「2014年版間違いだらけのクルマ選び」

カテゴリー:  Entertainment  タグ:  books car

「2014年版間違いだらけのクルマ選び」を買いました。 間違いだろうって? 

ええ! 間違いましたとも! Kindle本が50%なんとかバックキャンペーン対象になっていたので、「徳大寺さん最後の版だし」とか思って買いましたよ。よく考えりゃ 2014年版ってことは執筆は2013年だから、まだピンピンなさってたころですね。

まぁ、いいです。

かなり東京モーターショーの内容や車の展望についてページを割いています。多分徳大寺さんだけでなく、島下氏も書かれているからでしょうが、冗長な割に内容がなくつまらないものに感じます。徳大寺さんはいいんです、あの調子で見切り程度の文書量で意見を言えば皆読むんです。同じことを島下氏がやって読むと思うのは甘い。

書評を見ると、島下氏の車の評価がメーカーにおもねっているという批判がされていました。確かに幾つかの車については評価が徳大寺さんと割れて、いずれも島下氏の評価は曖昧に無難な評価をしているように見えます。

ただ、よく読むとかなり突っ込んだ苦言も呈しているのですよ。だから、ネットの批評はちょっと彼にはかわいそうだと思うのです。わたしは彼の批評を評価しないのは、徳大寺さんの描きそうなことを連ねて時に刺激的なことを書いているだけで、やっぱり一本筋が通ったものを感じないことです。

いろんなプレッシャーがあると思うので影響を受けるなという方が無理だと思うのですが、元祖がいる中で共著って形で世に出すんですから、もう少し骨のあるところを期待します。

はぁ、しかし、一昨年の本でした。

千葉ダム巡り

カテゴリー:  Trivialities  タグ:  photo roadside station travel

思い立って、千葉のダムを巡ってきました。

なぜ突然思い立ったかというと、世の中には「ダムカード」なるものがあるそうなということを知ったためです。

国土交通省と独立行政法人水資源機構の管理するダムでは、ダムのことをより知っていただこうと、平成19年より「ダムカード」を作成し、ダムを訪問した方に配布しています。

国土交通省:「ダムカード」について

千葉では、矢那川ダム、高滝ダム、亀山ダム、片倉ダムの4つのダムがこのダムカードを配布しています。そうと知ったからに早く集めねばと、早速行ってきました。

さて4つのダムは全部回ったのですが、矢那川ダムは入手できませんでした。 ダム現地でなく木更津市役所で配布しているためです。そりゃないぜ!!!

また、片倉ダムのカードも注意です。亀山ダムの事務所で配布していました。

ちなみに、ダムマニアというかダムのファンの方って多いんですね。 平日なので(ダムカードの配布は平日のみ)誰もいないだろうと思っていたら、結構ダム記念館とか人も入っていて、何人かは同じようにダムを巡っているらしく何度か顔を合わせることになりました。

いや、ダムの構造の話とかされても全然わかりませんが、子どもの頃わたしも親父が暇になると車でダムに連れて行かれて、ダムを眺めたり近くの湧き水でサワガニをとったりして遊んだので「ダムで遊ぶ」気持ちはよくわかります。

まずは矢那川ダムです。

矢那川ダム(やながわ) 千葉県木更津市大字矢那字向田高にあります。1989年から着手され1998年に完成したダムで、かずさアカデミアパーク事業開発に伴う雨水流出増加の対策を兼ねた治水ダムです。

ダムの下流が土盛りされて広大な公園になっていて、芝生が植えられ桜の木も多く整備されています。鎌足桜という地域に古くからある品種が植えられていました。

かずさアカデミアパークと言えばバイオテクノリジーの研究拠点としてバブルの頃に整備が始まったものですが、案の定赤字を垂れ流して千葉県の重荷になっていますね。このダムもその負債の一つなんでしょうか。

次に高滝ダムです。

高滝ダム(たかたき) こちらのダムの周りは結構開けていて、ダム記念館もありますし水生植物園や水上テラスもあります。近隣にもちょっと車を走らせればお店も多く気軽に行きやすいと思います。

記念館でランチをいただきましたが、もち豚丼はなかなか甘みが効いていておいしかったです。

そして、亀山ダム。

亀山ダム(かめやま) 公園や遊歩道がたくさんあり、貸しボートもたくさん営業していました。ブラックバスやブルーギル、ナマズ、ワカサギなどが釣りるそうで、休日には賑わっているそうです。

近隣には温泉もたくさん出るようで、ホテルなども多くちょっとした観光地です。

最後に、片倉ダム。

片倉ダム(かたくら)

亀山ダムの上流で4Kmほどしか離れていませんが、こちらのほうがちょっと静かな感じです。割と新しめのダムで、佇まいは一番好きかな。

近くには公園や散策路も整備されています。また、近隣に道の駅「ふれあいパ-ク・きみつ」、片倉ダム記念館などがあるので立ち寄りやすいと思います。


関連リンク