ラベル ソースコード の投稿を表示しています。 すべての投稿を表示
ラベル ソースコード の投稿を表示しています。 すべての投稿を表示
2013/03/31

画像の重ね方メイキング ~ HTML5validなOGPとかTwitterCardsとかjQueryUIとかTwitterBootstrapとかgoogle-code-prettifyとか

HTML/CSS/JavaScriptを駆使した画像の重ね方 | DevAchieveで制作した
サンプルページ「Way to cover an image with another image」で
色々普段使わないものを使ったので忘れないようにメモしておく。

HTML5validなOGP設定

後述の Twitter Cards が HTML5invalid だよーというのを聞いて
バリデーションにかけてみたら見事にエラーが出てきた。
xmlns 属性による指定ではなく、 prefix 属性で指定しなさいということらしい。
<html lang="ja" prefix="og: http://ogp.me/ns#">
関連
The W3C Markup Validation Service
OGPの記述後もValidなHTML5文書にするマークアップ方法のメモ｜Blog｜Skyward Design
The Open Graph protocol

Twitter Cards

Twitter Cards を指定すれば Web でツイートを開いた時にサイトの情報を表示できるので指定してみた。
Way to cover an image with another imageの指定で言えば以下のような感じ。
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://wada811.github.com/sample/imageCover/index.html">
<meta name="twitter:title" content="Way to cover an image with another image">
<meta name="twitter:description" content="HTML/CSS/JavaScriptを駆使した画像を重ねる方法のまとめ。HTML5(Canvas)/CSS3もあるよ！画像は@kazoo04氏のアイコン素材を使わせて頂きました！ありがとうございます！">
<meta name="twitter:image" content="http://wada811.github.com/sample/imageCover/img/kazoo04-background.png">
<meta name="twitter:site" content="@wada811">
<meta name="twitter:creator" content="@wada811">
しかし、これは HTML5invalid である。name 属性に知らない値が設定されているのでエラーになる。
Twitter Cards meta - HTML5 Validation issue | Twitter Developersのコメントには
name を property に変えれば良いと書かれている。
試しに以下のプレビューツールで確認すると問題なく表示されることがわかる。
Preview your Twitter Card | Twitter Developers
ちなみにキャッシュがあるようで適当な指定でツイートしてしまうと
その後、指定を変えてもしばらくは反映されないので注意。
無用なトラブルを避けるために確認はプレビューツールでしよう。
関連
Twitter Cards | Twitter Developers

jQueryUI で リッチなタブ UI を作る

適当にソースコードを載せたらコレ以上に縦長になってしまうし、jsdo.itみたいな表示がしたかったので
探したらjQuery UIのタブが良さそうだった。
実装も簡単だし、他の UI も便利そうだったから色々使っていきたい。
関連
Tabs | jQuery UI

Twitter Bootstrap

Twitter Bootstrap は前にも使ったことあるけど一応。
Canvas で合成した画像を作成するときのボタン用に。
あとソースコード表示にも使った。
関連
Buttons | Base CSS | Bootstrap

google-code-prettify

Twitter Bootstrap のソースコード表示に使われている google-code-prettify を今回は使った。
Twitter Bootstrap と組み合わさった時の表示がいまいちだったのでスタイルをいじった。
.prettyprint {
    margin: 0 !important; /* Twitter Bootstrap が pre.prettyprint に margin-bottom をつけるため */
    overflow-x: scroll;
}
関連
Bootstrap：google-code-prettify

Canvas で複数枚の画像を描画、合成する

先人のおかげでほとんど苦労せずに描画することができた。
Canvas ってサイズ指定を CSS でできない？気のせいか効かなかったので JavaScript で指定した。
参考
Canvasに画像を複数枚重ねて描画するには » RIAxDNP
sinatra + html5_canvas + jquery 画像ドラッグドロップでファイル保存 - 麺処　まつば
このエントリーをはてなブックマークに追加
タグ: , , , , , , ,
2012/08/26

[書評]リーダブルコード The Art of Readable Code

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック
Dustin Boswell
オライリージャパン
発売日：2012-06-23
ブクログでレビューを見る»
コードは理解しやすくなければならないという考えのもと、
理解するための時間を最短にするための実践的なテクニック集を解説している本。
アーキテクチャとかデザインパターンとかではなく、
もっと基本的なことについて書かれているので
この本の内容を当たり前だと思えるようなプログラマーになろう！

