2015-04-28

CSSで蛍光マーカー風な強調表示をする

f:id:mu2in:20150428221208p:plain

この記事は以下の続編です。 <a href="http://mu2in.hatenablog.com/entry/2015/04/27/235645">はてなブログの強調表示を蛍光ペン風にマーキングする - むじん島</a>mu2in.hatenablog.com

前回はCSS3のlinear-gradient()を使って蛍光ペン風の表現をしました。
今回は背景にBase64透過画像を使って、同じように再現できたのでご紹介します。

<style type="text/css">
/* 強調表示を蛍光ペン風に(画像版) */
article strong{
    margin:0 0.1em;
    padding:0.1em 0.2em;
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAJCAYAAADzRkbkAAAAEElEQVQIW2P8/TvkDCORBAB3fRvQcHDghQAAAABJRU5ErkJggg==);
    background-position:center bottom;
    background-repeat:repeat-x;
}
</style>

linear-gradient()版とBase64画像版の結果を比較する

⇒

CSS3のlinear-gradient()を非対応ブラウザでみると左のように表示されていました*1が、今回の画像対応により、右のように蛍光マーカー風に表示されるようになりました。

画像を読み込むため表示が遅くなりますが、対応ブラウザが増えるのは良いですね。

おまけ：透過画像を作る

マーカー用の画像を作るのが面倒だったので、canvas要素+JavaScriptで黄色の透過画像を作ってみました。
違う色の透過画像を用意したいときに使ってみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
    //canvasを生成
    var canvas = document.createElement("canvas");
    canvas.width = 1;
    canvas.height = 9;
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgba(252, 252, 84, 0.8)";
    ctx.fillRect(0, 0, 1, 9);

    //base64に変換
    var base64Canvas = canvas.toDataURL('image/png');

    //canvasダウンロード用にaタグで囲む
    var a = document.createElement('a');
    a.setAttribute('style','text-decoration:none;color:#222222;');
    a.href = base64Canvas;
    a.download = "highlighter.png";

    //strongタグの背景に指定
    var strong = document.createElement('strong');
    strong.textContent = base64Canvas;
    strong.setAttribute('style','font-size:16px;font-weight:bold;margin:0 .2em;padding:0.1em 0.2em;background-image:'+'url('+base64Canvas+');background-position:center bottom;background-repeat:repeat-x;');
    a.appendChild(strong);
    document.body.appendChild(a);
};
</script>
</head>
<body></body>
</html>

*1:古いAndroidではベンダープレフィックスで対応可能です

2015-04-27

はてなブログの強調表示を蛍光ペン風にマーキングする

f:id:mu2in:20150427230444j:plain

最近よく見かける蛍光マーカー風の強調表示
CSS3のlinear-gradient()でいい感じに再現してみました。

<style type="text/css">
/* 強調表示を蛍光ペン風に */
article strong{
    margin:0 0.1em;
    padding:0.1em 0.2em;
    background:#fcfc60 !important;
    background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) !important;
}
/* bタグは太字 */
article b{
    font-weight:bold !important;
}
</style>

太字のみの「bタグ」と下線マーカーの「strongタグ」で使い分けできるようにしました。

はてなブログでの設定方法

「ダッシュボード」→「設定」→「headに要素を追加」のテキストボックスに上記のstyleタグを全て貼り付けます。 f:id:mu2in:20150429001307p:plain
テーマのカスタマイズに「デザインCSS」の欄がありますが、こちらではスマホ用テーマに反映されませんのでご注意ください。

結果を表示

CSS3のlinear-gradient()に対応しているブラウザでは左のように表示され、
非対応では右のように文字の背景色として表示されます*1。

次回へ続きます！ <a href="http://mu2in.hatenablog.com/entry/2015/04/28/234841">CSSで蛍光マーカー風な強調表示をする - むじん島</a>mu2in.hatenablog.com

*1:古いAndroidではベンダープレフィックスで対応可能です

2015-04-26

iDisplayでAndroid端末をサブディスプレイ化してみた

f:id:mu2in:20150427004757j:plain
「iDisplay」とはAndroid/iOS端末をサブディスプレイ化できるアプリです。
今回は一般的に紹介されているWi-Fi接続ではなく、USB接続で画面共有ができると聞き試してみました。

結論を言うと、USB接続ではリフレッシュレートが低く、あまり実用性を感じませんでした。

以下、やってみたメモです。

環境

Windows8.1 64bitのPC
Galaxy Nexus(Android4.2)
Nexus 7 2012(Android5.1)

導入手順

Windows側の準備

まずは以下からインストーラをダウンロードして実行します。

<a href="http://getidisplay.com/jp/">iDisplay: Turn your iPhone, iPad or Android into external monitor for your Mac or Windows PC</a>getidisplay.com

言語設定は日本語がないため、Englishを選択します。

Nextを押します。

規約に同意できれば、Nextへ

インストール先は32bit版のようです。

スタートアップに起動させたくない場合はチェックを外しましょう。

内容を確認してインストールします。

これでインストール完了です。

Android側の準備

