YATのBlog» YATのBLOG http://wp.yat-net.com WEBデザインをする上で必要な知識・情報・技術等の記述や、参考になるサイトの紹介等を掲載しています。 Tue, 22 May 2012 02:10:36 +0000 ja hourly 1 http://wordpress.org/?v=3.3.2 JavaScriptのテスト駆動開発（TDD）に関して、QUnitを使って勉強してみた。 #jsdokusho http://wp.yat-net.com/?p=2966 http://wp.yat-net.com/?p=2966#comments Tue, 22 May 2012 00:18:56 +0000 YAT http://wp.yat-net.com/?p=2966

こんにちは、YAT(@yat8823jp)です。5/19のjsdokushoという勉強会に参加してきました。
今回は「JavaScriptのテストに関する勉強会」と言うお題だったのですが、普段より人数が多かったのでグループ単位でワークショップ形式で行い
それぞれのグループごとに別々のフレームワークに関して仕様や使い方を調べると言うやり方で進めました。

  1. 1.テストとは
  2. 2.Qunitの仕様について
  3. 3.実際に触ってみる
  4. 4.クリックイベントで確かめてみる
  5. 5.最後に

1.テストとは

僕が入ったグループはQUnitと呼ばれるフレームワークを調べることになりました。QUnitはjQueryをベースにしたテストユニットです。
僕自身最近はJavaScriptを直接書くより、断然jQueryを利用して書くことのほうが多いので、このニュアンスだけでちょっと分かりやすそう！といった期待を持ってました。（ちなみにjQueryに依存しないように作られているので、JavaScriptのテストも出来ます。）

まずテストがどういうものか分からない方も居ると思うので簡単に解説すると、プログラミングで何かを作る時と言うのは、必要な機能を持った関数やパーツ（以下ユニットと呼びます。）を作って行くと思います。
（デザイナーさんだと、PhotoshopやFireworksでデザインするとき、パーツごとにグルーピングするといった感覚に近いかなと思います。）

そしてそれぞれ完成したユニットが正常に動作するかをチェックし、全体が正常に動作するかという判断を行っていくのですが
テストと言うのは、それぞれのユニット単位に対して様々な値を与え、想定した値が帰ってくるか、設計通りの動作をしているかを確認することを指します。

2.Qunitの仕様について

Qunitはqunit.jsを読み込み、実際のjsファイルとテストしたいtestのjsファイルをそれぞれ読み込んで動作せる事でテストを行う事ができます。
フレームワークのファイルはjQueryのQUnitの項目にgithubへのリンクが張ってあり、そちらからダウンロードが出来ます。

Qunit Download
https://github.com/jquery/qunit

解凍すると様々なファイルが入っています。今回利用したのは

  • qunitフォルダ
  • testフォルダ

と、その中身です。

Qunit.jsで提供されているメソッドは下記の通りです。

Setup

test( name, expected, test )
Add a test to run.
asyncTest( name, expected, test )
Add an asynchronous test to run. The test must include a call to start().
expect( amount )
Specify how many assertions are expected to run within a test.
module( name, lifecycle )
Separate tests into modules.
QUnit.init( )
Initialize the test runner (if the runner has already run it’ll be re-initialized, effectively resetting it). This method does not need to be called in the normal use of QUnit.
QUnit.reset( )
Automatically called by QUnit

Assertions

ok( state, message )
A boolean assertion, equivalent to JUnit’s assertTrue. Passes if the first argument is truthy.
equal( actual, expected, message )
A comparison assertion, equivalent to JUnit’s assertEquals.
notEqual( actual, expected, message )
A comparison assertion, equivalent to JUnit’s assertNotEquals.
deepEqual( actual, expected, message )
A deep recursive comparison assertion, working on primitive types, arrays and objects.
notDeepEqual( actual, expected, message )
A deep recursive comparison assertion, working on primitive types, arrays and objects, with the result inverted, passing when some property isn’t equal.
strictEqual( actual, expected, message )
A stricter comparison assertion then equal.
notStrictEqual( actual, expected, message )
A stricter comparison assertion then notEqual.
raises( block, expected, message )
Assertion to test if a callback throws an exception when run.

Asynchronous Testing

start( decrement )
Start running tests again after the testrunner was stopped. See stop().
stop( increment )
Stop the testrunner to wait for async tests to run. Call start() to continue.
API document

仕様に関してはこんな感じなんですが、実際に触ったものを見ないと分かりづらいと思うので、次項で、簡単なプログラムを元に説明したいと思います。

3.実際に触ってみる

まず、解凍して一番最初のディレクトリにjsと言うフォルダを作成しました。ここに実際に開発するjsファイルを保存します。
今回はmath.jsと言うファイルを作成しました。

function math(x){
	return x*x;
};

引数xで受け取った値を2乗して結果を返す単純なプログラムです。
次にこの作成したプログラムをテストするファイルを作成します。
トップディレクトリにあるtestディレクトリの中にtest-math.jsというファイルを作成します。

test('2乗計算式', function(){
    equal(math(2), 4);//引数2を渡し、結果が4と想定
    same(math(2), 6);//引数2を渡し、結果が6と想定
});

実際関数に対して与えたい引数を渡し、想定した結果を記述します。
equalというAPIを利用していますが、これは第一引数と第二引数がイコールかと言う判定です。

上記で、実際の開発用ファイルと、テスト用ファイルが完成したので、動作を確認します。
動作確認はブラウザでの検証になるので、htmlファイルに記述します。
今回はtestフォルダに入っている、index.htmlファイルを修正して利用しました。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>QUnit Test Suite</title>
	<link rel="stylesheet" href="../qunit/qunit.css">
	<script src="../qunit/qunit.js"></script>
	<script src="../js/math.js"></script>
	<script src="test-math.js"></script>
</head>
<body>
	<div id="qunit"></div>
	<div id="qunit-fixture">test markup</div>
</body>
</html>
上記のhead部分で、各ファイルを読み込む順番は正しく設定して下さい。
  • 1.QUnit(qunit.js)
  • 2.開発用ファイル(math.js)
  • 3,テスト用ファイル(test-math.js)

実際の画面
実行結果

test-math.jsにて2つの記述をしていました。その為、実行結果の方でそれぞれの結果が表示されます。
1番目の方は、渡した引数と想定した結果が正しい値な為、緑色の文字でOKと表記されています。
一方2つ目の記述に関しては渡した引数が1つ目のものと同じなのに、想定している結果が異なっています。これは当然誤った値になるので、赤色で間違っているという結果を表記しています。
Expend: 6というのは、equal関数で第二引数に渡した「6」と言う値です。想定した計算結果が間違っていた数字です。
Resoltという項目で算出された結果である「4」が帰ってきています。
Diffの項目で6が誤っており、正しくは4であると記述までしています。

このように、ある程度の値と結果を想定しておき、プログラムが正常に動作するか、予測通りに動作しないかというテストを行うことが出来ます。

4.クリックイベントで確かめてみる

さっきの項目では、演算においてのテストでしたが、これ以外にjQueryを利用してもテストしてみました。
サンプルとして、クリックした要素をmargin-leftで右側へ動かすようにし、親要素に当たるdivのボックスをはみ出す場合は動作させないようにしました。

<div id="testblock">
	<a href="#" id="mouse_event" onClick="move_r(100)"></a>
