大阪ホームページ制作MKK WORKS

Webサイト制作者が仕事を探すのに便利なBtoBサイトまとめ

Webサイトをプロとして制作されている個人＆法人の方が苦労することの一つに
新規案件の受注ということがあるかと思います。

MKK WORKS でも営業スタッフの負担減と新規案件増を期待し
様々なサイトで受注＆提案を行っています。

そんな便利なBtoBマッチングサイトをご紹介します。

利用方法によっては有料となる場合もありますのでご注意下さい。

・のっくのっく（無料）
http://www.nocnoc.jp/

・BIZ MATCH STATION（無料）
http://biz-match-station.zenkyo.or.jp/

・商談上手（無料）
http://www.syodan.com/

・ホームページ制作マッチング（無料）
http://hp.submit.ne.jp/

・BIZ FILE（無料）
http://www.bizfile.com/

・e-WORK（無料）
https://www.e-work.ne.jp/

・全国ホームページ制作会社検索（無料）
http://webseisaku.hapstock.com/

・ホームページ制作会社WEB（無料）
http://www.hp-web.net/

・ホームページ屋.com（有料）
http://homepage-ya.com/

・楽天ビジネス（有料）
http://business.rakuten.co.jp/

・ザ・ビジネスモール（商工会議所会員のみ）
http://www.b-mall.ne.jp/index.aspx

・E-JOB GO（有料）
http://www.ejobgo.com/

・見積り.com（有料）
http://b-matching.mitumori.com/

・ホームページ依頼ナビ（有料）
http://www.navi-hp.jp/

・MDN（無料＆有料）
http://www.mdn.co.jp/Yellow/indexWD.htm

・ホームページ制作.com（無料）done
http://www.41-homepage.com/index.html

 

紹介させて頂いたサイトで生じたいかなる不利益、損害も一切責任を負いかねますので
ご利用の際は細心の注意を払い、慎重にご利用下さい。 MKK WORKS

ブログなんかによくついているソーシャルブックマークに追加するボタン。
当ブログでもソーシャルブックマークに追加しやすいよう大手のブックマークサービスのボタンをつけています。

ただ、場所は取るし広告みたいだしいちいち各社のソースを貼り付けるのもなかなかの手間です。
そんな手間はこれから必要ないのかもしれません。

続きは以下からどうぞ。

新しいものが好きな方の中にはもうすでに知っている方もいるかと思いますが

主なソーシャルブックマークサービスを一つのボタンでまとめてくれるWebサービスがスタートしました。

このボタンを本日より使用することにしました。

まだ馴染みは薄いかもしれないので
今まで通り、各社のブックマークボタンはつけておきますが
頃合を見てこちらだけにしようかと思っています。

このWebサービスは

Add Clipsが提供するサービスです。

ただ貼り付けるだけならユーザー登録など面倒な手続きは一切不要で誰でも簡単にブックマークボタンが使用できます。
ユーザー登録をすればブックマーク登録状況などもチェックできるようです。

今後もブックマークできるボタンを増やしていくようなのでますます便利なサービスとなりそうです。

制作関連

CSS LIBRARY

http://www.dynamicdrive.com/style/
スタイルシートのサンプル大量です。
気に入ったものがあればテストしてみると良いです。

ColorBlender

http://colorblender.com/
配色を教えてくれるカラーミキサーサイト
カラーサンプルのすぐ下にある「Editing mode」はAutoMatchにチェックが入っているのでそのまま
「Edit Active Color」のRGB値のスライダーを動かして下さい。
カラーサンプルが自動的に相性の良いカラーに変化していきます。
配色はセンスによるところが大きいですが、セオリー通りの配色も参考になります。

browsershots.org

http://browsershots.org/
詳しくは色々なブラウザで自分のサイトをチェックできる便利ツールの記事ですが
様々なブラウザでのチェックが行えるサイトです。
できればIE、safari、Firefoxでの表示確認は行いたいものです。

画像関連

Image to HTML Converter

http://neil.fraser.name/software/img2html/
画像をテーブルタグに変更してくれるサイト
使う機会があるのか疑わしいですが、もし実践的な機会があるとすれば、
画像が使えない箇所にテーブルタグが使えるならば、これで画像を使うことができてしまいます。笑

