『webデザイン』の最近のブログ記事

Webデザイナーの僕がインストールしている無料ソフト（Windows編）

パソコンの調子が最近悪うございまして。これを機に買い替えを検討してるんだけど、セットアップのことを考えると、気軽に乗り換えられないというジレンマ。

でも寿命は時間の問題っぽいので、来たるべきその日のために、インストールすべきフリーソフトをまとめておく。単なる自分的まとめだけど、ま、それはいつものことということで。。。

ファイル・フォルダ関連

dropbox
Dropbox
http://www.dropbox.com/
オンラインストレージ。行けるとこまで無料で使う方向で。
lhaca
+Lhaca
http://park8.wakwak.com/~app/Lhaca/
圧縮・解凍用。この辺は好みで。
lhaz
lhaz
http://www.chitora.jp/lhaz.html
圧縮・解凍用 その2。+Lhacaで対応できない、TAR / GZ / TBZ / BZ2 / 7Z / XZ / TXZ 用に。
flexiblerenamer
Flexible Renamer
http://hp.vector.co.jp/authors/VA014830/FlexRena/
ファイル名・フォルダ名の一括変換。助かるんです。
winmerge
WinMerge
http://www.geocities.co.jp/SiliconValley-SanJose/8165/winmerge.html
ファイルやフォルダの差分を取りたい時に。差分をHTMLで出力する機能がすごい。

ブラウザ関連

ietester
IETester
http://www.my-debugbar.com/wiki/IETester/HomePage
旧バージョンのIEチェックには欠かせませんね。
website_exp
Website Explorer
http://www.umechando.com/webex/
サイトのデータを一括DL。FTP情報がないときに。
capture_staff
Capture STAFF
http://www.vector.co.jp/soft/win95/art/se119281.html
画面キャプチャ用。IEでキャプチャ撮りたい時に使ったり。

サーバ関連

filezilla
FileZilla
http://sourceforge.jp/projects/filezilla/
ガンブラー問題以降、FTPはこれで。

フォーマット変換

icon_trans
@icon変換
http://www.towofu.net/soft/aicon.php
favicon作成用。ドラッグ＆ドロップで簡単作成。
quickmedia
Quick Media Converter
http://www.cocoonsoftware.com/
動画・音声のファイルフォーマット変換ソフト。たまに失敗するけど、気にしない。
flash_dec
Flash Decompiler Trillix
http://www.flash-decompiler.com/
Flashのデコンパイラ。swfファイルをflaファイルに変換してくれちゃう便利ソフト。

メール・チャット関連

skype
Skype
http://www.skype.com/intl/ja/get-skype/
チャット用。みんな好きなやつ。
thunderbird
Thunderbird
http://mozilla.jp/thunderbird/
Mozillaのメーラー。クライアントサイドではこれが一番使いやすいかな。

ユーティリティ

sakura
サクラエディタ
http://sakura-editor.sourceforge.net/
テキストエディタで無料ならこれかな。
rulerx
ものさしX
http://www.vector.co.jp/soft/win95/util/se013576.html
画面上の寸法を図りたい時に。Firefoxのスクロールバーは横幅15pxですね。
freemind
FreeMind
http://www.freemind-club.com/download.htm
マインドマップ作成用。あれこれ検討するときに。

以上、そんな感じで。
他の人って、どんなソフト使ってるんだろ。
これいいよ！ってソフトがあれば、たれこみプリーズです。

固定リンク

VMWare FusionをiMacにインストールしてWindows7を使う

どうやらパソコンの寿命が近付いてるらしい。
電源入れても途中で固まったり、ふと気付いたら画面がブルー一色になってたり･･･。前のパソコンが突然死した苦い経験があるので、今回は早めに対策。ということで、iMacを導入してみました。

iMac 21.5inch

iMac到着後、開封の儀式を終え、さあこれから活用するぞ！と喜んだ日の2日後、新型iMacが発売に。ちょ、、appleさん。

ま、それはともかく、そのうち仕事で使う日も来るだろうということで、VMWare Fusionをインストールしてみた。ちなみにVMWare Fusionっていうのは、MacでWindowsを動かすための仮想化ソフトのことで、どうやらBootcampよりも便利らしい。

どう便利かというと･･･

Bootcamp
・MacとWindowsのHDDとメモリを完全に分割する
・OS切替のたびに再起動しないといけない

Fusion
・仮想環境なので、HDDもメモリも共有可能
・アプリケーションを切り替える感じでOSの切替が可能

つまり、Macの中で簡単にWindowsが動かせてしまうという「目からうろこ」なソフトなんです。

早速、VMWareとWindows7をゲットしインストール開始。
そして、一時間後･･･、
インストール完了です！

VMWare Fusionをインストール

取り急ぎ、Windows版Firefoxのインストールにトライしたところ、普通に完了。これは便利。早くadobe関連のソフトを入れて、制作環境を整えたいな。

