カテゴリー: HTML

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

Webインスペクタをオンに

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

1, iPhoneをMacにコネクタで接続、MacでSafari起動

まずiPhoneとMacをコネクタで接続します。
iPhone上でデベロッパーツールを使うと書きましたが、厳密には「iPhoneで確認しながらMacでデベロッパーツールを操作する」といった感じです。Safariではデベロッパーツールのことを「Webインスペクタ」と言います。Webインスペクタを使うのにMacのSafariを起動しておきます。

2, iPhoneのWebインスペクタを設定

デフォルトの設定ではiPhoneのWebインスペクタの設定はオフになっていますので、それをオンにします。
iPhoneの「設定」から「Safari」を選択。

Safariを選択

「Safari」の中の「詳細」を選択。

「Safari」の中の「詳細」を選択

「詳細」の中にある「Webインスペクタ」をオンにしてください。

Webインスペクタをオンに

「詳細」の中にある「Webインスペクタ」をオンにしてください。
これで設定は完了です。

3, MacのSafariからデバイスを選択

iPhoneの設定が完了したら、iPhoneのSafariでチェックしたいページを開きます。
開いた状態でMacのSafariのメニューから「開発」をクリックします(あらかじめ環境設定で「メニューバーに”開発”メニューを表示」にチェックを入れておいてください)

MacのSafariの設定

すると現在接続されているiPhone名が表示され、その中にiPhoneのSafariで開いているページのURLが表示されているはずです(iPhoneのSafariで別ウィンドウがある場合、それも一覧で表示されます)

4, デベロッパーツール(Webインスペクタ)起動

URLの中からチェックしたいページのURLをクリックするとWebインスペクタが起動します。

Webインスペクタ

ソースにカーソルを合わせるとiPhoneでも対象の要素が選択されます。

Webインスペクタ

Webインスペクタ

一個残念なのが要素のMacと違って要素から選択が出来ないということ、一つ一つ折りたたまれたソースを開けていくのはちょっと面倒。

でもこれでiPhoneでのCSSの調整や修正がかなり効率的になるのではないでしょうか。

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

jquery

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

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

デモ

HTMLとCSSを準備

HTMLとCSSを準備します。
流れとしては最初の段階ではbodyにbackground-imageで「01.jpg」を表示させておき、スクロールしていって、クラス[bg02][bg03][bg04]を追加していき、backgroundを上書きするやり方になります。[background-attachment]プロパティでスクロールした時に背景画像を固定するかどうかを指定出来ます。

HTML

CSS

jQueryを準備

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も付いているので編集もしやすいです。

以上です。