Button Maker

http://tools.dynamicdrive.com/button/
詳しくはブログを彩るアイコン達の記事ですが
ブログによくある



といったボタンを設定を少しイジるだけで色々と作れてしまうサイト。
海外サイトですがWeb制作者にとっては簡単な英語だけなので気軽にどうぞ。

MOJI-Q

http://kazina.com/qr/index.html
無料のテキスト付きQRコード作成サービス。
モバイル対応ブログなどは必須ですね。

favicon2dots

http://favicon2dots.com/
画像URLを入力してワンクリック。
ドット絵のfaviconを作ってくれるサイト。

PSBurshes

http://www.psbrushes.net/index.php
photoshopのブラシを大量に置いてあるサイト。
使い方次第で面白い素材が作れそうです。

ファイル操作関連

メディアコンバート

http://media-convert.com/ja/
様々なファイルを変換してくれる恐ろしく便利なサイト。

bubbl.us

http://www.bubbl.us/
Web2.0風なマインドマップが作れるサイト
保存したり、作り直したりするのは無料ユーザー登録が必要です。
とりあえずすぐ作るだけなら登録不要となっています。
もちろんプリントアウトも可能です。

Button Maker Online

ブログなどを見ていてよくみかける

↑のような画像を色々と設定をイジって自動的に作ってくれるWebサービスです。

英語のサイトですがWebサイトを制作していて見かけることの多い英語しか使っていないので
簡単に理解できるかと思います。

実用性の高い使い方も出来ますしサイトの飾りとしても使えるかと思います。

さらにもう一つ、ブログを彩るアイテムとしてフィードアイコンがあります。

FEED ICONSにてダウンロードが出来ます。

ちなみに、mozillaからフィードアイコンに関するガイドラインがありますので使用される方はご一読下さい。

フィードアイコンガイドライン
http://www.mozilla-japan.org/foundation/feed-icon-guidelines/

以前扱った「MACのsafariをWindowsで表示する」ですが
さらに様々なブラウザで表示テストすることができるサイトをご紹介します。

http://browsershots.org/です

対応ブラウザはIEからlinux系のものまで幅広く、Web制作者にとってはありがたい（逆に迷惑でしょうか！？）サイトです。
確認したいサイトを入力し、即表示してくれるわけではなく一定時間予約をいれておき、数時間たったら予約ページを見に行くと出来上がっているという流れになります。

海外サイトですが入力する項目はほとんどないので以下の解説通りに進んで下さい。

続きは以下からどうぞ。

まずhttp://browsershots.org/にアクセスして頂き、

次のような画面となります。

トラフィックが高いようなので、多少動作が重い場合もあります。
表示したらチェックしたいサイトのURLを入力し「start」をクリックして下さい。
ここでも少し時間がかかる場合があります。

以下のような画面となります。

表示確認を行いたいブラウザにチェックを入れ
「Maximum Wait」の項目を設定します。
つまり、待ち時間を設定するわけです。
30分～4時間まで選べるようですが、あまり待ち時間が短いようだと表示されないこともあるようなので
一番長い「4hour」にするのが良いと思われます。

設定が終わりましたら「Submit Jobs」をクリックして下さい。

次のような画面になります。

ここが予約画面となります。
お気に入りにでも登録しておき、数時間経ったらアクセスしてみて下さい。
出来上がったものから順に表示されていきます。
なので、4時間で設定し、2時間後ぐらいに見にいくとIEだけしか出来上がってなかったりします。
4時間後に見に行けばちゃんと出来上がっていますので焦らず待ちましょう。

表示されはじめると以下のような感じになります。

サンプルとしてこのブログを表示しています。（どうやら大きな表示崩れはないようで安心しました・・・・）
出来上がった画像をクリックすれば拡大表示されるようになっています。

MAC safariだけとりあえずすぐに確認できればいい！という方は以前の「MACのsafariをWindowsで表示する」をご利用下さい。

モバイルサイトはほんと増えてきましたね。

そんなモバイルサイトや文字情報をケータイにすぐインプットできる

便利なモノの一つがこれですね。QRコード。






このブログはケータイ対応でもなんでもないのですが

サンプルとして作ってみました。



こちらのサイトでなんと文字付きQRコードが簡単に作成できます。