</div>

#testblock{
	width:500px;
	height:50px;
	padding:10px;
	background:#ccc;
}

#mouse_event{
	width:30px;
	height:30px;
	background:#f00;
	display:block;
}

開発用jsファイルを上記と同様に、jsフォルダに設置します。

function move_r(data){
	var move_data = data;
	var parent_data = parseInt($("#mouse_event").parent('div').css('width')); //parseIntを利用して親要素の幅の値を取得
	
	if(parent_data >= move_data + 30){//受け取った引数と動かす対象の幅（30）を加算し、親要素の幅を超えなければアニメーションを実行
		$("#mouse_event").animate({
			'margin-left':move_data
		});
		return true;
	}else{
		return false;
	}
}

module("DOM操作");
test("move_r", function(){
	equal(move_r(470),true,"OK");
	equal(move_r(470),false,"NO");
	equal(move_r(5000),false,"NO");
});

他にも書き方は色々ありますが、僕はシンプルにif文分岐を使い、アニメーションすれば”true”を返し、そうでなければ”false”を返すようにし、テストさせました。

5.最後に

上記で述べたとおり、APIはequal意外にもありますし、他のサイトでも色々参考になるものが多数有りました。ただ、参考にしたサイトと言っても数年前の情報だったりもします。現在では廃止になったAPIもありますので、参考にされる際は自己責任のもとご活用下さい。

参考にさせていただいたサイト等

]]> http://wp.yat-net.com/?feed=rss2&p=2966 0 ブログリニューアルしました。変更箇所の要点を「デザイン」、「ソース」、「チューニング」から。 http://wp.yat-net.com/?p=2956 http://wp.yat-net.com/?p=2956#comments Tue, 15 May 2012 00:37:35 +0000 YAT http://wp.yat-net.com/?p=2956

タイトル通りなんですが、ブログをリニューアルしました。狙ってるわけではないですが、このブログは大体1年～1年半周期でデザインを変えています。デザインを考えるのって楽しいんですよね。

  1. 1.変更点-デザイン部分
  2. 2.変更点-ソース部分
  3. 3.変更点-チューニング
  4. 4.まとめ

1.変更点-デザイン部分

Design

コンテンツ部分

まず大きな改善点として、コンテンツの表示部分を大きくしました。
コンテンツ部分比較
1行の表示文字数が増えた分、目線の折り返し回数が減ったため、以前より読みやすくなったかと思います。
ただ、1行が長くなるということは目線を戻すまでの距離が増えますし、文字数自体も増えすぎてしまうため、文字サイズを若干大きくする事で調節しました。

サイドナビ

僕のブログであまり使われない、ナビゲーションにあたるサイドナビはサイズを小さめにしています。
シングルカラムにしようかとも考えたのですが、ナビゲーションを使う人が0ではないので、コンテンツを読む際に邪魔にならない程度まで文字のサイズを落としました。
実際にサイドナビを使う場合には意識をそちらに移すので、このサイズでも機能はすると考えてこのサイズにしました。

ヘッダー

検索ボックスをヘッダーへ移動させました。リニューアル前はサイドナビの右側に設置していて、分かりづらかったかと思います。
元々はサイト内検索がさほど使われて居なかった為、あまり重要性を感じていなかったのですが、今回のリニューアルではその考えを辞めて、サイト内検索を使われるように想定し配置し直しました。

フッター

ヘッダーにあったTagCloudをフッターへ移動させ、Blogrollをフッターの下部に隠す形で移動させました。これらをここに持ってきたのはデザインが目的ではなくソースの移動の為というのが大きいです。

2.変更点-ソース部分

Source

組み立てに関しては大きな変更はそれほど無くて、ほとんど以前のソースをそのまま採用しています。ですが、どうしても変更したい箇所があって今回のリニューアルの理由に大きく関係しています。

上記の変更点-デザイン部分でフッターの項目に描いていますが、TagCloudをフッターへ移動させ、Blogrollをフッターの下部に隠す形で移動させました。

これは以前はヘッダーの部分に配置していて、見た目と使い勝手を目的として上部に表示していました。ですがこれだと肝心な記事と関係ないキーワードやリンクが最初のほうで乱立してしまい、ソース的には非常に良くないなと思ってました。

特に困ったのが、はてブされた時に表示される記事の説明にこれらのキーワードが並んだことで、はてブを見てくれるユーザーにとっては非常にマイナスだと感じ、どうしても変更しないとと考えていたんです。

そうなるとデザインから変えないとなと思うようになり、結局今回のような大きなリニューアルにまで発展しました。

3.変更点-チューニング

Tuning

プラグイン

まず見なおしたのはプラグインです。使っていたけど使うのを辞めたプラグインが放置したままだったりしていたので、まず現在利用しているプラグインが本当に必要かを判断し、3つほど利用をやめました。
それにともなって、利用していないプラグインを削除し、綺麗にしました。

また、使っていなかったプラグインを新たに導入もしました。チューニングを行うのに最適なプラグインでHead Cleanerというものがあります。
これはリニューアルしたら絶対に導入しようと思っていたのですが、リニューアルの少し前にmaka-veli.comのブログで「WordPress高速化に使えそうなプラグインを色々試してみた結果、けっこう早くなったのでご紹介。」と言う記事がポストされ
その流れでプラグイン作者のをかもとさんとmaka-veli.comの松本まさとさんとでツイッターにてやり取りすることがあり
をかもとさんが、「Head Cleaner (仮) で、なぜ速くなるのか？という記事を書いて下さいました。

これは僕にとっても非常に有益な事で凄くありがたかったので、この場を借りてお二人にお礼させていただきたいと思います。ありがとうございます:)
Head Cleanerプラグインページ

このプラグイン利用し、このブログもソースのチューニングを図っています。尚、このプラグインを入れてレイアウトが崩れたということは今のところありません。問題なく導入出来ました。

プログラム部分

以前から利用しているページネーション
ページネーション
表示に少し不備があったために、チューニングしました。
パフォーマンスの影響というわけではなく、バグを直したっていう事になります。
以前は2ページ目に進むと、1ページ目の表記が消えてしまい、戻ろうと思うと「戻るボタン」をクリックする必要があって、1ページごとに戻るか、一気に最初に戻るしか出来ませんでした。
当然これはユーザビリティに悪いので、きちんとした動作をするようにプログラムに手を加えました。プラグインがあるんじゃない？という事もよく言われますが、もともとプラグインの存在を知らなくて作ったという経緯があり、折角作ったしこのまま使いたい！というのが僕の率直な気持ちです。

ガジェットおよびバグ回収

リニューアルしたことをツイッターで流したところ、数名の方から「ここがおかしいよ」といった意見をくれたのですが、そんな中でSimple Colorsを運営しているまがりんさんが、隅から隅まで見た上で色々ご意見をくれました。ホントこの度はありがとうございます:)

特に気になった事が2点あり、ひとつは非常に重たいガジェットが存在していたこと、RSSのバグという点が発生しました。

ガジェットの方は以前まではそれほど重たくは無かったのですが、特にどうしても必要というものでも無かったので今回は削除しました。パフォーマンスを優先すると当然こうなりますね。

もう一つが結構厄介でRSSのバグなんですが、原因を調べていると「function.phpに空白があるとエラーを起こす」というケースなんですが、調べても特に空白はありませんでした。

