creator note

• Flash Sample
• このサイトについて
• プロフィール

06-18-10

HTML5、JavaScript、CSSが共有できるjsdo.it

ActionScriptを共有するwonderflのHTML5、JavaScript、CSS版ってところですね。サイト上で公開されているソースコードを編集して、そのまま公開することができます。

＞＞jsdo.it

にぎやかしにはなりますが、wonderflもjsdo.itも、実際に流用できて使えるコードってあるのでしょうか。。。とはいえ、刺激になり触発されるので、すばらしいサイトだと思います。シェアする方も、ホントの手の内は明かさないんでしょうけどねー。

10-27-09

IE5.5、IE6、IE7、IE8を同時に表示確認できるフリーアプリIETester

Internet Explorerに合わせたCSSコーディングほど手間がかかる事はありません。古いWindowsPCをそろえて古いInternet Explorerで確認するのもわずらわしいですよね。。

IETesterというアプリを使えば、IE5.5、IE6、IE7、IE8での表示確認が一度にできます。Windows用ですが、無料で使えるのでダウンロードして損はないと思います。ボクはとても助かってます！＾－＾

▼IETester
配布元：My DebugBar | IETester

10-23-09

Flashの周りに出る点線を消す方法

かなり限られた条件だと思いますが、ボクが見ているFirefoxではFlsahコンテンツを触ると周りに点線が出るという現象が起きてます。その点線は、テキストリンクや画像リンクに対してクリックしたときと同じ点線が表示します。

点線が出てしまう条件の予想

・Windows XP
・Firefox（Mac版 Firefoxでは出ませんでした。）
・swfobject v2.2　でFlashを表示。

点線を消す方法

根本的解決になるかどうかはわかりませんが、swfobjectでも最終的にはobjectタグをdocument.writeしているので、objectタグに対してoutline: none;としてあげると、ボクの環境でFlashの周りの点線は消えました。

コレでいいのかなー＾－＾；

object{
	outline: none;
}

追記：この点線は、Firefoxでフォーカスがあたっているところに対しての点線でした。見てくれを重視するために、この点線自体を消したい場合は、全体に対してCSSでoutline:noneｔ;とするといいと思います。

10-17-09

ソースコードに色をつけるSyntaxHighlighterの導入方法

いろんなブログをみていると、HTML、JavaScript、CSS、XMLやPHPのソースコードを、列番号が割り振られて、かつ部分にフォントカラーが設定されているのを見かけます。「ハイライト」って言うんですね。

▼WordPressプラグインSyntaxHighlighter Evolvedの使い方はこちら
WordPressでソースコードに色をつけるプラグインの使い方：SyntaxHighlighter Evolved

まさか人力で設定しているわけでもなさそうですし、どうやってるのか調べてみると、SyntaxHighlighterというJavaScriptとCSSで簡単に導入できるみたいなのでさっそく試してみました。

SyntaxHighlighterのライブラリをダウンロード

▼ダウンロードはこちらから。
配布元：syntaxhighlighter – Google Code

▼解凍したフォルダー構成。
・Uncompressed
・Styles
・Script

この３つのフォルダーをアップして、
導入したいサイトのheadに下記を書きます。

<link type="text/css" rel="stylesheet" href="http://testblog.com/Styles/SyntaxHighlighter.css" />
<script type="text/javascript" src="http://blog.caraldo.net/Script/shCore.js"></script>

<!-- 表示したい言語に応じて書きます -->
<script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushJScript.js"></script>
<script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushCss.js"></script>
<script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushPhp.js"></script>
<script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushXml.js"></script>

<!-- window.onloadの時に実行される、表示させる為の関数 -->
<script type="text/javascript">
window.onload = function () {
	dp.SyntaxHighlighter.ClipboardSwf = 'js/clipboard.swf';
	dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

↑これは、普通のpreタグで挟んでます。
preタグに対してnameとclassを指定してあげます。

<pre name="code" class="html:collapse">
ここにソースコード
</pre>

さっきのheadに書く記述に挟んだpreタグnameとclassを設定してあげると、もうお気付きかもしれませんが、classの部分を書き換えると、その種類のソースコードにハイライトが変わります。下記はそのリストで、左側がclassに入力する種類で、右側は使用する際にheadに書き足すJavaScript名です。

cpp        => shBrushCpp.js
c          => shBrushCpp.js
c++        => shBrushCpp.js
c#         => shBrushCSharp.js
c-sharp    => shBrushCSharp.js
csharp     => shBrushCSharp.js
css        => shBrushCss.js
delphi     => shBrushDelphi.js
pascal     => shBrushDelphi.js
java       => shBrushJava.js
js         => shBrushJScript.js
jscript    => shBrushJScript.js
javascript => shBrushJScript.js
php        => shBrushPhp.js
py         => shBrushPython.js
python     => shBrushPython.js
rb         => shBrushRuby.js
ruby       => shBrushRuby.js
rails      => shBrushRuby.js
ror        => shBrushRuby.js
sql        => shBrushSql.js
vb         => shBrushVb.js
vb.net     => shBrushVb.js
xml        => shBrushXml.js
html       => shBrushXml.js
xhtml      => shBrushXml.js
xslt       => shBrushXml.js

view plain、copy to clipboard、print、?、のテキストを日本語にしてみる。

Scripts/shCore.js　をテキストエディタで開いて、「label:’」と検索してみると４箇所ヒットすると思います。それぞれを下記のように書き換えてみました。

label:'view plain'	=>	label:'プレーン表示'
label:'copy to clipboard'	=>	label:'クリップボードにコピー'
label:'print'	=>	label:'プリント'
label:'?'	=>	label:'コレは何？'

すると文字化けして表示されてしまいました。。orz　これらSyntaxHighlighterのファイルコードは全てShift_JIS形式になっています。ブログやサイトに設定している文字コードに引っ張られるので、headタグに書いているshCore.js”のところに、

<script type="text/javascript" src="http://blog.caraldo.net/Script/shCore.js" charset="Shift_JIS"></script>

「charset=”Shift_JIS”」と書き足しました。

SyntaxHighlighterにActionScritpを対応させる方法

▼こちらのサイトから、ActionScriptをハイライトさせるJavaScriptをダウンロード
配布元：AS3 Syntax Highlighting (with SyntaxHighlighter)
▼解凍したフォルダー構成。
・Scripts
・Styles
StylesのなかにあるSyntaxHighlighter.cssに差し替えて、Scriptsの中にあるCompressedとUncompressedの中にある、shBrushAS3.jsをそれぞれのディレクトリにアップして、

<pre name="code" class="as:collapse">
ここにソースコード
</pre>

これでActionScriptのハイライトが可能になります。