【技術】フリーのホームページ制作ソフトまとめ

　＼　　　　　　　　　　　　　　　　　　　　/
 ＼　　丶　　　　 　　 |　　　　　 /　　 　 ./　　　　 　 ／
 ＼　　ヽ　　　　. 　 .|　　　　　/　　　 /　　　　　 ／
 ＼　　ヽ　　　　  　　|　　　　 /　　　/　　　　　／
＼
-‐
ー
 _＿　　　　　　フ　リ　ー　で　す　　　　　　　　　　　　--
 二　　　　　　　 　　／￣＼　　　　　　　　　　　＝　二
 ￣　　　　　　　　　|＾o＾|　　　　　　　　　　　　　　　　￣
 -‐　　　　　　　　　＼＿／ 　　　　　　　　　　　　　　　‐-

／
/　　　　　　　　　　　　　　　ヽ　　　　　 ＼
／　　　　　　　　　　　　　　　　　　　　丶　　　　 ＼
 ／　　　/　　　 /　　　|　　　,　　　 　 丶　　　　　＼
 ／　　　 /　　　　/ 　 |　　　 ,　　　　　　丶　　　　　＼　
 

「アドビのソフトは高いし、フリーでホームページ制作ソフトを揃ええたい！」

って思った人もいると思います。
今回はフリーでなおかつ高機能なソフトを紹介していきたいと思います。


---------------------------------------------------------------------------
▼HTML・CSS･javaScript･XMLなど▼

■AptanaStudio（http://aptana.com/）
簡単に言うとドリームウィーバーのフリー版みたいなもの。
コードヒントを表示してくれたり、ソースフォーマットができたり･･･
とにかくいろんなことをサポートしてくれる、お勧めソフトでございます。

ホームページ作りたいならこれ！って感じです。
HTML5をこれからバリバリやりたい！って人は迷わずインストールしましょう！
Mac版、win版両方あります！





---------------------------------------------------------------------------


▼PHPなど▼


■PHPeditor（http://phpspot.net/php/phpeditor2.html）
その名のとおりPHPのコードを書くときに使います。
ファイルの構成の一覧表示が常にされていますので、作業がしやすいです。

