Blog

2009.10.26 / Flash

[2010.09.20] chromeのバージョンアップにより、wmodeによってはpopupが開かなくなったり(参考記事)と、状況が変わってます。これは当時の記事なので現状と違う部分があります。すみません。

前回の記事「Flash、JavaScriptから新規ウィンドウをポップアップする際のブラウザ毎の挙動のまとめ」の続き。

Safariで、Flashから新規ウィンドウを開こうとしてwindow.openを使うとブロックされる。
サイズ指定等なしの普通の新規ウィンドウならnavigateToURL(url,”_blank”)を使えばいいけど、サイズ指定したい場合はどうしたらいいのか、という件です。
(more…)

2009.10.24 / Flash

[2010.09.20] chromeのバージョンアップにより、wmodeによってはpopupが開かなくなったり(参考記事)と、状況が変わってます。これは当時の記事なので現状と違う部分があります。すみません。

Flashから他のアドレスに飛んだり、新しい画面を開く方法は主に2つ。

  • navigateToURL(url, target);
  • ExternalInterface.call(“window.open”, url, target, options);

だと思います。
そしてオプションを指定することはnavigateToURLではできない、と思ってます。
いやもっとあるよ、オプション指定もできるよ、となると記事の前提が崩れますが、調べても出てこなかったので、たぶん主にそんなもんだと思いますし、そういう前提で話を進めます。

試してみると、そもそもHTMLをクリックしてJavaScriptのwindow.openを呼んだ場合も含めてブラウザによって挙動が違うので、表にしました。
(more…)

2009.10.23 / Development

コードを貼ることもあるので、やはりきれいに見せたいものです。
みなさんのよく利用していて見かける、SyntaxHighlighterを導入してみました。

目的

今回のゴールは

  • 一般的に普及していてかつ機能的にも充実しているSyntaxHighlighterを導入したい。
  • WordPressのSyntaxHighlighterプラグインには入力方式が主に2つあり、
    • preタグを使う<pre calss=”language”>hogehuga</pre>
    • 大括弧を使う[language]hogehuga[/language]で、自動で変換してくれる

    と主に二つあるようだが、前者のpreタグ方式のものを導入したい。

  • ActionScriptもカラーリングしたい。

とします。

調査

とりあえずググって調べて見てみると、現状は以下のようなものでした。

  • プラグインは色々あるが、もととなるのはJSのライブラリである
    SyntaxHighlighterであり、各プラグインではJSでの処理に至るまでの過程が異なるのみである。実際にはヘッダでJSを読み込み、初期化関数を呼べばいいだけなので、最も単純な方法としては自分でheader.phpに書いても簡単にできる。
  • また、ネットでの情報ではSyntaxHighlighterはASに対応していないとある過去記事が多いが、実際にはバージョンアップしてAS他、対応言語が増えている。
  • しかし、そのバージョンアップにプラグインが対応できているかというと、必ずしもそうではない。古いバージョンを載せていてASに対応していないものもある。
  • 大元のサイトによると、最新バージョンではpreタグの他にも<script type=”syntaxhighlighter”>でも使えるよう。

以上の結果から、まずは最新バージョンを取り込んでくれていて、かつpreタグ方式のもの、を探します。

管理画面のプラグイン新規追加で「syntax highlighter」で検索をかけ、順に見ていくことにしました。
インストール前にまずはダウンロードしてみて中身を見て判断します。

Google Syntax Highlighter for WordPress
SyntaxHighlighterのバージョンが古く、AS未対応でした。また原因はよくわかりませんが、上手く動かない時があります。過去に動かなかったことがあり、今回も実際インストールしてみても動かなかったです。

Dojox WordPress Syntax Highlighter
説明ページがリンク切れだったので、却下。

Syntax Highlighter and Code Colorizer for WordPress
こちらもSyntaxHighlighterのバージョンが古かったので、却下。

Easy Google Syntax Highlighter
これはバージョン番号を見ると2.1.364とあり、最新のSyntaxHighlighterを取り込んでいます。入力方式もpreタグです。
そしてプラグインのphpが他に比べて異様に長いな、と思っていたら、管理画面に「どの言語ファイルを読み込むか」「どのテーマを選ぶか」等の設定をできる画面が出てきます。
これはいい。
本体JSがバージョンアップした時に自分でマージするとしたら少々面倒そうですが、機能的にはここまでで間違いなく一番良いです。
条件を満たすものが見つかったので調査終了。

インストール

条件を満たしているのでEasy Google Syntax Highlighterをインストール。プラグインを有効化。
確認した所、無事に表示されました。めでたしめでたし。

自分でできないか?

ここまでで目的は一応完了しました。
しかし、もとのライブラリのバージョンアップにプラグインのバージョンアップがついていかなかった場合、自分でしなくてはいけないですし、
ごく単純な形のプラグイン作成の勉強のためにも自分でできないか、試してみました。

実際にしなくてはならないことは少なく、元々のライブラリをダウンロードしたらついているサンプルのhtmlを見るとわかりますが必要なのはこれだけなはず。
(ちなみに何故か、実際にはshBrushAS.js等がフォルダに用意されているにも関わらずサンプルには読み込まれていないので、追加しました)