kngy.netさんのWordPressのRSSエラー(XMLパースエラー)の対処法という記事で
「wp-includes内にある2つのファイルへそれぞれ1行ずつ追加する事で出来る解決方法」という事が書いてあり試しても見たんですが、これでも改善されず凄く困ってました。

結局解決策としては実際にバグの起こっているRSSファイル、http://wp.yat-net.com/?feed=rss2を開き、読み込みの最後の部分から、エラーを吐き出しているであろう投稿記事を特定し、空白文字を削除する事で解決できました。

リニューアル前はエラーは出ていなかったし、この投稿を弄っても居なかったので正直気持ち悪かったですが、ひとまずこれで改善できたので良かったです。

ただ、この記事を改善して、次また違う記事でエラーを吐き出したら・・・って思うとぞっとしました。

4.まとめ

とりあえずリニューアルはしましたが、まだまだ調節の必要な部分は出てくると思っているので、運営しながら手を加えていこうと思います。

チューニングに関してもデータベースのチューニングでも出来ることがあるだろうし、まだそういった未知の領域も勉強して手を加えたいなと考えてます。

最後に文中でも書きましたが、今回のリニューアルで参考にさせていただいた記事や、ご意見をくれた方々。本当にありがとうございました。

]]> http://wp.yat-net.com/?feed=rss2&p=2956 0 フリーイラストサイト12点。商用利用OK・著作権表示不要・無料。 http://wp.yat-net.com/?p=2594 http://wp.yat-net.com/?p=2594#comments Fri, 20 Apr 2012 00:31:39 +0000 YAT http://wp.yat-net.com/?p=2594

会社内の資料を作成する際やブログを書く際にイラストが欲しい！と思うことは多々あるんですが、ひとつひとつイラストを書いてると膨大な時間が掛かってしまいあまり現実的では無いかなと思います。

なので、ちょっとフリー素材として使えるイラストを公開してくれているサイトをご紹介すると共に、シェアさせて頂こうと思います。

こういったものをフリーで公開していただけるのは非常に有難く頭が上がりませんね。尚、商用利用可能で、著作権表記が出来るだけ不要のものをご紹介させて頂きますがWeb上で公開したりする際は念の為、各サイトのポリシーや利用規約をご確認下さい。

人物イラスト／イラストがすべて無料 「イラストAC」
イラストAC
人物イラスト／イラストがすべて無料 「イラストAC」
商用利用可能、EPS有り、クレジット表記不要でイラスト2万点以上を公開しているかなり大きなサイトです。ビジネス、医療、人物、動物などカテゴリ数も盛りだくさん！

フリーイラスト素材 - 商用利用可の無料イラスト素材集「ピクト缶」
ピクト缶

商用利用可の無料ベクター素材。印刷用、ホームページ作成に使えるフリーイラスト素材集です。加工制限無し、使用報告＆リンクは必須ではありません。と非常に使いやすいです。

商用利用可能なアイコン・イラスト素材ならICON HOIHOI
ICON HOIHOI

ウェブサイト制作に！アプリアイコンに！企画書の挿絵に！サイト内容不問・利用報告不要・クレジット表記不要・リンク不要で、商用利用OK、加工利用OK！

AI・EPSのイラストレーター素材が全て無料！ハイクオリティなイラストなら無料イラスト素材.com
無料イラスト素材.com

全てのイラスト素材が無料！商用・非商用問わず利用できます。事前登録や連絡も必要ありません。

イラスト｜WEB素材｜Digital design studio Lemon
Lemon

個人、法人（商用利用）問わず、ホームページやブログ等で利用できます。無料素材をご利用の際特に連絡の必要はありませんが、コメント等あると喜ばしいとのことです。

商用可能な無料フリーイラスト素材 Stock Material ストックマテリアル
ストックマテリアル
商用可能な無料フリーイラスト素材 Stock Material ストックマテリアル

営利/非営利の目的に関わらず、商用のホームページ・広告・ゲームなど、様々な媒体で誰でも自由にサイト内のイラスト素材を使用できます。クレジット表記不要、素材の加工OK

ソザイヂテン　VOL.1　ビジネス・オフィスシーン
ソザイヂテン　VOL.1　ビジネス・オフィスシーン
ソザイヂテン　VOL.1　ビジネス・オフィスシーン
個人、商用サイトOK！リンクを貼ってほしいと考えていますが、ダメな場合は連絡を入れるだけでもOKです。無料・加工OK。商用以外であればプリントアウトモノでもOKです。

ソザイヂテン　VOL.2　女性の暮らし・日常生活
ソザイヂテン　VOL.2　女性の暮らし・日常生活
ソザイヂテン　VOL.2　女性の暮らし・日常生活
個人、商用サイトOK！リンクを貼ってほしいと考えていますが、ダメな場合は連絡を入れるだけでもOKです。無料・加工OK。商用以外であればプリントアウトモノでもOKです。

ソザイヂテン　VOL.3　学校 幼稚園 キッズ
ソザイヂテン　VOL.3　学校 幼稚園 キッズ
ソザイヂテン　VOL.3　学校 幼稚園 キッズ
個人、商用サイトOK！リンクを貼ってほしいと考えていますが、ダメな場合は連絡を入れるだけでもOKです。無料・加工OK。商用以外であればプリントアウトモノでもOKです。

イラストレーター わたなべふみ 子供と動物のイラスト屋さん
イラストレーター わたなべふみ 子供と動物のイラスト屋さん
イラストレーター わたなべふみ 子供と動物のイラスト屋さん
個人サイト・企業サイト・法人サイト、アフィリエイトサイト・ブログ等にて無料で利用できます。リサイズ意外の加工は出来ません。サイトのアクセスが1日1000PVを超えるサイトの場合はリンクウェアとなります。

商用利用/加工利用可能な無料フリーイラストアイコン素材 -エムスタジオ
エムスタジオ
商用利用/加工利用可能な無料フリーイラストアイコン素材 -エムスタジオ
商用利用/加工利用可能で無料フリーイラスト素材。エムスタジオへのご利用報告、リンク報告、また素材へのコピーライトの表示は必要ありません。

ガーリー素材 | 無料フリーイラスト素材配布サイト
ガーリー素材
ガーリー素材 | 無料フリーイラスト素材配布サイト
女性の好むガーリーテイストのフリー素材です。個人、法人利用関係なく無料で利用できます。加工も可能。報告や著作権表記等必要ではありませんが、あると喜ばしいです。
]]> http://wp.yat-net.com/?feed=rss2&p=2594 3 デザインする上で要素を目立たせるという事 http://wp.yat-net.com/?p=2574 http://wp.yat-net.com/?p=2574#comments Thu, 05 Apr 2012 01:37:07 +0000 YAT http://wp.yat-net.com/?p=2574

デザインやコンテンツ制作の打ち合わせをしていると必ず出てくる「目立たせる」という行為。
人によって「赤くして」とか「大きくして」と言った抽象的な言葉で表現されますが、僕ら制作者はその言葉をそのままの意味で捉えるわけには行けません。