目次と訳者の解説が公開されているので気になったら読んでほしい。
O'Reilly Japan - リーダブルコード http://www.oreilly.co.jp/books/9784873115658/
リーダブルコードの解説 http://www.clear-code.com/blog/2012/6/11.html
個々の内容について書いたらリーダブルコードの内容をリライトしてしまうのでそれ以外について書く。
この本の原典は以下の書籍だろうか。
あわせて読みたいで高品質なコードを書くための書籍として紹介されていた書籍だ。
Code Complete第2版〈上〉―完全なプログラミングを目指して
Code Complete第2版〈下〉―完全なプログラミングを目指して
リファクタリング―プログラムの体質改善テクニック
プログラミング作法
達人プログラマー―システム開発の職人から名匠への道
Clean Code アジャイルソフトウェア達人の技
これらをいくつか読んでいる人にはおそらく必要のない本だろう。
どれも名著と呼ばれ、内容的にも値段的にも重量級の書籍ばかりだ。
プログラミングに関して意欲と費やせるお金と時間があるのならば原典を読んだほうがいいと思う。
それらを持ち合わせていない人や手っ取り早くテクニックを知りたい人には最適の本だ。
あとは他人のケツを拭きたくない人は教育用に読ませればいい。230ページ程度だからすぐに読める。
読み終わったら(本の内容に理解してくれたら)すぐにコードはマシなものになるだろう。

リファクタリングやTDDが一人前のプログラマーならできて当たり前みたいな雰囲気が最近あるけど
リーダブルコードを書くことも当たり前な雰囲気ができて欲しいですね。当たり前すぎて言われてないだけかな？

追記: 良い名前をつけるためのWebサイト

リーダブルコードでは良い名前をつけろと言われるが日本人に英語の細かいニュアンスの違いを把握して
命名するのはなかなか大変だと思うので類義語・対義語を調べるには以下のサイトがいいと思う。
Thesaurus.com | Find Synonyms and Antonyms of Words at Thesaurus.com
フォームから検索すれば定義や類義語・対義語がわかる。Synonymsが類義語で、Antonymsが対義語だ。
適切な意味の単語を選ぶことに時間をかけるプログラマーはブックマーク必須だ！

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)
リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)
このエントリーをはてなブックマークに追加
タグ: , , , ,
2012/02/04

ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす

導入編：DevAchieve: BloggerにソースコードをハイライトするSyntaxHighlighterを導入する

SyntaxHighlighterを使用してソースをカラフルに表示するには、
以下の二通りの方法で記述することができます。
  1. preタグを使う
  2. scriptタグを使う

preタグを使う

<pre class="brush: alias;">
// ココにソースを記述
</pre>
メリット：後述のscriptタグと違ってハイライトスクリプトが読み込まれなくてもテキストとして表示される。
デメリット：<以降がタグとして認識されるため&lt;と書き換えなければならない。
Bloggerの人気の投稿ウィジェットに表示される記事の前文にpreタグまで含まれると
表示が狂うことがある。(何が原因かわからないけどコレのせいで最初からHTML/CSS組み直した(´Д⊂ヽ)
このせいで記事の公開が遅れました…。とりあえず対策は記事書いてすぐにコードを貼らないこと。

scriptタグを使う

<script class="brush: alias;" type="syntaxhighlighter"><![CDATA[
// ココにソースを記述
]]></script>
メリット：<以降がタグとして誤認されることがない。(</script>タグだけは&lt;/script>と記述する必要あり)
デメリット：scriptが読み込まれるまで非表示である。また、AutoPager系の自動ページ読み込みで
読み込まれたページはハイライトスクリプトが動かず、ソースコードが非表示のままになる。
また、RSSやモバイル表示でソースコードが非表示になる。

ということで個人的にpreタグを使いたいのでpreタグで説明していきます。
同様の設定はscriptタグでも出来るので適宜読み替えて下さい。

使用言語の設定

SyntaxHighlighterを使用する際には使用言語を設定する必要があります。
上のどちらの方法でも同じで、一行目の"alias"の部分を使用言語のエイリアスに書き換えます。

Brush name
使用言語		Brush aliases
言語のエイリアス		File name
JSファイル名
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js
SyntaxHighlighter - Bundled Brushes

例えばHTMLをシンタックスハイライトしたい場合は、以下のようにaliasをhtmlにします。
<pre class="brush: html;">
// ココにソースを記述
</pre>

特定の行を強調表示する

下のやつは1行目が強調表示されているのでブログなどで言及する時に
読者にわかりやすくて便利です。
これは以下のように行番号を指定することによって設定可能です。
<pre class="brush: alias; highlight: [1];">
// ココにソースを記述
</pre>
カンマ区切りで行数を指定することによって複数行を強調表示することも出来ます。

開始行番号の指定

元のソースコードを全て載せるとスペースを取りすぎるので
一部分を抜き出して、対応する行だけ説明したい時に使います。
前の記事で言うと、「縦スクロールバーを消す」あたりで使った機能です。
<pre class="brush: alias; first-line: 10;">
// ココにソースを記述
</pre>
1行目のように指定することによって行番号が10から始まるようになりました。

タイトル設定

<pre class="brush: alias;" title="タイトル設定">
// ココにソースを記述
</pre>
さっきまではclass属性の中に記述していましたが、title属性を使用しているので注意です。
ちなみにtitle属性の属性値を記述しなければタイトルは表示されません。
title=""のままタイトル未記入でも表示には影響されないということです。

その他の設定

ソースコードの折りたたみ・展開、行番号非表示、
ソースコードと同時にＨＴＭＬタグのハイライト表示、
タブサイズの指定、などの設定はコチラに載っています。
今日のPython: ブログ上でプログラムソースを表示する方法②

まとめ

よく使う上の3つのオプションを指定したのがコチラです。
<pre class="brush: alias; first-line: 1; highlight: [,];" title="">
// ココにソースを記述
</pre>
highlightとtitleは未指定でも表示に影響無いのでイチイチ消さなくても良いです。
後はaliasを自分の使用言語のエイリアスに書き換えて単語登録でもしておけばOK！


これであなたもブログでソースコードを綺麗に表示できます！

それでは。
このエントリーをはてなブックマークに追加
タグ: , , , ,

BloggerにソースコードをハイライトするSyntaxHighlighterを導入する

たまにブログなどで綺麗にソースコードを表示しているサイトを見かけますよね？
ソースコードを文法的に色を変えて(シンタックスハイライトして)表示していて綺麗ですね。
ブログなどでシンタックスハイライトするにはSyntaxHighlighterというのを使います。

まずはSyntax Highlighter Scripts Generatorで必要な言語を選択してください。
ちなみにココでハイライトのテーマも選ぶことができます。
SyntaxHighlighter - Themesで事前に好みのテーマを確認できるから要チェックです。

Generateボタンを押したらテキストエリアにコードが表示されるからコピペしましょう。
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>
例えば、これはJavaだけを選択してGenerateボタンを押した時のコードです。
このように2行目に選択したテーマのCSSがあり、4行目以降にに選択した言語のJSファイルがあります。

これをそのまま使用しても良いのですが、表示少し微妙なのでCSSを少し編集します。
まずはhttp://alexgorbatchev.com/pub/sh/current/styles/shCore.cssにアクセスして、
中身をコピーしてエディタなどに貼り付けて編集しましょう。

縦スクロールバーを消す

.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
  overflow-y: hidden !important; // 追加
}