<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushAS3.js"></script>
<script type="text/javascript" src="scripts/shBrushBash.js"></script>
<script type="text/javascript" src="scripts/shBrushColdFusion.js"></script>
<script type="text/javascript" src="scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="scripts/shBrushCss.js"></script>
<script type="text/javascript" src="scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="scripts/shBrushErlang.js"></script>
<script type="text/javascript" src="scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="scripts/shBrushJava.js"></script>
<script type="text/javascript" src="scripts/shBrushJavaFX.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="scripts/shBrushPerl.js"></script>
<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="scripts/shBrushPowerShell.js"></script>
<script type="text/javascript" src="scripts/shBrushPython.js"></script>
<script type="text/javascript" src="scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="scripts/shBrushScala.js"></script>
<script type="text/javascript" src="scripts/shBrushSql.js"></script>
<script type="text/javascript" src="scripts/shBrushVb.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
<script type="text/javascript">
    SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
    SyntaxHighlighter.all();
</script>

要はshCore.jsをまず読み込み、その後必要な分の言語ファイルを読み込み、swfファイルの位置を指定、all()で初期化する、それだけです。

元々のJSライブラリをダウンロードしてきても、それ自体はWPともMTとも無関係なので、WPのプラグイン用のPHPファイルはありません。
逆に言うと、それを入れてあげるだけで、プラグインとして機能するようになり、管理画面にも出ます。
サンプルのhtmlと、既存のプラグインのPHPを参考に出来上がったのはこちら。PHPファイルをzipにしてます。

my_syntax_highlighter.zip

<?php
/**
 * @package My_Syntax_Highlighter
 * @author ikekou
 * @version 1.0
 */
/*
Plugin Name: My Syntax Highlighter
Plugin URI: http://wordpress.org/#
Description: <a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter">Syntax Highlighter</a>の2.1.364です。
Author: ikekou
Version: 1.0
Author URI: http://ikekou.jp
*/

function insert_header() {
    $current_path = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__)) .'/';
    ?>
    <link href="<?php echo $current_path; ?>styles/shCore.css" type="text/css" rel="stylesheet" />
    <link href="<?php echo $current_path; ?>styles/shThemeDefault.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shCore.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushAS3.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushBash.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushColdFusion.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushCpp.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushCSharp.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushCss.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushDelphi.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushDiff.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushErlang.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushGroovy.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushJava.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushJavaFX.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushPerl.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushPhp.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushPlain.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushPowerShell.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushPython.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushRuby.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushScala.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushSql.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushVb.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushXml.js"></script>
    <script type="text/javascript">
        SyntaxHighlighter.config.clipboardSwf = '<?php echo $current_path; ?>scripts/clipboard.swf';
        SyntaxHighlighter.all();
    </script>
    <?php
}
add_action('wp_head','insert_header');

?>

最初の部分に書いてあるコメントがどうやらプラグインとして必要なもののようで、Hello DollyプラグインのPHPファイルからコピーしました。
このPHPファイルのファイル名は何でも良く、管理画面に出てくる名前は
Plugin Name: My Syntax Highlighter
の値のようです。ほかの項目も今回は適当です。

全部の言語は使わないので、実際には使いそうなものだけ残しています。

これを使ってSyntaxHighlighterを使うための手順をあらためて説明すると、

  1. まず大本のJSを配布しているhttp://alexgorbatchev.com/wiki/SyntaxHighlighterからJSをダウンロード
  2. 解凍したらフォルダ名が他のプラグインと名前が重複しないように適当にリネーム
  3. 上記のPHPファイルをそのフォルダ内に作成。utf8、bomなしで。
    フォルダごと/wp-content/plugins/にアップ。
  4. 管理画面にMy Syntax Highlighterが追加されるので、[使用する]をクリック。
    <pre class=”brush: php;>hogehoge</php>みたいな感じで投稿。
  5. 確認

という流れです。

結論

自分でできたのは勉強になったのでよかったです。プラグインが機能する基本的な仕組みは理解できました。
管理画面とからんでくる部分はわかりませんが。

しかしとりあえず、困るまではEasy Google Syntax Highlighterを使ってみます
便利そうですしね!

2009.10.21 / Inbox

気に入っていない道具は使用頻度も下るもの。
以前のblogは内容も見た目も更新の使い勝手も全体的にイマイチだったので、イチから自分で作ろうと一度closeしました。

ところが、やっぱりその間にも書きたいことなどありまして。
とりあえずSImpleなテーマ(その名も“Simpla”)で急遽復活。

おまけにいずれ入れようと思ってとってあるDBのダンプデータは、なんかちょっと上手く行かずまた今度。
どうせ大した内容じゃないから優先順位低い。

全く違うテーマは一緒にするとなんかダメと前回学んだので、別のブログでやろうかなと思い、逆ドメイン(ぽく)名前をつけてみたので、次はjp.ikekou.blog.Ramenか何かでしょう。と予想。

ということでまたよろしくお願いいたします。