ちなみにWindows7購入の際は、お得なDSP(=Delivery Service Partner) 版を利用しました。ハードウェアとセット購入することでOSが安く手に入るこのシステム、今回初めて知ったけど、これって常識？PCにプリインストールされているOSと同じ扱いってことなのかな。

固定リンク

MT5で使いそうなタグを自分用にまとめておく

去年の11月にリリースされた「MT5 （Movable Type 5）」。
「管理画面が良くなった」とか、「カスタムフィールドが便利になってる」とか、聞こえてくる噂は肯定的なものばかり。

そんなMT5を使う機会がやっと訪れて、ワクワクしながら使い始めたんだけど、意外にMT4系と同じ感じというか、違和感なく使えるっていうのか。なんかメリットを活かしきれてないような感じで、やや拍子抜け...。しかも、久しぶりすぎて、MTのタグをほぼ忘れているという残念な状態。

まあ、でもせっかく使ってみたことだし、次の機会のために、今回おさらいしたMTタグ（一部、MT5の新規タグ）を自分用にまとめておく。


[ブログ関連]

文字のエンコードを表示　（リファレンス）
<$mt:PublishCharset$>
ブログの説明文を表示　（リファレンス）
<$mt:BlogDescription$>
ブログの名前を表示　（リファレンス）
<$mt:BlogName encode_html="1"$>
ブログのURLを http:// から始まる絶対パスで表示　（リファレンス）
<$mt:BlogURL$>
テンプレートモジュールや、外部ファイルを読み込む　（リファレンス）
<$mt:Include module="モジュール名"$>
ブログ記事の一覧を表示　（リファレンス）
<mt:Entries include_blogs="children" lastn="5">
	<$mt:Include module="ブログ記事の概要" display_blog_name="1"$>
</mt:Entries>
この「include_blogs="children"」がMT5的。
記事があれば、ブログ記事の一覧を表示　（リファレンス）
<mt:If tag="BlogEntryCount" include_blogs="children">
    <mt:Entries include_blogs="children" lastn="5">
        <mt:EntriesHeader>
        <ul>
        </mt:EntriesHeader>
            <li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a> - <a href="<$mt:EntryBlogURL$>"><$mt:EntryBlogName$></a></li>
        <mt:EntriesFooter>
        </ul>
        </mt:EntriesFooter>
    </mt:Entries>
</mt:If>
記事一覧ページのタイトル画像を、カテゴリに応じたものに切替
<mt:If name="datebased_archive">
        <h2><$mt:ArchiveTitle$>アーカイブ</h2>
<mt:Else>
        <h2><img src="<$mt:BlogURL$>images/ttl_<$mt:CategoryBasename$>.gif" alt="<$mt:ArchiveTitle$>" /></h2>
</mt:If>
サイドバーの「カテゴリ一覧」でカレントカテゴリにclass="current"を付与
<mt:If name="category_archive">
<mt:SetVarBlock name="thisArchive"><$mt:ArchiveTitle$></mt:SetVarBlock>
</mt:If>
<mt:If name="currentArchive" eq="$thisArchive">
        <mt:If tag="CategoryCount">
            <li class="current"><a href="<$mt:CategoryArchiveLink$>"<mt:If tag="CategoryDescription"> title="<$mt:CategoryDescription remove_html="1" encode_html="1"$>"</mt:If>><$mt:CategoryLabel$></a>
        <mt:Else>
            <li class="current"><span><$mt:CategoryLabel$></span>
        </mt:If>
<mt:Else>
        <mt:If tag="CategoryCount">
            <li><a href="<$mt:CategoryArchiveLink$>"<mt:If tag="CategoryDescription"> title="<$mt:CategoryDescription remove_html="1" encode_html="1"$>"</mt:If>><$mt:CategoryLabel$></a>
        <mt:Else>
            <li><span><$mt:CategoryLabel$></span>
        </mt:If>
</mt:If>

[Webサイト関連] （MT5）

ウェブサイトの名前を表示　（リファレンス）
<mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite>
単体の「<$mt:WebsiteName$>」は、使えないっぽい...
ウェブサイトのURLを http:// から始まる絶対パスで表示　（リファレンス）
<mt:BlogParentWebsite><$mt:WebsiteURL$></mt:BlogParentWebsite>
URLも単体じゃ使えない...
ウェブサイトの名前とURLを変数に入れる　（リファレンス）
<mt:SetVarBlock name="siteName"><mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite></mt:SetVarBlock>
<mt:SetVarBlock name="siteURL"><mt:BlogParentWebsite><$mt:WebsiteURL$></mt:BlogParentWebsite></mt:SetVarBlock>
ってことで、変数化することに。
ウェブサイトの名前とURLを変数から出力　（リファレンス）
<a href="<$mt:Var name="siteURL"$>"><$mt:Var name="siteName"$></a>
ちょっと使いやすくなりました。