何故なら、依頼者が何か目的があってそこを赤くする必要がある、大きくする必要があるならばそれを取り入れば良いです。ですが、その目的がその要素を目立たせたいという場合では話が変わってきます。
そうなると、本来の目的は「目立たせること」であって、決して赤くすることや大きくすることが目的では無いため、実際に赤くしたり、要素を大きくしても目立たなければ目的が達成されず満足されることは無いでしょう。
赤くして欲しい、大きくして欲しいと言うのは、依頼した人の中にある目立たせる事に直結したイメージである場合が多いので、実際に何を望んでいるのかを読み取ることが大事です。

  1. 1.要所を抑えて的確に伝える
  2. 2.目立たせるために使うテクニック
  3. 3.情報の整理
  4. 4.参考文献

1.ポイントを抑えて的確に伝える

りんご

上の写真はCheckという文字を目立たせる為に「赤くする」事と「大きくすること」を採用したものになります。分かりやすいよう極端な例を上げましたが、実際にはあまり目立ってませんよね？

りんご

一方こちらは赤くなければ、大きくもありません。ですがキチンと目立っています。何が違うのでしょうか？

単純に文字は小さいですが、メインビジュアルであるりんごの「赤」に対して補色である「青」を採用し、背景が黒なので明るめに彩度を調節してより目立たせています。

このように、文字を配置するだけでも様々な理由があり、それが理にかなっているかが非常に重要になります。

2.目立たせるために使うテクニック

テクニック

デザインは様々な理由やルールから成り立っていて、それらを理解することで活用できるテクニックが多く存在しています。
言い換えれば、理由やルールが分からないまま安易に多用していくと仕上がりに対して違和感が出てしまったり、効果が半減したりといった物が出来上がるでしょう。

時々「ドロップシャドウを多用しすぎる。」「エフェクトをかけすぎている」と言った言葉を耳にしますが、それらの多くの原因が明確な目的から外れた施策ではないかな？と感じます。

まず「何故それを利用するのか」を深く考えてみる事は大事な事です。

今回は、8種類の前注意的な要素：IDIA.JP をご紹介させていただきたいと思います。

色調

色調
目立たせたい箇所の色味を変えることで効果を出します。補色を使えばより効果は大きくなります。

位置

位置
一定のリズムの中で目立たせたい部分をずらすだけでも十分目立ちます。

明度

明度
全体が暗めの配色パターンに対し明るい要素を持ってくることでその部分が浮き上がったように。また、全体が明るめの配色に対して暗めの要素を持ってくることでその部分がへこんだような印象を受けて際立ちます。

向き

向き
位置と同じ事が言えますが、これは位置はそのままで向きを変えただけです。角度を変えるだけでも要素とのあいだに余白がしっかりとれていれば十分に目立ちます。

彩度

彩度
彩度の低い中に高彩度の要素を持ってくると同じ基調の中でも目立たせることができます。

大きさ

大きさ
小さいものより大きい物が目立つ事を利用した目立たせ方です。周りの要素より大きい物は注目を集めますね。

質感

質感
他の部分と質感を変えることで目立たせる手段です。よく見かけるものとしてはボタンに見立てたグラデーションとかが上がりますね。

形状

形状
形状そのものを変えることで目立たせます。

以上で8点になります。これらはリンク先にも記載されている通り、単独で活用しても複合で活用しても効果的です。
それぞれ目立たせるために行っている事は違いますが、共通して言えるのは「一定のリズムに対して、目立たせたい部分に変化をもたらせる」という事です。

規則正しく並んだ物というのは人間の目で見ると安心感を感じて意識しづらくなります。
人が何かに目を奪われる、意識を奪われる時はそこに違和感を感じる時であり、デザインを行う上で要素を目立たせるには欠かすことの出来ない重要なポイントとなります。

3.情報を整理する

上記において目立たせるための施策は少し理解出来たかと思いますが、勿論これが全てではありませんし、テクニックそのものが大事なわけでもありません。

デザインは見せる側と、見る側のコミュニケーションを円滑に行うためのものであり、それを機能させることにあります。
今回書いた「目立たせる」という事に関してもどの要素を、どういった理由で目立たせる必要があるのか？他の要素とどれだけ差を付けるのか？と考えることは色々とありますので
まず情報をしっかり整理する事が必要不可欠です。

その上で必要となるテクニックやルールと言った引き出しをどれだけ持っているかがデザイナーとしての武器になりますし、強みになると思いますので、日々のインプットや自身の考えを持つことは非常に大事だと言えます。

4.参考文献

]]> http://wp.yat-net.com/?feed=rss2&p=2574 2 大阪本町にあるコワーキングスペース 「OsakanSpace -オオサカンスペース-」 http://wp.yat-net.com/?p=2550 http://wp.yat-net.com/?p=2550#comments Fri, 23 Mar 2012 00:22:21 +0000 YAT http://wp.yat-net.com/?p=2550

コラボレーションの生まれる空間「Osakan Space」
そんな素敵なキャッチコピーの付いた、大阪の本町にあるコワーキングスペースです。 最近コワーキングスペースという言葉をよく耳にし、日本でも各地で次々増えてる印象を受けます。

  1. 1.コワーキングスペースとは
  2. 2.オオサカンスペースについて
  3. 3.家具について
  4. 4.料金について
  5. 5.メンターによるサポート制度
  6. 6.アクセスについて

1.コワーキングスペースとは

コワーキングスペースとは

そもそもコワーキングとは何かというと、Osakan Spaceのサイトに説明がありますが、下記の通りで

「共働ワークスタイル」のことで、
同じ空間で働きながらシナジーを期待する働き方です。

オフィス施設（机・椅子・応接室・セミナールームなど）をメンバー間でシェアし、必要なプランを選択して利用します。

お互い自分の仕事を持ち寄り、作業しながら、コラボレーションが生まれます。

また、『メンター制度』を利用することで「経営・起業・法律・会計・広報・IT活用・海外進出」などの悩みを気軽に相談することができます。

Osakan Space

簡単に説明すると、フリーランスの方や独立間もない方といった、まだ仕事をする専用スペースが自宅以外に無いという人達が主に外で仕事をする為の場所という感じです。
オフィスを持つにはコストが結構かかるし、かと言って家だと集中出来ないという人達は、これまでCafeのようなお店を利用している事が多かったようです。しかしそれだと長時間場所を使う事になりますし、お店に対して気を使う事も少なくありませんでした。

ですが、このコワーキングの登場によりそういった気遣いをしなくて良くなり、さらにコワーキングを利用する人の多くが仕事をしに来ているので、仕事に集中しやすいそうです。

更に、同業種、異業種の人々が集まるので、コミュニケーションが生まれた時に新たな仕事が生まれたり、パートナーが見つかったりとメリットは非常に大きいようです。

僕自身は会社員なので、仕事は会社でやりますし、外出は殆ど無いためコワーキングは自分にとって別世界だなと思っていました。 ですが、コワーキングスペースでは仕事する以外にもセミナーをやったり、各種イベントを行ったりと様々なものを提供する場でもあるようです。
実際僕も何度かセミナーに参加する目的でこのオオサカンスペースに足を運んでいます。

2.オオサカンスペースについて

オオサカンスペースについて

上記で説明したコワーキングスペースやセミナー会場を提供するのがオオサカンスペースですが、まずこのオオサカンスペースに欠かせないのがこのスペースを運営管理している大崎さんの存在です。彼女の想いや意気込みは下記動画で確認することができます。

