プログラミング

Octopress小ネタ

mmmuser

こんにちは、前田です。
2015年がスタートしました。
私的年初スタートあるあるですが、まだ2014年と間違えたり、あれ?平成25年だっけ?今年は2017年?とか平成と西暦がごっちゃになったりします。
皆様はどうでしょうか?

今年は昨年同様、Ruby on Railsを磨いていきたいと思います。
また、今年はインフラ系も頑張りたいと思っております。
AWSやネットワークなどのインフラ系の勉強、また、Chefを使った環境構築、Capistranoによる自動デプロイまでトータルにこなせるようになりたいと思います。
フロントサイドも興味はあるのですが、弊社で主に使用しているフロントサイドのフレームワークAngularJSはちょっと敷居が高そうなので、少し怯んでおります。
gulpGruntJadeをちょこちょこ出来るようになるぐらいにはなりたいと思います。


さて、表題についてですが、弊社では現在ブログをOctopressで管理しています。

Octopressを使ってみて、自分なりの設定・書き方などの小ネタが少し貯まったので書きたいと思います。

httpリンクを別タブで開く

$(document).ready( function () {
  $("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
})
<script src="{{ root_url }}/javascripts/custom.js" type="text/javascript"></script>

ソースでは通常どおりのhttpリンク書くだけで、自動的にtarget="_blank"属性が付加されます。

[ヤフー](http://www.yahoo.co.jp/)

結果

ヤフー

リンクは纏めて書く

上記のように、毎回リンクを書くのではなく、下部に纏めて書いたほうがすっきりして、また使い回しもしやすくなります。

[ヤフー][yahoo]
[グーグル][google]
[yahoo][yahoo]

[yahoo]: http://www.yahoo.co.jp/
[google]: https://www.google.co.jp

結果

ヤフー
グーグル
yahoo

画像リンクとURLリンクのネストも出来ます。

[![つるっと君][turu]][link]


[turu]: /images/t_kun.png =200x
[link]: https://store.line.me/stickershop/product/1001776/

結果

[![つるっと君][turu]][link]

Chromeのデベロッパーツールでスマホなどマルチデバイスで確認する

これは特にOctopressに限ったことではないですが、Chromeのデベロッパーツールが便利過ぎるな、と最近関心しました。
今まではmacのiPhoneシュミレータでスマホ画面を確認していましたが、Chromeのデベロッパーツールで色々な機種で確認出来るということを最近知りました。
※バージョン 40.0.2214.91 (64-bit)

メニューバー ▶ 表示 ▶ 開発/管理 ▶ デベロッパーツール を開き、下記の箇所をクリックします。

![tool][tool]

そうするとこんな画面になり、comand + R で画面リロードで、指定したデバイスとユーザーエージェントで表示されます。

![view][view]

iPhoneだけじゃなく、Androidも確認できるし、素晴らしいですね!


今年も昨年から引き続き忙しい1年となりそうです。
振り返って悔いの残らない良い1年になるよう頑張ります!!

[turu]: /images/octopress/t_kun.png =200x
[link]: https://store.line.me/stickershop/product/1001776/
[tool]: /images/octopress/tool.png
[view]: /images/octopress/tool_view.png

AUTHOR
デロイト トーマツ ウェブサービス株式会社(DWS)
デロイト トーマツ ウェブサービス株式会社(DWS)
デロイト トーマツ ウェブサービス株式会社はアマゾン ウェブ サービス(AWS)に 専門性や実績を認定された公式パートナーです。
記事URLをコピーしました