PHP書くならこれかなあ。
PHPはサーバサイドプログラムですので、デスクトップ上で動作を確認する為にも
PHPをローカルで動かす手助けをしてくれるXAMPP(http://www.apachefriends.org/jp/xampp-windows.html)
を一緒にインストールするといいかもです。






---------------------------------------------------------------------------

▼Flashなど▼

■FlashDevelop（http://flashdevelop.jp/）
なんとFlashコンテンツをフリーで作成できます！
「リッチコンテンツが作りてーっす！オブジェクト指向プログラムをバリバリやりてーっす！」
って人は インストールしましょう！
コード主体なので、フラッシュ特有のキーフレームアニメーションがやりたい人は
別のフリーのFlashアニメーション制作ソフトを揃えましょう！
（Flashアニメーション制作ソフト「Suzuka」などがありますhttp://www.cty-net.ne.jp/~uzgensho/）






---------------------------------------------------------------------------


▼その他▼


■素材系
･GIMP（http://gimp-win.sourceforge.net/stable.html）
言わずと知れた、フリー版フォトショップともいえるソフトです。
フォトショップなどのUIになれた人にはちょっと、入り込みにくいかもしれませんが、
これだけ高機能なソフトがフリーというのは、世の中イカれているとしか言い様がありません！
南無！
Mac版、win版共にあり！

･InkScape （http://inkscape.org/index.php?lang=ja）
GIMPがフリー版フォトショップなら、
InkScapeはフリー版イラストレーターともいえるソフトです！
イラレに比べてベジェが若干扱いづらい点があるかもしれませんが、
慣れれば何も問題ありません！
こんな高機能なソフ（ry
南無！
Mac版、win版共にあり！

・IETester（http://www.my-debugbar.com/wiki/IETester/HomePage）
今だにIE6～7を使っている利用者の割合は高いです。
だけども、win7に入っているブラウザはIE8・・・これでは動作確認ができない！
って時に重宝するであろう、IEシミュレーターです。
これを使っていろんなサイトのレイアウトの崩れ具合を楽しむのもありかもしれません。
やっぱないかもしれません。




---------------------------------------------------------------------------


正直これだけタダでソフトが揃えられることを最初に知っていたら、
 たぶん何もソフト買わなかったんじゃないかってぐらいのものばかりです。
開発者に感謝！

【日常】パソコン

初めて買ったパソコンはIBMアプティバ。


X68000とかMSXとかなぜか憧れてまして。


世代違うのになぁー

あの時代のパソコンは妙なオーラがあった気がする。


それと、パソコンやる＝プログラムやる　みたいな雰囲気があったかもしれない。




ハードオフとかのジャンク品につまれた昔のパソコンが宝物に見えました。
DX-7とかのシンセサイザーも。



デザインも角ばっててカッコよかったなぁー。





なんだかなつい！

【日常】寒い

寒い。

暖房つけると乾燥する。

どうすりゃええねん。

【css3】ie6/ie7/ie8でcss3を実現するPIE

今回ご紹介するのはなんと、ie6/ie7/ie8でcss3の（一部）サーポートを行えるという
超兵器のようなhtcファイル（中身はjavaScript）です！



■使い方-------------------------------

▼PIE site
http://css3pie.com/



①上記のPIEのサイト右の「Download」をクリックするとファイルをダウンロードできるので、
解凍してできたフォルダを適当名前（pieなど）にする。

②その後、自分のサーバにフォルダごとアップロード

③スタイルシートにてcss3のコードを記述

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 30px;
-moz-box-shadow: #666 0px 2px 30px;
box-shadow: #666 0px 2px 30px;
behavior: url(pie/PIE.htc);


ここでポイントとなるのが最後の行
「behavior: url(pie/PIE.htc);」です。

この「behavior」というプロパティですが
こちらはIE独自のものらしく、IEのみにファイルを読み込ませることができるらしいです。
ここで先ほどダウンロードしたPIE.htcを読み込んでいます。

ファイルのパスも特殊で、cssからの相対パスではなく、
このcssを読み込んでいるhtmlからの相対パスを記述する必要があります。 

 ようするに今回の場合はhtmlファイルとpieフォルダが同階層ということになります。



PIEの使い方は以上です。
PIEのサイトの方にcss3のジェネレーター（？）がありますので、
そのコードを貼り付けるだけで、ie6以降の全てのブラウザで角丸やドロップシャドウが実現できる・・・！

いい時代になったもんやで。



ちなみにこのサイトのトップページでテスト的に実装しています。

■注意-------------------------------

 ひとつ残念なのは、相変わらずオペラではグラデーションがサポートされておらず、
このPIEを使用してもグラデーションを描画することができないことです！


オペラめ・・・



それから最後に、
サーバによってはhtcファイルをデフォルトでは扱えない場合があるようで
その場合はhtcファイルと同じディレクトリに「.htaccess」をおいてあげる必要があります。

.htaccessの中身に
「AddType text/x-component .htc」
を記述してあげる。



▼参考サイト
htcが効かないサーバの場合

【Flash】シューティングゲーム的な

Flashはこちら


シューティングゲーム的なものを作り始めました。テキトーについこのあいだから。


画像がちょっとつくだけでもかなり雰囲気が変わり、「ゲームってのはグラフィックも大切なんやな～」
とか思いました。


もっと音楽とか敵キャラとかガッツリ作りたいんですが、いかんせん平日は時間がありません


時間くれ！！！！




「時間ないとか言っちゃう人は、それ言い訳だから～」
って誰かが言ってましたね。知りません。

【Flash】TwitterとBox2Dの連携

Flashはこちら


Twitterから文字列を検索し、
その文字列を含むつぶやきを行ったユーザーのアイコンの画像を、
Box2Dのオブジェクトに反映する・・・・
というFlashを制作しました。

どうやら、TwitterAPIの仕様変更でFlashから直にTwitterのアイコン画像を
読み込むことができなくなったようで、PHPを途中にかませて画像を生成・・・
それをFlashが読み込んでいます。

▼FlashからTwitterのアイコン画像のURLをPOSTし、画像を生成するPHPプログラム。

$url = $_POST["url"];
 header("content-type: image/jpg");
$image = imagecreatefromjpeg($url);
imagejpeg($image);
  imagedestroy($image);   


以上、説明が全然たりない解説でした。
詳しい解説は、また・・・明日！

お絵かき掲示板BBSNoteを設置する。

自分のホームページ用にＰＢＢＳ（お絵かき掲示板）を設置方法を調べたんですけど、これがなかなかに難しかったのでメモ。

今回つかわせていただいたＰＢＢＳは「BBSNote V8 b版」設置方法もホームページに丁寧に書いてあり、大変ありがたかったです。

cgiファイルに書かれているＰｅｒｌのパスを以下のように設定。（これはサーバーによって設定が異なるようです）

#! /usr/bin/perl



サーバーにアップロードする際にFFFTPのオプション→環境設定→転送モードで、

拡張子txtやcgi、html等ははアスキーモードでアップロード。その他の画像やjar、zipファイルはバイナリモードでアップロードしました。

その後、コマンド→属性の変更でパーミッションの設定を行う。今回は公式ページのマニュアルのアップロードページに書かれている「パーミッションの設定」通りに設定しました。



それから現在レンタルしているサーバーが、cgiのディレクトリとhtmlを格納するディレクトリが別れているタイプでそれだと若干設定がめんどうなので、htmlファイルとcgiファイルをまとめるために、htmlをおくディレクトリに以下を書き込んだ「.htaccess」ファイルを置く必要がありました。

Options +ExecCGI
AddHandler cgi-script .cgi
AddHandler cgi-script .pl



この.htaccessファイルなんですが、デスクトップ上でhtaccess.txtというテキストファイルを作りそれをサーバーにアップロードした後名前を、「.htaccess」書き換えてあげる必要があります。以上で設定は終わりです。





今までＡｃｔｉｏｎＳｃｒｉｐｔやＪａｖａＳｃｒｉｐｔは触ったことがありましたが、cgiは触ったことがなかったので、勉強になりました。やっぱりこれだけでお絵かき掲示板を自分のサイトに作れるのは大変便利ですよね！