文字色やバーコード部分の色もカスタマイズできます。



文字Qメーカー



bmp形式で出力されるので必要に応じてデータを変更して下さい。

お気に入りのfaviconなどによく使われるドット絵ですが
自分で作成するとなるとなかなか大変な作業となりますね。
それを自動で行ってくれるサイトの紹介です。

favicon2dots

こちらのサイトにドット絵にしたい画像のURLを入力し「2dots!」をクリックすると
自動的にドット絵に変更してくれます。
ちょっと動作が重い場合がありますが、非常に便利なので皆様試してみて下さい。

こちらが今回Google Maps APIを解説するにあたって設置したサンプルのMAPです。

サンプルMAP

今日は、このサンプルMAPを設置し、カスタマイズするところまで順に覚えて帰って下さい。

ではGoogle Maps APIの使用方法について簡単に解説していきましょう。

まず最初に必ず必要となるのがGoogleアカウントです。
日本のgoogleのページで取得すればいいだけなのでアカウントの取得方法については割愛しますが・・・・。

googleにログインした状態で、
http://www.google.com/apis/maps/にアクセスして下さい。

まだ英語ページしかないようですが、いずれ日本語ページも出来るのではないでしょうか。

下記の画像の場所、「Sign up for a Google Maps API key」にアクセスして下さい。

次のページに進むと利用規約のページとなります。
色々と書いてありますがざっくりと以下の感じになります。

・1日に50万ＰＶ以上あるサイトなら事前に連絡してください
・24時間ずっと高トラフィックをかけ続けるならアクセスを停止します
・エンドユーザーが使用しやすいように設置してください。
・google maps上のロゴなどを変更したり見づらくしないで下さい。
・定期的にアップデートします。1ヶ月前ぐらいには事前に通知します。
・非合法活動やプライバシーを侵害する恐れのあるサイトは使用しないで下さい。
・googleは突然アカウントを停止する権利を有します。

といった感じのことを書いてありますが、要は普通のサイトで普通に使って下さいということですね。
誤訳や間違いもあるかと思いますので原文をよく読み利用規約に同意して下さい。

規約に同意するチェックボックスにチェックを入れ
使用したいサイトのURLを入力しGenerate API Keyをクリックして下さい。

ここで気をつけて頂きたいのが入力するURLですがhttp://www.sample.com/sample/sample.htmlのようなファイル名まで指定する形ではなく
http://www.sample.com/sample/のようなディレクトリ名で終わらせて下さい。
意外とここでつまづいてしまう方が多いようです。

次へ進むとAPI Keyとサンプルソースが表示されます。

このまま使うとgoogle本社のマップを自分のサイトに貼り付けるだけとなってしまいますので
少なくともデフォルトの緯度と経度を変更する必要があります。

google mapsから緯度経度を出す方法もありますが多少面倒なので
こちらのサイトで調べることができます。

参考リンク：knecht

緯度経度を調べたらサンプルソースの緯度経度を書き換えましょう。

あとはそのまま貼り付けるだけなのですが、サンプルソースのままだと
航空写真や縮尺の設定がMAP上で変更することができません。

今回Google Mapsサンプルページに使用したソースをサンプルとして載せておきますので
必要に応じて変更箇所を書き換えて使って下さい。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Google Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=あなたのKey"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var markers = new Array(1);
function onLoad() {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(緯度.緯度,経度.経度),15);
map.addControl(new GLargeMapControl());
map.setMapType(G_NORMAL_MAP);
var marker = null;
var n_markers = 0;
var markeropts = new Object();
marker = new GMarker(new GPoint(緯度.緯度,経度.経度), markeropts); ←マーカーのポイント
markers[n_markers] = marker;
n_markers++;
map.addOverlay(marker);
}
//]]>
</script>
</head>
<body onload="onLoad()" style="margin:0px; padding:0px;">
<div id="map" style="width:500px; height:500px; margin:0px; padding:0px;"></div>

</body>
</html>

そして恐らく初めてGoogleMapsを使用する方がつまづくのが
文字コードの問題です。大多数の方がサイトの文字コードをJISで制作されているかと思いますが
GoogleMapsではUTF-8という文字コードを使用しています。
ですので、JISで制作したサイトにGoogleMapsのスクリプトを貼り付けたところで表示しません。