ということで、完全に自分用の「MTタグまとめ」でした。
このページ、僕のアクセスが一番多くなるんだろうな。...いいんです、自分用なので。

固定リンク

リキッドレイアウトで、色分けされた2カラムを実現したい

リキッドレイアウトのコーディングでつまづいたので、今後のためにメモ。
作りたかったのは、下図のようなデザイン。

リキッドレイアウトのイメージ図


まあ、一般的な2カラムなんだけど、サイドバー（#sub）を幅固定にしたリキッドレイアウト。
背景色の色分けは画像使わずに行こうと思ってCSS書いてみた...けど、思ったようにレンダリングされない。

で、ググったり、本読んだり、散々試したあげくできあがったのが、このサンプルページ。

HTMLのソースは以下。

<body>
<div id="container">
	<div id="header">#header</div>
	<div id="contents">
		<div id="main">
			<div id="mainInner">#main</div>
		</div>
		<div id="sub">#sub</div>
	</div>
	<div id="footer">#footer</div>
</div>
</body>

このHTMLに対してCSSを当てていくわけだが、考え方は下図参照。

リキッドレイアウトでのコーディング方法概念図

ポイントは、メインエリア(#main)とサブエリア(#sub)の左側に、それぞれネガティブマージンを入れているところ。
左エリアの色分けは、#mainから出したborderと#subのbackground-colorで実現させた。

そんなこんなで、最終的なCSSは以下の通り。

#contents{
	padding-left:240px;
	background-color:#F5F5F5;
	overflow:hidden;
	zoom:1;/*for IE6*/
}

#main{
	float:right;
	width:100%;
	margin-left:-240px;
	border-left:240px solid #EF4;
	background-color:#F5F5F5;
}

#mainInner{
	margin:0 50px;
	padding:50px 0;
}

#sub{
	float:right;
	width:240px;
	margin-left:-240px;
	background-color:#EF4;
}

以上、簡単に作り方をまとめてみた。

これまで固定幅レイアウトを扱うことが多かっただけに、リキッドレイアウトにとまどい、思いのほかコーディングに時間がかかってしまった。少しずつでもいい、引き出しを増やしていくぞ！と誓った1月最後の夜でした。

≫リキッドレイアウトのサンプルダウンロードはこちら

固定リンク

福岡のweb制作会社まとめシリーズ 第3弾

最近、福岡にもwebの会社が増えてきたのか、知る機会が増えただけなのか分からないけど、心当たりの制作会社が増えてきたので、再度まとめ。

以前の記事は下記よりご覧ください。


では早速、制作会社一覧をどうぞ。

・ペンシル
なにかと有名な福岡のwebコンサル会社。SEOのこと教えてください･･･。
[主な実績] 三好不動産, シノケン
・リメディア
須崎公園の近くにある制作会社。本社は東京。美工社がやってる「リ・メディア」といつもゴッチャになるんです･･･。
[主な実績] 三井のリフォーム, バンタンデザイン研究所
・フロッグマンオフィス
テレビ西日本系サイトを連発する西公園のふもとの制作会社。少人数なのに制作ペースがすごいんです。
[主な実績] テレビ西日本, 華丸･大吉のなんしようと？
・フリーメソッド
まじめに取り組む姿勢が見える制作会社。会社は住吉神社そば。
[主な実績] コモス・スタイル, 天国社
・キャッチアップ
システムに強い制作会社。コーポレートサイトに特化したCMS「BaserCMS」がリリース間近らしく、ほんと楽しみ。
[主な実績] おきグル, みえスマ
・ヌーラボ
Backlog(バックログ)に続き、オンラインドローツール「Cacoo」をリリース。中洲のオフィスがめちゃキレイ。
[主な実績] バックログ, Cacoo
・プロボ
玄人好みの制作会社。CSS効いてない？と思わせる自社サイトが、このご時世、逆に目立ってうらやましい。
[主な実績] アトリエ・トア, 独華陶邑
・CGFM
夫婦二人でやってる制作会社。強みは人柄だと思います。
[主な実績] ふくおか生涯学習ひろば, ブルーオーシャンシステムズ株式会社
・ブランコ
Movable Typeマスターがいるデザイン事務所。最近、サイトをリニューアル。効果抜群らしいので、穴が開くほど見るつもり。
[主な実績]  ライズ株式スクール, 九州大学出版会
・小窓屋
妻とやってるwebデザイン事務所。いわゆる宣伝です。
[主な実績] ダイエットプランナースクール, てのひら盆栽教室 櫻苑

以上、福岡のweb制作会社をまた10個追加してみた。これでシリーズ合わせて30個。だいぶ、まとめらしくなってきて、ちょっぴり悦にひたってます。次回に続く･･･（といいな）。

[追記]
今回のまとめ、裏テーマは「僕とちょっとずつつながってる会社」でした。詳しくは僕まで。

固定リンク

 1  |  2  |  3  | すべての記事  ＞古い5件

ページの先頭へ戻る