以下のURLからiDisplayを購入してインストールします。

iDisplay - Google Play の Android アプリ

USB接続を使うには「USBデバッグ」をONにする必要があります。

これで準備完了です。ADTの準備はいりませんでした。

サブディスプレイ化する

まず、Windows版を起動した状態で、Android側のiDisplayを起動します。

USBデバッグを許可します。

Windows側で認識されるので、許可します。

画面が少し暗転して、Android側にWindowsのサブディスプレイが表示されます。

試してみて

私が用意した環境ではUSB接続でのリフレッシュレートが低く、あまり実用性に耐えるものではありませんでした。
静止画や音楽再生アプリなどを置く分には問題ないと思います。

2015-04-25

GWに技術書を読もう

f:id:mu2in:20150425235305j:plain
ゴールデンウィークの長期休暇が近づいてきました。
せっかくの長期休暇、何をしようか考えているエンジニアの方、
いつもより余裕ができると思うので、空き時間にでも技術書を読んでスキルアップをはかってみるのはいかがでしょうか。
そこで、GWに読む本について使える情報を集めてみました。

KindleのGWセール

<a href="http://hassyx.hatenablog.com/entry/2015/04/24/224023">【Kindleセール】年に一度のGW60%OFF、セール対象の全技術書まとめ - 電子書籍の更地</a>hassyx.hatenablog.com
今年もKindleのGWセールが始まったようです。
様々な書籍が対象になっていますが、上記の記事に技術書がまとめて紹介されているので、気になる本があれば、購入して読みましょう。

O'reillyの半額クーポン

<a href="http://mu2in.hatenablog.com/entry/2015/04/24/235836">オライリーの電子書籍が半額 - むじん島</a>mu2in.hatenablog.com
O'Reilly主催の「FluentConf 2015」で、半額クーポンが配られたみたいです。
オライリー・ジャパンではなく、本家O'Reillyなので洋書しかありませんが、
年内まで使えるとのことなので英語に自信がある方はこの期にいかがでしょうか。

その他、「GW学習」に使える技術書が以下の2サイトで紹介されています。
私もGW用の本選びの参考にさせていただきました。 <a href="http://paiza.hatenablog.com/entry/2015/04/23/4%E6%9C%88%E5%85%A5%E7%A4%BE%E3%81%AE%E6%96%B0%E4%BA%BAIT%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%8CGW%E3%81%AB%E8%AA%AD%E3%82%93%E3%81%A9%E3%81%8F%E3%81%A8%E3%82%88%E3%81%95%E3%81%92%E3%81%AA">4月入社の新人ITエンジニアがGWに読んどくとよさげな良書11選 - paiza開発日誌</a>paiza.hatenablog.com

<a href="http://www.kinleit.link/it/post-1434">プログラマーが速攻スキルアップするおすすめ技術書22選</a>www.kinleit.link

2015-04-24

オライリーの電子書籍が半額

O'Reillyの電子書籍に以下のクーポンを使うと半額になるそうです。

ツィートしていいと言われたのでつぶやくよ。この50%オフのディスカウントコード、年内使えるって。今年はずっと半額。 #FluentConf pic.twitter.com/HGSdL6qskR
— バスケ (@basuke) April 22, 2015

どうやら、O'Reilly主催のフロントエンド・エンジニア向けのカンファレンス
「FluentConf 2015」で、ディスカウントコードが配られた模様です。
オライリー・ジャパンではなく、本家O'Reillyなので洋書しかありませんが、
年内まで使えるとのことなので英語に自信がある方はこの期にいかがでしょうか。shop.oreilly.com

2015-04-23

ほどよい質感で商用利用も可能なテクスチャ配布サイト「Subtle Patterns」

f:id:mu2in:20150423235202p:plain
Webサイトやスライドの制作で「背景にちょっぴりアクセントを加えたい」
「シンプルだけど少し上品な質感がほしい」と感じたことはありませんか。
そういう時には「Subtle Patterns」のテクスチャがオススメです。

<a href="http://subtlepatterns.com/">Subtle Patterns</a>subtlepatterns.com

現在「Subtle Patterns」では、400種類もの無料テクスチャがダウンロード可能です。
1クリックでサイトの背景にプレビューされるので色々試してみると良いでしょう。
継ぎ目のない落ち着いたパターンが多く、どんな背景にもピッタリだと思います。

ライセンスはフッター部に記述されているように「CC BY-SA 3.0」で、
商用利用は可能ですが、使用にはクレジット表記が必要になります。

How do I credit you on my site?
You can credit using a comment in your HTML or CSS code.

Example for CSS:
/* Background pattern from subtlepatterns.com */

via: About - Subtle Patterns | Free textures for your next web project.

FAQを見るとおり、個人サイトへの利用はcssにコメントアウトで記述するだけで良いようです。

フラットな背景にノイズのようなテクスチャを加えるだけでも、コンテンツの印象はがらりと変わります。Webサイトだけでなく、発表スライドなどの背景に加えてみるのもオススメです。

CCライセンスについて、詳しくは以下をご参照ください。