ではどうするのか？

文字コードの説明をするとさらに長くなってしまいますのでこれも割愛しますが
一番楽な方法はIFRAMEを使用しUTF-8で制作したページを表示させる方法です。

IFRAMEであれば本体ページがJISで制作し、表示先がUTF-8であっても関係ないからです。
（関係ないかというとそうでもないんですが・・・・あまり問題ないからです・・・）

IFRAMEについては一昔前まではブラウザの互換性の問題で色々と賛否両論ありましたが
現在では主要ブラウザのほとんどで問題なく表示できるタグなのでPC向けサイトなら特に大きな問題は無いと思われます。

そして、Google APIのほとんどはバージョンアップを繰り返します。
以前まで正常に表示していたのに表示のテストをしている途中でなぜか表示しなかったり表示がおかしかったりしたら
ブラウザがキャッシュしたJavaScriptが古いプログラムを実行している可能性があります。
ブラウザのキャッシュを削除したりすると直ったりしますので一応ご参考までに。

この記事を読む方であれば恐らくほとんどの方が使用したことがあると思います。
google社が提供する地図サービスです。
ただの地図サービスと思いきや、航空写真や地図を利用したコンテンツが豊富に用意されており
日常から慣れ親しんでいる方も多いのではないでしょうか。

今回は、この高機能なサービスであるGoogle Maps APIを自分のサイトで使用する解説を行います。
長くなりますので2部構成としています。

1部目はGoogle Maps APIとその技術について簡単に記していきます。
2部では、実際に自分のサイトへGoogle Maps APIを貼り付ける方法を記します。

・Google Maps APIとは？APIとは「Application Program Interface」の略でアプリケーションプログラムの集合体のようなものだと理解して頂ければとりあえず十分です。
単体の技術ではなく、多くのプログラムがGoogle Mapsを構成してます。

・Google Maps APIの特徴とは？
一番の特徴としてあげられるのは最新技術の「Ajax」（エイジャックスと読みます）で構成されていることでしょうか。
Ajaxとは「Asynchronous JavaScript + XML」の略で、JavaScriptとXMLのミックスされたものと覚えておいて下さい。

そしてこのAjaxですが、他のプログラミング言語であるPHPやPerlとどういった違いがあるのか？？？

前述の、PHPやPerlだと、Webブラウザを通して、リロード、つまり何かボタンを押したときや何かを選択したときにしか動作しませんでしたが
AjaxではWebブラウザのJavaScriptのHTTP通信機能を使って動き、"リロードせずに"データ通信を可能にする技術です。

具体的には、指定したURLからXMLを読み込み、ユーザの操作や画面描画などと並行してサーバと非同期に通信を行なうことで
リロードの必要がないスムーズなWebアプリケーションを実現できます。

＊非同期 　任意ではないタイミング
＊対義：同期　任意のタイミング（ボタンを押したとき、ロードしたとき等）

では、そんな革新的な技術を使っているWebアプリケーションであるGoogle Maps APIを
いよいよ自分のサイトに使ってみたいと思います。

次の記事へどうぞ。

この記事を読むほとんどの方がWindowsで、しかもIEを使用しているかと思います。
中には最近流行のFirefoxだったりするかもしれません。

しかし、Web制作関連の仕事をしていると、IE、Firefoxの表示確認だけでなく
MACでの表示確認も行いたいものです。

人によっては、時流に逆らってマイナーなOS、マイナーなブラウザ使ってるほうが悪いなどとバッサリ切り捨てる方もいらっしゃいます。

一理ありますが、万人に見れるに越したことはないですね。

ただ、Windowsを使っている以上、MACでの動作確認はなかなか出来ないものです。

そういうときはこのサイトで確認してみてください。

http://www.browsrcamp.com/です。 別ウィンドウで開きます。

ページの中ほどにある「Safari 2.0.4 Screenshots」のテキストボックスにURLを入れ
幅と画質を設定したら「View」ボタンをクリックしてみて下さい。
画質が高いと少々時間がかかりますがより詳細に表示されます。

IEとFirefoxできちんと表示できていればさほど大きく崩れることはないかと思いますが
MACでの表示なのでフォントが大きく違う場合があります。
念のため、チェックすることをオススメします。