僕自身が凄く良いな！って思ったのは、ただ仕事をする場を提供するのではなく、人が来やすい、楽しく仕事が出来るスペースを作りたいっていう気持ちの部分です。僕は上記で述べたとおり会社で仕事をしています。どの会社でも大体同じことが言えると思いますが、会社は仕事をするスペースであることが大前提です。

楽しく仕事をするというのはおそらく個人間で考えることであり、会社が提供してくれることは少ないと思います。個人的に数社で働いた事はありますが、そういったことに前向きな会社は少なかった印象です。

そういう目線から見ると純粋に羨ましいと感じるのが僕の素直な意見です。今の会社がダメとかそういうことじゃなく、そうやって皆が楽しく仕事出来る場を作りたいという考えは良いなという事です。そもそも会社の場合、会社を創る立場の人達も仕事をしているので、そこまで考えられるかと言うと中々難しい点でもありますよね。

オオサカンスペースのコワーキングイメージ
オオサカンスペースのコワーキングイメージ

オオサカンスペースのコワーキングイメージ2
オオサカンスペースのコワーキングイメージ2

3.家具について

家具について

以前お伺いした際に大崎さんとの会話の中で「ここの家具おしゃれですね～」って事を投げかけたんですが、オオサカンスペースでは家具に対して非常に拘りがり、おしゃれであることは勿論なんですが、設置している家具のほとんどがいわゆるデザイナーズ家具であり、大阪で作られた物を扱っているとの事でした。

大阪でやるコワーキングスペースで、大阪で作られたものを使う。普通に聞こえるかもしれませんが、大阪に住んでいる人間としてはこれは凄く嬉しいです。

大阪を元気に！というキーワードをWordBench大阪で聞いたり、クリエイターの方から聞いたりする中、同じ精神の人というのはやっぱり親近感が凄く強いですね。僕も大阪を元気に！というタイプなので、凄く共感しました。

オオサカンスペースソファー『タナダ』
オオサカンスペースソファー『タナダ』（大阪市平野区にある『相合家具製作所』の商品）

オオサカンスペースソファー『カワラサン』
オオサカンスペースソファー『カワラサン』（大阪市平野区にある『相合家具製作所』の商品）

オオサカンスペースソファー『テトラ』
オオサカンスペースソファー『テトラ』（大阪市平野区にある『相合家具製作所』の商品）

オオサカンスペースダイニングエリア
オオサカンスペースダイニングエリア（このエリアでは、飲食が可能です。）

家具がお洒落なので、そういったものに囲まれるのが好きな方はテンションが上がると思います。クリエイターの方っておしゃれな家具好きな人多いですよね^^。

4.料金について

利用料金ですが、非常にリーズナブルな設定になっていてメンバーなら初期費用10,000円と月額利用料の9,800円を支払えば平日の8：00～20：00まで使い放題です。一時利用も対応していて完全予約制にはなりますが2000円で一日利用が可能です。

メンバー（月額利用）
初期費用 10,000円
月額料金 9,800円
コワーキングスペース利用（営業時間中） ◯
入室時間8:00-20:00
退室時間23:00 日祝休み
指紋認証出入り ◯
メンターとの相談 ◯
応接室利用 -
セミナールーム利用 -
公認Ustreamスタジオ利用 -

ビジター（一時利用）
ご利用時間 完全予約制
ご利用料金 １日 2,000円
*ご利用の際には、免許証など顔写真付きの身分証明書をお持ちください。

5.メンターによるサポート制度

これは凄いな！って思ったんですが、メンバーが利用できる制度にメンターによるサポート制度というのがあって、「これはなんだろう？」って思ったんですが、なんとコワーキング利用中に経営・起業・法律・会計・広報などといったスペシャリストにチャット上で気軽に相談できる仕組みというのがあるそうです。

これはcafeや自宅で仕事をしていても中々そういった相談は出来ないのでこれはかなりポイントが高いんじゃないかな？って感じました。

実際フリーランスの方や独立された方々にとって法律や税理に関して欠かすことが出来ない点な上に、専門的な知識過ぎて全部自分で調べると言うのは非常に苦労します。こういうのを相談出来る相手が居るのは大きな強みでもありますね。

6.アクセスについて

アクセスについて

所在地

オオサカンスペース地図

所在地 〒541-0051 大阪市中央区備後町3-6-2 大雅ビル10F（auショップのあるビル）Google Mapで見る
最寄り駅 御堂筋線 本町駅 1番出口徒歩30秒、1番出口でて右の御堂筋を北上（車の流れと逆）すぐ（梅田・新大阪方面からは車両の後ろの方にお乗りください。）
アクセス方法 ・中央線 本町駅 450m（5分）
・四つ橋線 20番出口 650m（8分）
・堺筋線 堺筋本町駅 16番出口 650m（8分）
・タクシー 『御堂筋沿いの北御堂向かいのビル』とお伝えください。

機会があれば是非足を運んで見て下さい。そして利用してみて下さい。きっと楽しさが共感できると思います。より楽しく仕事が出来るスペースを共有しましょう。
コラボレーションの生まれる空間「Osakan Space」

]]> http://wp.yat-net.com/?feed=rss2&p=2550 0 脳内にある情報を視覚化することで情報整理をするマインドマップ http://wp.yat-net.com/?p=2541 http://wp.yat-net.com/?p=2541#comments Fri, 16 Mar 2012 01:54:02 +0000 YAT http://wp.yat-net.com/?p=2541

マインドマップというものをご存知でしょうか？wikipediaで調べると出てきますが意味的には下記のとおりです。

マインドマップはトニー・ブザン(Tony Buzan)が提唱した思考・発想法の一つである。あるいは、私たちの頭の中で起こっていることを見えるようにした思考ツールのこと。
マインドマップ wikipedia

これだけ見ると凄くおおごとのように聞こえますが、特別凄い装置が必要とかそういうことではありません。誰でも簡単に行うことが出来ます。

  1. 1.マインドマップを行うメリット
  2. 2.マインドマップの書き方。
  3. 3.他人のマインドマップが見れる「マインドマップアーカイブ」
  4. 4.他人のマインドマップを見れることのメリット

1.マインドマップを行うメリット

メリット

上記でも少し触れましたがマインドマップとは脳内に有る概念を視覚化していくことで情報の整理や思考の展開を行うことです。視覚化の方法は ある概念を基準としてそれを中心に置きます。その置かれた物から連想されるキーワードやイメージを次々と書きだして行き放射線状に繋げて行きます。

中心から放射線状へ広がるので視覚化した時に見やすいのが特徴です。視覚化することについても、キーワードやイメージ単位で書きだしていく為、スピーディに行えます。

また、書き方に決まりは有りませんから、自分の書きやすように書けるのも特徴の一つです。

こうやって視覚化していくことで、脳内で考えているだけで起こり得る漏れを抑えることが出来ますし、新たな発想に気付く可能性も有ります。

2.マインドマップの書き方。

書き方

書き方は、まずテーマや概念の主となるものを中心に置きます。絵やイラスト、大きな文字等を使って目立つようにします。イラストにする事で連想力や発想力が引き出され、自分の中の引き出しが一層開きやすくなります。その為普段絵を描かない人でもイラストを活用する事は非常に有効です。

