カテゴリー: HTML

Google Maps APIを使って住所を出さないで地図を表示させる方法

Google map api

Google Map をホームページに埋め込む方法は大きく2つの方法があります。
まず最初は地名、建物名、住所を検索して「共有」ボタンから共有する方法です。

地図を共有する

こちらのやり方がもっとも簡単な方法です。
ただこちらのやり方では細かい設定を変更することが出来ません。

例えば、

  • マーカーを表示させない
  • 住所を見える位置に表示させない

などなど、細かく設定を変えてGoogle Mapを埋め込みたい時に使うのがGoogle Maps APIです。Google Maps APIは緯度、経度の値をもとにGoogle Map上にマーカーを配置することが出来るので、例えば住所のわからない地点にもマーカーを置くことが出来ます。

そこでGoogle Maps APIを使って地図の表示、マーカーを配置する方法をご紹介します。
完成はこんな感じです。

続きを読む

iPhoneでデベロッパーツール(Webインスペクタ)を使う方法

Webインスペクタをオンに

ホームページのコーディングをする時、表示が崩れている箇所をすぐにチェック出来るデベロッパーツール。どこがおかしいのか簡単にチェック出来る上、CSSをブラウザ上で修正、コンソールなども確認出来る便利なツールですが、iPhone上でもこのデベロッパーツールを使うことが出来るのでその方法を紹介します。

続きを読む

スクロールしている時の背景画像にパララックス効果を加える方法

jquery

最近よく見かけるスクロールしていくと固定された背景画像が変わっていくページを作ってみました。最近よく見かける割に、すごい新しい手法を使って作ったわけではないので、工夫次第で、今ある技術でもっといろんな表現が出来るかもなぁと再確認しました。

作り方は完全に我流なので、こういう作り方の方がスマートっていうやり方があれば是非とも教えてください。

デモ

続きを読む

お問い合わせフォーム不要?facebookページと連動したチャットボックス「Speaklyn」

speaklyn

ほぼすべてののサイトに設置されているお問い合わせフォーム。
ユーザとの接点を持つ上で非常な存在になりますが、フォームを設置するのってそんなに簡単じゃないですよね。WordpressであればContact form 7などプラグインを使って、容易に設置することも出来ますが、自作する場合、設計を考えたり、構築にも時間がかかります。セキュリティ面のことも考えないといけません。

ユーザとの接点として重要ではあるフォームですが、ユーザ側からするとフォームの入力はとても面倒ですよね。入力項目が多くなればなるほど、入力のハードルは高くなります。

今回は上記のような悩みを解決出来そうな、Speaklynというサービスをご紹介したいと思います。

無料でしかも多言語対応のチャットボックス「Speaklyn」

speaklyn

Speaklynはfacebookページのメッセンジャーをサイトに埋め込むことが出来るサービスです。
facebookページを使うので、当然facebookページは必要になります。またユーザもfacebookのアカウントを通してメッセージを送るので、facebookのアカウントの無いユーザはメッセージを送ることが出来ませんし、アカウントを知られたくないユーザにとってはハードルが高いようにも感じます。なので、使える状況はある程度限定されるかもしれません。アカウントの無いユーザ用に通常のフォームも設置した方がよいでしょう。

設置方法

設置方法は非常に簡単です。

1, アカウント作成

必要な項目を入力します。英語ですが、そんな難しい設定はないので、だいたいの意味はわかるのではないでしょうか。

Speaklyn 設定

2, ソースをコピー&ペースト

設定が完了したら「Installation」→「General」をクリックして、グレーの背景の部分をコピーします。

Speaklyn Installation

コピーしたソースを</body>タグの前にペーストしたら完了です。

補足

ページにいいねボタンがあると同じクラスを使っているからか、ボタン側の表示崩れることがあります。当サイトの場合、下記のようにCSSで幅と高さを強制することで解決させました。ちょっと力技ですが。

今後は修正されるかもしれませんが、現段階ではCSSで強制する、もしくは併用して使うのを避けた方がいいかもしれません。

Macの標準アプリ「Numbers」を使って簡単にHTMLのテーブルを作成する

保存フォーマット

表を作成する<table>タグ。
皆さんは<table>を作成する時どのような方法で作りますか?

  • 一列ずつ手打ちで
  • Dreamweaverを使う
  • Table Tag Generatorのようなサイトを使う

上記以外の方法で、Macに標準でインストールされてる「Numbers」と「テキストエディット」を駆使することで、簡単に<table>を作成することが出来るのでご紹介します。

1, Numbersを起動して表を作成

まずは普通にNumbersを起動して表を作成してください。

numbersで表を作成

2, テキストエディットにコピー

Numbersで作成した表をHTMLにしたい部分を選択してコピーして下さい。
この時Get Plain Textのようなスタイル情報を消すアプリを使っている人はアプリを止めておいてください。

テーブルを選択

次にテキストエディットを開いてください。

テキストエディット

ここで注意して頂きたいのが、「環境設定」で「フォーマット」がリッチテキストになっていないとうまくいかないので、もし標準テキストになっていたら変更しておいてください。

リッチテキスト

ここに先ほどコピーした表をペーストしてください。

ペースト

すると表の色などを残したまま表がテキストエディットに貼り付けられます。

3, 保存

この状態で保存を行います。
保存するとき、フォーマットで「Webページ(.html)」を選んでください。

text-ed4

これで完了です。
あとはいつも自分が使っているテキストエディタで開くと、

sublime text

このようにちゃんとテーブルになっていることを確認出来ます。
classも付いているので編集もしやすいです。

以上です。