IEで最後の行が横スクロールバーに隠れるのを防ぐ

.syntaxhighlighter.ie {
  font-size: .9em !important;
  padding: 1px 0 20px 0 !important; // 1px->20pxに変更
}
DevAchieve: BloggerをIEで開くと最新版でもIE7として表示されることによる問題で説明したコードを削除した場合、
IE8以上ならばこの問題は発生しないのでCSSを変更する必要はありません。

以上でshCore.cssの編集が完了しました。
ファイルのアップロードに対応したブログサービスならばコレを保存して、
ブログにアップロードして上で生成したコードの1行目のURLと差し替えればOK！
Bloggerはファイルのアップロードができないので、
設定画面＞テンプレート＞カスタマイズ＞アドバンス＞CSSを追加、に
書き換えたCSSを貼り付けてブログに適用しましょう。

右上の"？"の非表示にする

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
// (中略)選択した言語に対応するscriptタグ
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.defaults['toolbar'] = false;
 SyntaxHighlighter.all();
</script>
7行目のオプションを設定しておくことによって非表示にすることができます。
これで設定は以上です。
このコードを</head>の直前に貼りつければ導入は終了です。

次の記事ではSyntaxHighlighterの使い方を説明します。
次の記事：DevAchieve: ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす
このエントリーをはてなブックマークに追加
タグ: , , , ,
2012/01/15

[書評]良いコードを書く技術　読みやすく保守しやすいプログラミング作法

良いコードを書く技術　－読みやすく保守しやすいプログラミング作法
縣 俊貴
技術評論社
発売日：2011-04-09
ブクログでレビューを見る»
良いコードを書くためのHow-to本です。
とっつきやすく読みやすいため2時間ほどあれば読み切れます。
本書P.15-16に書かれていることがこの本に対する全てです。
本書で基礎を理解したら原典と呼ばれる良書を読みましょう。
幸い、本書の付録には解説付きの参考文献が載っているので
次に読むべき本について戸惑うことはないでしょう。
色々なレビューにあるように「内容が薄い」と感じられるのは、
もう既にある程度良いコードを書けているから
期待に沿うような目新しい技術に出会わなかったからなのでしょう。

悪い本ではないのですが過度の期待を持たせすぎて
Amazonでは低い評価になっていますね。

「普通のプログラマになりたいひよっこプログラマのためのステップアップガイド」と
帯の文章を変えればちょうどいいかもしれません。
大学の情報科1年とかIT系専門学校の生徒が読めば得るものは多いでしょう。きっと。

参考文献がわかりやすく解説付きで載っているのでそちらを読むべきです。
どの本も原典と呼ばれるような良書なので深い理解が得られるでしょう。
一部抜粋して以下にリンクを貼っておきます。

それでは。

リファクタリング―プログラムの体質改善テクニック (Object Technology Series)
リファクタリング―プログラムの体質改善テクニック (Object Technology Series)		Code Craft ~エクセレントなコードを書くための実践的技法~
Code Craft ~エクセレントなコードを書くための実践的技法~		 Code Complete第2版〈上〉―完全なプログラミングを目指して
Code Complete第2版〈上〉―完全なプログラミングを目指して
このエントリーをはてなブックマークに追加
タグ: , , ,

タグ(RSS)