次に中心に置いた物を主軸にして、関連性のある物を書いていきます。例えば主になるものをWebデザインとすれば、関連するキーワードは「ユーザー」「ユーザーの視線」「使いやすさ」「見やすさ」「読みやすさ」「文字の大きさ」「ビジュアル」「色」と言ったキーワードが連想出来ると思います。

こうやって思いついた関連性のあるキーワードを次々と書いていきます。さらに、その中関連性の強いもの。例えば「読みやすさ」「文字の大きさ」といったものはグループ化して情報の整理を行なっていきます。
マインドマップサンプル

そうして行く事で自分の中にあるその概念を整理し、分かりやすくすることが出来るのです。

3.他人のマインドマップが見れる「マインドマップアーカイブ」

マインドマップアーカイブ
マインドマップアーカイブ

マインドマップアーカイブは様々な人が作成したマインドマップを見ることが出来るサービスです。他人のマインドマップを見る事は、自分が見落としている発想を発見できたり、自分の知らない分野の勉強が出来たりと普段とは違ったものに触れる事ができます。

僕のようなWebデザイナーやWebディレクターの場合、お客様は基本的に自分たちの知らない業態、業種であることが殆どです。ですがこういった他業種のマインドマップを見ることが出来れば、我々にとって非常に優れた財産になります。

今はまだそう言った物がアップされていませんが、このサービスにはそれらが並ぶ可能性を秘めているということです。

4.他人のマインドマップを見れることのメリット

メリット

他人のマインドマップとは言わば他人の脳を覗けるという事にかなり近いです。例えばプロジェクトリーダーがマインドマップを起こせば、そのチームは何をすべきかが視覚的に捉えることが出来るでしょう。

顧客がマインドマップを起こせば、制作者はヒアリングする時間を大きく短縮することが出来るでしょう。それ単体で全てを把握するのは難しいですが、あわせてコミュニケーションを取ることで大きなメリットになり得ると考えられます。

どう言った感じで使えるか、プロジェクトでやり取りしてみるは面白いかもしれませんね。

上記でご紹介したマインドマップ意外にもマインドマップを作成できるサービスや他の人が書いたマインドマップを見れるサービスは他にもあります。

]]> http://wp.yat-net.com/?feed=rss2&p=2541 1 Webデザイナーさんのご紹介 Five Dimension Graphics代表 りえさん http://wp.yat-net.com/?p=2511 http://wp.yat-net.com/?p=2511#comments Fri, 09 Mar 2012 00:31:19 +0000 YAT http://wp.yat-net.com/?p=2511

こんにちは、YATです。
今回は昨年から色々とお世話になっているデザイナーのりえさん（@rie05）を紹介したいと思います。
そもそも僕とりえさんが知り合ったきっかけは、りえさんとはたぼーさん（@hatabo）が放送しているUSTREAM番組rie’s Cafe BAR（リエズ・カフェバー）にゲスト出演した事でした。

  1. 1.りえさんとは
  2. 2.お仕事
  3. 3.rie’s Cafe BAR（リエズ・カフェバー）
  4. 4.WordBench・WordCamp
  5. 5.最後に

1.りえさんとは

りえさん

大阪の北の方で活躍されているフリーランスWebデザイナーさんで、PCサイトの制作、スマートフォンのサイト制作、またプロダクトデザインと幅広くお仕事をされています。

デザイン以外でも冒頭で触れたUSTREAM番組でパーソナリティを務めたり、講師業を行なっていたりと活動の範囲は制作以外にも及びます。

他にも去年開催されたWordPressのイベント「WordCamp神戸」の主要メンバーとして活動したり、今年WordBench大阪の先陣を切ったりと物凄く意欲的に活動されており、僕自身色々と刺激をもらっています。

2.お仕事

お仕事

LOVE@OSAKA PROJECT

現在大阪ステーションで展開されている「LOVE@OSAKA PROJECT」(2月1日-3月14日まで)。大きなモニターからポスターまで展開していますが、これのデザインを担当したそうです。

大阪駅以外にも、最寄り駅でポスターを見かけたのでおそらくJR沿線の駅ならポスターを見ることは出来るかと思います。ただし関西以外は確認していないのでわかりません。

りえさんの作るデザイン

りえさんの作るデザイン

WordCamp神戸公式サイト

WordCamp神戸

2011年9月11日に開催されたWordPressのイベントWordCamp神戸公式サイト（http://kobe2011.wordcamp.jp/）

こちらのデザイン全般を担当されてました。こちらのサイトにいたってはWebDesign&Suchの「10 Great WordCamp Website Designs」という記事でエントリーされています。これはほんと凄いですよね。

rie’s Cafe BAR（リエズ・カフェバー）

rie’s Cafe BAR（リエズ・カフェバー）

毎週火曜日の22：00から放送されているUSTREAM番組です。毎回様々なゲストが登場して一緒に盛り上がる番組で、僕はVol.5にゲスト紹介されて出演しました。

りえさんもはたぼーさんもデザイナーでそういう目線の番組かとおもいきや、割と取り扱うネタが幅広く、登場するゲストによってトークの内容が大きく代わります。

とはいえやはりデザイナーの方や、Web関係の人が多いですね。中々聞けない業界のことが聞けたり、おお、こんなひとが！という方が出演したりするので、まだ見たことのない人はぜひ見てみて下さい。楽しいですよ＾＾
rie’s CafeBAR（リエズ・カフェバー）

りえさんもはたぼーさんもとにかく喋るのがうまいです。ゲスト出演して思いましたけど、会話しやすい空気が作られていて非常に馴染みやすいんですよね。

りえさんはメインパーソナリティなわけですが、講師業をされてたり、セミナーで登壇されたりしているので喋ることに慣れてるなという印象です。僕は人前で喋るのが苦手なのでこういうのはホント憧れます。

そしてこのrie’s Cafe BARがなんと大阪市と関西Walkerが企画している、関西Ustream Awardの「カルチャー・情報部門」にノミネートされたそうです。これは凄い！
AWARD 公式FBページ

3/24に表彰式があり、りえさん、はたぼーさんが共に出席されるとのことです。おめでとうございます！

WordBench・WordCamp

WordBench大阪

僕も所属しているWordPressコミュニティ「Wordbench大阪」で現在りえさんが先陣を切っています。元々存在はしていたんですが、ここ最近活動していなかったらしく、改めて活動していこう！ということで動かし始めました。

去年WordCamp神戸という大きなイベントに携わり、ゼッタイ大阪でもやりたい！って感じたらしく、今年に入ってまずWordBench大阪を動かしたというのが背景にあるようですね。

WordBenchは地域ごとに存在しており、その地域ごとにやり方や考え方が違うそうなんですが、大阪は「初心者の方からでも参加できる場」を意識していて、一緒に勉強していきた、盛り上げていきたいと言う人が多数参加しています。

個人個人の意欲はそれぞれがモチベーションを持たないと持続出来ませんが、先陣を切る人がパワーを持ってるとそれに感化されて一層ヤル気が出たりしますね。僕はこの空気がいいなーって思っています。

こういうコミュニティって勉強することが目的ですが、それ以外の事もあって楽しいですよね。無論本来の目的を履き違えちゃ駄目ですけど、それをフル活用するのは凄くいいことだと思うし、僕も手伝えること、協力できることがあれば参加していこうって思います。

