afainuコメントするWordPressの新バージョンがリリースされたので、アップグレードしました。今は管理画面からボタン一つでアップグレードできるので楽ちんです。(ただし、PHPがセーフモードの場合はそのままでは自動アップグレードできず、update-core.phpがCGIモードで動くように設定する必要があります。)WP2.7.1->2.8へアップグレード日本語版のWordPressを使っている場合は、オリジナル英語版のリリースから日本語版のリリースまで若干のタイムラグがありますので、スクリーンショットのように日本語版へのアップグレードが利用可能になるまで待ちましょう。(一旦英語版にアップグレードして再度日本語版へアップグレードすることもできますが、面倒なので。)アップグレードの前にはファイルとデータベースをバックアップしておきます。念のためバックアップからテストサイトを作成して、そちらでアップグレードをして問題がないことを確かめてから本サイトのアップグレードを実行しました。WP2.8ですが、2.7との違いはほとんど分かりません。プラグインもテーマもそのまま問題なく動いています。個人的にはプラグインの一覧画面がちょっと使いにくくなったと思います。テーマは自作ですし、ウィジェットも使っていないので、テーマ関係の変更は今のところ関係なし、って感じです。2.8への自動アップグレードを行う際の注意事項)。ここのアップグレードでは何の問題もありませんでしたが、原因が何なのか(サーバーの設定?プラグイン?バグ?)早く解明されることを望みます。afainuコメントする結局アップグレードすることにしました。Builderやらアップデートしていったら、やっぱりFlashもアップグレードしたほうがいいような気がしてきたので。アップグレード版を購入してインストールしたところ、CS3は削除されずに別アプリケーションとしてインストールされました。CS4があればCS3は必要なく、すぐに手動でアンインストールしました。起動スピードとかは特に変わらず。スタートアップスクリーンに表示されるテンプレートが広告1つだけになって、最初はテンプレートが消えてしまったのかとちょっと焦りました。CS4のワークスペース(初期設定)ワークスペースは大きく変わりました。各パネルの配置が大幅に変更され、用途別にプリセットされたワークスペースがいくつか準備されています。どのセットも使いやすくなった面と使いにくくなった面があるような気がします。作業内容に応じてワークスペースを切り替えると効率が良いかも。CS4にしてから使ってないので、外観以外の変更点はよく分かりませんが、チュートリアルビデオをみると、アニメーションを作成するのがかなり楽になりそうな印象です。3Dの描画とボーンツールも使えそうな感じです。Managerがインストールされているのもありがたいです。CS4に対応した書籍とかは出ていないようですし、Web上の情報もまだ少なそうです。CS3の書籍や情報を自分でCS4用に解釈しなおして勉強していきます。afainuコメントする前回出来上がったFlash製のブログヘッダーをHTMLに埋め込みましょう。その前に、パブリッシュする必要があります。CS3のファイルメニューからパブリッシュを選ぶと、flaファイルが保存してあるのと同じフォルダに3つのファイルが作成されます。1つはswfファイルで、これがFlashの本体です。後の2つはhtmlファイルとAC_RunActiveContent.jsというJavaScriptファイルです。スタンダードなやり方を試してみます。パブリッシュされたswfファイルとjsファイルを自分のブログを設置しているサーバーにアップロードします。WordPressなら使用しているテーマのフォルダでいいでしょう。htmlファイルはアップロードする必要はありません。テーマでヘッダー部分が記述されているファイル(通常はheader.php)をローカルにダウンロードして編集します。language="javascript"></script>をコピーし、head.phpの同じく<head>内にペーストします。code}</script><noscript>【省略】</noscript>をコピーし、header.phpのFlashを表示させたい場所にペーストします。編集したheader.phpをサーバーに上書きアップロードすれば完成・・・というのが解説書とかに書かれていいる通りの手順ですが、これではおそらく表示されないでしょう。jsファイルとswfファイルのパスが正しくないからです。ファイル名を指定している部分をテーマのフォルダまでのフルパスで記述してやれば動くようになります。書き換える場所はjsファイルについて1か所(<head>内)、swfファイルについて4か所あります。?>{swfファイル名}と表すことができます。1.0ではValidではありませんので、必要に応じて書き換えないといけません。この方法を使う時は、既存のヘッダー部分は消してしまうかCSSで見えなくしてしまう必要があります。私は別の方法を使ってこのブログのヘッダーをFlash化しています。それはSWFObjectというJavaScriptを使う方法で、これもよく使われています。設置方法はリンク先のdocumentationページに(英語で)詳しく解説されていますし、日本語訳へのリンクもあります。2.0には2通りの設置方法があり、ひとつはJavSscriptがオフでもFlashが表示される、<object>タグを直接書く方法と、javascriptでダイナミックに表示する(つまりjavascriptがオフだと表示されない)方法があります。私は、JavaScriptをあえてオフにしている人は少数派であろうと仮定し、後者のダイナミックな方法を用いています。ソースが複雑になるのを避け、既存のヘッダー部分はそのまま残したかったということもあります。既存のヘッダーをそのまま残してSWFObjectを用いてFlashを埋め込むには、例えば以下のようなソースにすればよいです(swfobject.jsとswfファイルはテーマフォルダにアップロードされているとします)。"9.0.0");//]]></script>これでjavascriptがオフならこれまでのヘッダーが、オンならFlashのヘッダーが表示されるようになります。4回にわたるFlashによるブログのヘッダーの作成過程の紹介はこれで終わりです。次は何を作るかまだ考え中ですが、公開できるようなものが出来たら、また作成過程も含めて紹介してみたいと思います。afainuコメントするこれまででブログのヘッダーとしての機能は一応出来上がりましたが、これだけならわざわざFlashで作らなくても、HTMLとCSSで十分です。今回はちょっとしたアニメーションを追加して、Flashならではのヘッダーに仕上げていきます。私は絵心がないので、動かすのは幾何学的な図形にしておきます。そんなわけで、流れ星のアニメーションにします。普通に星が動くだけでは面白くないので、ランダムな大きさ・タイミングで星が降るようにActionScriptでプログラミングします。降らせる星を描いていきます。新しいレイヤーを作成し、ブログタイトルのレイヤーとブログの説明のレイヤーの間に配置します。ActionScriptを使って描画するので、ここで星を描くのはどのレイヤーでもいいのですが、タイトルより下・説明より上に星を流したいので、分かりやすいようにここにレイヤーを作っておきます。ステージ上に星を描く星を描くには多角形ツールを使います。多角形ツールはツールバーの矩形ツールを長押しして出てくるメニューから選択できます。多角形ツールを選択したら、プロパティペインのオプションボタンをクリックして、ツールの設定ウィンドウでスタイルを(多角形ではなく)星にすることで、星形を描くことができるようになります。塗りのカラーも星らしく黄色系にしておきます。星形を正しい(?)向きで描くには、Shiftキーを押しながらマウスをドラッグすると楽です。普通に描画すると、スクリーンショットのように、線と塗が別々のオブジェクトとして描かれますので、輪郭線を削除しましょう。線の上でダブルクリックすると輪郭線を全選択できますので、その状態でDeleteキーを押せばOKです。次に星の上で右クリックして、シンボルに変換します。今回は、ムービークリップに変換します。シンボルに変換したら、ステージ上の星は削除します。リンケージの設定ステージから削除しても、今描いた星は右ペインのライブラリ内にあります。これをステージ上にドラッグして使うこともできます。プログラミング的には、ライブラリ内にある星はクラス(雛型)であり、ステージ上にドラッグすることでインスタンス化できます。この辺はオブジェクト指向プログラミングの考え方ですね。Actionscriptからインスタンス化して利用するには、クラスの名前を付ける必要があります。これがリンケージという作業になります。(シンボルに変換した時に付けた名前とは異なります。)ライブラリ内の星を右クリックして、メニューからリンケージを選びます。リンケージプロパティというウィンドウが出るので、ActionScriptに書き出しをチェックし、クラスの名前を記入します。OKボタンを押すと警告ウィンドウが出ますが、これもOKを押します。これでActionScriptでプログラミングする準備が整いました。前回スクリプト用に作ったレイヤーの先頭フレームを選択してアクションウィンドウを開きます。前回書いたスクリプトの続きに、以下のコードを記述します。}コードの中身を簡単に解説します。1行目ではまずStarクラス(リンケージの作業で星につけたクラス名)のオブジェクトをインスタンス化し、2行目でこのインスタンスをステージに子として加えています。表示順は下から2番目、すなわち星を描く際に作ったレイヤーの位置です。この時点では位置を指定していませんので、まだ描画されません。位置を指定する処理は10行目からのinitialize関数に切り出してあり、8行目でこの関数を呼び出すことで描画されます。今回は一度に一つの星しか降らせないので、インスタンスは一つだけで、大きさと初期位置をリセットすることで次の星にしています。8行目で、フレーム入るたびにmove関数が実行されるようイベントリスナーを設定しています。move関数が星を移動させる処理になります。initialize関数では、乱数を用いて星の初期位置・大きさ・寿命を設定しています。move関数では、星が寿命を過ぎている場合はリセット(initialize関数を呼び出し)し、そうでない場合は速度の分だけ星の位置を移動させます。速度はフレームに入るたびに増加、すなわち加速度運動をすることになります。スマートなコードではないかもしれませんが、ほぼ意図したとおりの動作になりました。複数の星(数もランダム)が流れるようにするともっと面白いですが、ブログのヘッダーなので、常時動きがあってうるさく感じるよりも、これくらいの方がいいのかなと思います。これでFlashは出来上がりました。次回、Flashをブログに貼り付けて最終回とします。afainuコメントする前回はブログのタイトルと説明をテキストとして配置するところまでをやりました。今回は、ブログのタイトルにリンクとロールオーバー効果を設定して、ブログのヘッダーとしての機能を完成させたいと思います。シンボルに変換まずはロールオーバー効果を付けてみましょう。最初に、ブログタイトルを選択して右クリックし、シンボルに変換します。適当に名前をつけ、タイプはボタンを選択します。後で使用することになるので、このシンボルにインスタンス名(blogTitleとします)を付けておきます。この「シンボルに変換」という概念が最初はよく分からなかったのですが、このテキストを含んだ別の独立した子ムービー(今回の例ではボタンですが)のオブジェクトを配置する感じでしょうか。ブログテキストをダブルクリックするとシンボルの編集モードに入り、そこでは親ムービーと同様に、しかし独立した、新規のレイヤー上にテキスト(ブログタイトル)が配置されています。次に、マウスを上に持ってきたときに反応するヒットエリアを作成します。実は、ヒットエリアを作らなくても、ロールオーバー効果は設定できます。ステージ上に配置したテキストには、プロパティペインでURLリンクを簡単に設定することができます。この2つの設定はなぜか両立せず、ロールオーバーが正しく働かなくなってしまいました。そこで、ActionScriptを使ってリンクを設定することにして、リンクとロールオーバーに反応させるためにヒットエリアを作成することにしました。この方法のほうがいろいろと応用もききそうな気もします。今テキストが置かれているレイヤーとは別のレイヤーを作成し、そこに矩形ツールを使って長方形を描きます。位置とサイズは最初は適当に作っておいて、後でプロパティペインで、ブログタイトルのテキストと同じ値に設定します。タイムライン上で、長方形を描いたレイヤーとアップフレームが交差するボックスを、ヒットフレームまでドラッグして移動します。これで、この長方形はシンボルのヒットエリアとしてのみ働く透明なボタンになります。マウスオーバー時のテキスト色を変更では、マウスオーバーの際のテキストの見た目を変更していきます。ブログタイトルのテキストが配置されたレイヤーを選択して、アップフレーム上を右クリックしてキーフレームを挿入します。ステージ上のブログタイトルを選択し、プロパティペインでテキストの塗りのカラーを変更します。ここまでで、ブログタイトルにマウスカーソルを乗せるとテキストの色が変わるようになりました。ブログタイトルのテキストにリンクを設定しましょう。先に述べたように、ActionScriptを使用して記述していきます。ActionScriptでリンクを張るステージ上をダブルクリックまたはシーン1と書かれたリンクをクリックして、シンボルの編集を抜けて親ムービーの編集に戻り、スクリプト用に新しいレイヤーを作成します。このレイヤーの先頭フレームを選択して、F9を押して(またはウィンドウメニューから)アクションウィンドウを開きます。ここにコードを記述していきます。(スクリーンショットでは、アクションウィンドウはプロパティペインに格納しています。)最初に設定したシンボルのインスタンス名がここで必要になります。ActionScript自体の説明は面倒なので(!)、スクリプトの内容を以下に載せるだけにしますが、流れとしては、(1)インスタンスにイベントリスナーを設定し、マウスクリックに反応させる、(2)クリックされたときの処理を記述した関数を宣言する、ということになります。'_self');}長くなりましたが、今回はここまで。Flashなので、次回はちょっとしたアニメーションを加えてみます。afainuコメントするこのブログのヘッダー部分をFlashで作ってみました。備忘録も兼ねて、その過程を数回に分けて紹介してみようと思います。ドキュメントを新規作成します。ActionScriptも3.0を使います。ドキュメントのプロパティを設定ドキュメントを新規作成したら、ステージ上を右クリック、または画面下の方のプロパティペインのサイズのボタンを押して、ドキュメントのプロパティウィンドウを開きます。ここでステージのサイズ、背景色、フレームレートを設定します。サイズと背景色はCSSで指定しているものに合わせます。このブログは最小値指定付きの可変幅なので、Flashの横幅はmin-widthの値(より少し小さめ)にしました。つぎにブログのタイトルと説明をステージ上に配置します。Titleとでも変更しておきます。左のツールパレットからテキストツールを選択して、ステージ上にブログのタイトルを記入します。記入し終わったら、このテキストを選択した状態で、プロパティペインでフォント、フォントサイズ、テキストの塗りのカラーを設定します。テキストの種類は静止テキストのままです。(PHP)からブログのタイトルを渡したいところですが、フォントの自由度を考えて、静止テキストにして直接記入することにしました。最後にテキストボックスのサイズと位置を指定して、ブログタイトルの配置は終了です。Description)を作成して、その上に配置します。子のレイヤーはタイトルのレイヤーよりも下にしておきます。ドロップシャドウ効果をつけるユニークなフォントを指定するだけでもファンシー(?)になりますが、もう少し装飾を付けてみましょう。ブログタイトルを選択した状態で、プロパティの横のフィルタタブをクリックし、「+」ボタンを押してドロップシャドウを追加します。これだけでタイトルのテキストにいい具合に影が付きました。Enterでムービーをプレビューしたり、セーブしたりしておきましょう。次回は、ブログタイトルにロールオーバー効果とトップページへのリンクを設定して、ブログヘッダーらしい機能を追加します。何に使おうというのでしょうか。自分でも分かりません(爆)。CS3の起動画面そもそも、なにかのプログラミングをそれなりに出来るようになりたかったのです。これまでいろいろな言語を少しずつかじってきたけど、どれも中途半端で、すぐに忘れてしまっています。1つぐらいはきちんと勉強して、なにかちゃんとしたものを自分で作りたい。AIRでマルチプラットフォームなデスクトップアプリも作れるし、もちろんウェブプログラミングもできるというのが魅力でした。SDKを使えば無料でできるんですが、GUIのほうが作りやすいし、形から入る人としては、やっぱりソフトを買わねばと。本も何冊か買いました。年末に出たCS4にアップグレードしたいところだけど、初心者としてはまだ情報が少ないのが不安。CS3も全然使ってないし、少しは使えるようになってから買おうかしらん。このブログのヘッダー用のバナーでも作ってみましょうかね。