WordBench大阪の開催告知や、メンバーの参加は下記サイトにて随時行なっていますので、ご興味ある方はこちらをご覧下さい。メンバー登録は勿論無料です。
WordBench大阪

WordBenchがコミュニティとして形になり活性化することでWordCamp大阪も実現出来るので、ますます盛り上がっていくことになると思います。みんなで大阪を盛り上げませんか？

最後に

とにかくりえさんはパワフルで皆を巻き込むのがうまいデザイナーさんです。これだけ色々な事に意欲的なデザイナーさんは周りに居なくて僕自身刺激を受けます。

Ustだけ見てると結構ノリが軽い・明るいっていうイメージが強く出てますけど、実際に突っ込んで喋ってみると流石フリーランスで仕事をされているだけあってか、色々な事を考えて行動しているなという部分が伺えます。

業界や自身の仕事において先をよく見ているという部分もありますし、何かをする際に懸念される事や巻き込む人の事はしっかりと考えて動いているんだなという部分がよく見えます。

実際問題、WordBench大阪が開催されると50人レベルの人が集まります。これを毎月やるって相当な負担なはずなんですよね。りえさんだけが運営してるわけじゃないとはいえやっぱり先陣切る分やること、考えることは多数あります。

そういうのを取り仕切りながら他にも色々やるってやっぱり凄いですよほんと。僕は去年数回イベントの主催やりましたけど、あれだけでも大変だったのになって思います。だからこそ手伝えることは手伝いたいって思うし、困ったことあれば話し聞いたり相談に乗りたいって思います。

りえさんこれからも色々と宜しくです＾＾

関連リンク

]]> http://wp.yat-net.com/?feed=rss2&p=2511 1 WordPressのお作法-テーマ作成時のテスト・デバッグについて WordBench大阪 http://wp.yat-net.com/?p=2493 http://wp.yat-net.com/?p=2493#comments Wed, 29 Feb 2012 00:23:32 +0000 YAT http://wp.yat-net.com/?p=2493

第2回WordBench大阪に参加してきました。その中でみやさん（@miya0001）がお話されていたWordPressのお作法に非常に興味を持ったのでシェアしたいと思います。

  1. 1.テーマのデバッグに関して
  2. 2.theme-checkプラグイン
  3. 3.テーマユニットテスト
  4. 4.参考文献

1.WordPressのデバッグに関して

WordPressのお作法
スライド「WordPressのお作法：by miyauchi」

WordPressのテーマはかなりの数がインターネット上に公開されてますし、自身で作ることも可能です。ですがそのすべてが安全という保証はありませんし、エラーの出ている物Web上に公開及び納品すると言った行為は良い事とは言えませんね。

開発では特にデバッグやエラーチェックといったテストにかなり時間を割いています。

WordPressにはテーマやプラグインをチェックするプラグインが存在しており、海外ではダウンロードのランキング上位にあります。ですが日本ではそれほどダウンロードされておらず、それらに関する情報もあまりないのが現状です。

自身が作成するテーマやプラグインは是非チェックをかけてデバッグして下さい。

2.theme-checkプラグイン

テーマチェック
Theme-Check Plugin

テーマのチェックが出来るプラグインです。WordPress日本語開発チームのたいさん（@takepo）が日本語訳をしてれたそうで、まもなく本体に組み込まれる予定だそうです。これはありがたいですね。

theme-checkプラグイン使い方
使い方はプラグインをダウンロードしてインストールし、管理画面＞外観＞テーマから、Theme-Checkをクリックして実行します。ただし、これに関してはアップ前のローカル環境等で行い、実際の公開時にはプラグインを無効にするなりして下さい。

手順

theme-checkプラグイン使い方
次にチェックしたいテーマを選択してCheck it!をクリック。

theme-checkプラグイン使い方
エラーがある場合、上記のようにズラーっとエラーメッセージが出てきます。（記事書いてるのにこれはマズイですね。近々対応します。）

僕の場合は個人ブログですが、これを納品するとなると現実的ではありません。英語で書かれていると結構ビビってしまいますが、エラー内容を翻訳したり、検索を掛けてみると改善案が出てきたりするので、地道にデバッグしていくのが良いですね。

色々とやっていると、自分が次にテーマを作成する際にはデバッグのコツを掴んでいるので、エラーが発生してもそれが何を指しているかが分かったりしてスピーディにデバッグができるようになりますし、WordPress自体の理解度も深まります。

Twenty Eleven
尚、デフォルトで使用されているTwenty Elevenはエラーが出ません。
Twenty Eleven
素晴らしいですね。

3.テーマユニットテスト

テーマユニットテスト

上記まではテーマのバックエンド的な部分のテストに当たるかと思いますが、次はフロント側のいわゆる見た目のテストです。

文章の長短でどういった見え方をするのかというテストは何らかのサンプルテキストを埋め込む必要がありますね。これを逐一埋めていくのは結構な手間になります。しかし、この手間を省けるようなデータがめ組のWordPressマニュアルで公開されており、誰でもダウンロードして使うことが出来るようになっています。

これをインポートしてテストするのは非常に効率が良いです。

WordPressのユーザーマニュアルBeta
WordPressのユーザーマニュアルBeta：簡単クイック 基本マニュアル

上記バナーをクリックするとデータをダウンロードできます。ファイルはxml形式になっていて、WordPressのインポート機能を利用してデータを流しこむことができます。（※実際にはプラグインのWordPress Importerを利用しています。）

手順

ツール＞インポートを選択
管理画面のメニューから、ツール＞インポートを選択

インポート画面
インポートからWordPressを選択

今すぐインストール
プラグインがインストールされていない場合は、今すぐインストールを選択

プラグインの有効化
プラグインを有効化してインポートツールを実行をクリック

ファイルのアップロード
ファイルをアップロードしてインポート

インポート詳細画面
インポート詳細画面。特に手を加えずSubmitボタンをクリックすればインポートされます。

実際の画面
インポートが完了したら実際のページを確認し、視覚的におかしい部分が無いかチェック出来ます。

自分が予測していない動作をしないかという目視のチェックは非常に大事ですね。

4.参考文献

テーマの開発、デバッグ等は手間が掛かります。ですが、オリジナルの物を作るのは非常に楽しいです。是非一度はトライしてみて欲しいです

上記のようなこういったデバッグは他にも色々あります。もっと詳しく方は今回登壇されたみやさん（@miya0001）やプラグイン開発やWordPressの高速化で有名なをかもとさん（@wokamoto）、プラグイン開発者のまがりんさん（@jim0912）なんかが記事にしていますので、是非そちらもあわせてご覧下さい。

]]> http://wp.yat-net.com/?feed=rss2&p=2493 2 これは便利！html5・CSS3で作られたGifアニメーション作成サービス http://wp.yat-net.com/?p=2484 http://wp.yat-net.com/?p=2484#comments Fri, 24 Feb 2012 02:27:01 +0000 YAT http://wp.yat-net.com/?p=2484

Mothereffing animated gif

画像をドラッグ＆ドロップするだけでGifアニメーションが作れてしまうHTML5のWebサービスです。（モダンブラウザで利用可能）今までGifアニメーションを作るには対応したソフトウェアが必要で、使い方を覚えないと使えませんでしたが、これは物凄くシンプルなUIになっているので非常にわかりやすく、とても便利です。

.使い方

使い方を解説します。といっても見た目だけでも簡単に出来ますが。

Mothereffing animated gif
1枚目をドラッグ＆ドロップ
Mothereffing animated gif
2枚目以降をドラッグ＆ドロップ
Mothereffing animated gif
Animateボタンをクリックしてプレビューを表示。Resetをクリックすれば最初からやり直せます。
Mothereffing animated gif
各スライダーを調節して好みのアニメーションに
Mothereffing animated gif
作成した画像はダウンロードは勿論、URLを作成することも出来ます。

とっても簡単ですね。WebサービスなのでURLさえわかれば何処でもGifアニメーションが作成できます。他のクラウドサービスとの相性はバッチリですよね。

Mothereffing animated gif

]]> http://wp.yat-net.com/?feed=rss2&p=2484 2 WordPressをローカルで開発するためのXAMPP事始め＆WordBench神戸、大阪について http://wp.yat-net.com/?p=2468 http://wp.yat-net.com/?p=2468#comments Tue, 21 Feb 2012 05:53:35 +0000 YAT http://wp.yat-net.com/?p=2468 WordBnch神戸のブレンさん（@bren_boss）に声をかけていただき、勉強会に参加してきました。 今回はWordPressだけでなく、HTML5-WEST.jpとWeb CAT Studioの共催という事もあり、html5やJavaScriptの事、またCSS3アニメーションの活用など多岐に渡った話を聞くことができました。 今回のタイムテーブルは下記の通りです。WordPressに関しては初心者の方向けな内容になっていて、これから触ろうという人にぴったりな内容でした。
  • 13:00～13:30　受付
  • 13:30～13:35　はじめに
  • 13:35～14:05　「PHPをさわらず作る！デザイナーさんのためのWordPress超初級 -」黒木麻実さん (@mamy315)
  • 14:10～14:40　「d3.jsではじめるデータビジュアライゼーション入門」門脇 恒平 さん(@kadoppe)
  • 14:45～15:15　「簡単！XAMPP・MAMPで制作して本番環境へ！」上村 崇 さん(@uemera)
  • 15:20～15:50　「JavaScript+CSS3を活用してスマートフォンサイト／アプリに動きを付けよう」若松 浩昭 さん
  • 15:55～16:35　「Web技術の現状からWordPressの今後を考えてみる」WordPress＆HTML5　合同セッション 菱川拓郎さん（@HissyNC） × 村岡正和さん（@bathtimefish）
  • 16:40～17:00　質疑応答
  • 17:00～17:20　LT「HTML5&WordPress×キャリア」Web CAT studio 長尾さん
  • 17:20～17:30　おわりに
全てに焦点をあてると非常に長い記事になるので上記より「簡単！XAMPP・MAMPで制作して本番環境へ！」を紹介したいと思います。
  1. 1.スライドについて
  2. 2.XAMPP・MAMPのダウンロード及びローカルへのインストール
  3. 3.WordPressのインストール
  4. 4.デザインを作る
  5. 5.利用する上での注意
  6. 6.WordBench大阪に関して

1.スライドについて

今回紹介するスライドを作成及び登壇されたのは、神戸でフリーランスのSEであり、インフラサザエさん創始者の上村さんです。blog：トヤヲ.ネット 今回のスライダーはこちら 上村さんの「簡単！XAMPP・MAMPで制作して本番環境へ！」スライド 上村さんの「簡単！XAMPP・MAMPで制作して本番環境へ！」スライド 冒頭にてXAMPPもしくはMAMPを使ったことがある、使っている人を聞いていましたが流石WordPressに興味のある人が多い為かほとんどの人が使ったことがあると解答していました。ですが当然中には触ったことのない人も居ましたし、これから触ろうと思っている人も居ました。 そういった方々にとって今回の発表はダウンロードからインストール。また、インストール時に気をつける注意点まで事細かに解説していましたので非常に有益だったと思います。

2.XAMPP・MAMPのダウンロード及びローカルへのインストール

まずXAMPP・MAMPに関してですが、XAMPPはWindows用のMAMPはMAC用の総合開発環境です。WordPressでの開発にはApache、MySQL、PHPといったソフトウェアが必要になってきます。それぞれをインストールして扱うことは勿論可能ですが、一括でインストール及び管理ができる総合開発環境はやはり便利です。 僕は普段windowsで使っているので正直MAMPの方はわかりません。ですのでこのブログで紹介するのはXAMPPの方のみ解説させて頂きます。 XAMPP XAMPP for windows

確認すべき事

インストールファイルを上記サイトからダウンロードします。スライドでも触れていましたがバージョンが非常に大事です。 XAMPP WordPressで扱うにあたりバージョンによっては各ソフトウェアのバージョンに指定があります。 例：WordPress 3.2 日本語版だと ・PHP バージョン 5.2.4 以上 ・MySQL バージョン 5.0 以上 これらの条件をダウンロードするXAMPPがきちんと担えているかが重要になります。また、ローカル環境でこれをクリアしていてもご利用のサーバーがこれに対応していないと無論使えませんのであらかじめご利用のサーバーでも利用できるバージョンが入っているか確認することをオススメ致します。

インストーラのダウンロード

XAMPP さて、実際にダウンロードですが、上記の通りインストーラー版をダウンロードします。zip版を解凍して使うでも良いですが、僕はインストーラー版でインストールする方が楽なのでいつもこちらを利用します。

インストール

インストーラーを起動してインストールしていきます。基本的にnextを選んで進んでいけば良いです。 C:\XAMPP 何処にインストールされるか確認しておきましょう。自身が作成するファイルはこの中にある「htdocs」というフォルダの中になります。

コントロールパネルの起動

インストールが終わったらコントロールパネルを起動します。 起動時のコントロールパネル 起動したらこのような状態になると思います。いくつかのソフトウェアを管理できますが、WordPressで必要なのはApacheとMySQLですので、これらを起動します。 ApacheとMySQLを起動 うまく起動すると下記のようになると思います。 ApacheとMySQLを起動

コントロールパネルが起動しない、もしくはApacheが起動しない。

Apacheはポート番号80を利用して通信を行います。よくあるのがSkypeといった同じ80番を使うソフトとの競合によりApacheが使えないというパターンです。まず、スカイプを利用されている場合はスカイプのメニューよりツール＞設定を開き、詳細＞接続から、使用ポート80を使用にチェックが入っていないか確認します。チェックが入っていると80番を利用しますので、このチェックを外して下さい。 Skypeポートの設定 もしスカイプに問題がない場合は他のソフトウェアと競合している可能性があります。それを調べましょう。やり方はコマンドプロントを起動しコマンドを入力します。（netstat -ano） netstat -ano 実行すると開いているポート一覧が表示されます。 netstat -ano この中にあるローカルアドレス0.0.0.0:80というのが今回探しているポート80の事ですのでその列の右にあるPIDの値を確認します。（今回1668） こんどはコマンドを「tasklist /svc /fi “PID eq ＜該当のPID番号＞」と入力します。上記画像の場合は該当の番号が1668ですので、下記の通りになります WordBench大阪WordBench]]> http://wp.yat-net.com/?feed=rss2&p=2468 1