みなさんこんにちは。
今回から、初心者向けのHTML・CSSを勉強方法などをご紹介していきます。
とりあえず喋ることが好きな営業マンが、実際に自分でコードが書けるようになるまで、どんなことを勉強しているかを記載していきます。
目標は、HPを１つ自分で作れるようになることです！！
学習のための準備
まず、HPを自分で作れるようになるためには、必要な物がいくつかあります。
１・コーディングソフト
HTMLやCSSと言われるHPを構成する言語をコーディング（書く）するには、メモ帳のような単純なテキストエディタを使用して作成することもできますが、やはり専用のコーディングソフトを活用することで、簡単＋スピーディーにコーディングを進めていくことができます。コーディングソフトは様々ありますが、とりあえず始めるのであれば無料のものありますから探してみてください。
無料コーディングソフト
・Crescent Eve
有料コーディングソフト
・Dreamweaver
・Coda2
様々ありますから、とりあえず利用してみて本格的に始める方は有料版を利用してみてください。
→基本的にコードを記載する行為はどれを使っても同じですので、こちらの記事ではDreamweaverを利用して内容を紹介していきます。
ブラウザー
後々、自分の書いたコードを確認する際に非常に便利な機能がありますので、こちらは、Google Chromeを利用していきましょう。
ダウンロードURLはこちら→https://www.google.co.jp/chrome/browser/desktop/
環境が準備できていることを確認する
最低限、上記の２つが揃っていればコーディングをしていくことはできます。実際にサイトを公開するまでになると、WEBサーバーやドメインなど複数の物が必要となりますが、現状の段階ではこれだけあれば十分です。
では早速、ダウンロードしてきたコーディングソフトと、ブラウザーを使って簡単なテキストを作成してみましょう。
step1 まずはコーディングソフトを立ち上げてみる
まずはコーディングソフトを立ち上げてみてください。（紹介はDreamweaverを使用しています。）
すると、まっさらな画面が表示されるかと思います。まっさらな画面に下記と同じものを記述してください。（コピー＆ペーストで結構です。）
Dreamweaverの方は新規でHTMLのファイルを作成すると自動で下記の文章が記載されているかと思います。
[crayon-69a7a47e10414638423180/]これはHTMLを記述していく上でベースとなる構造文なので、簡単に解説をしていきます。
<html>の中身は大きく head と body の2つの要素にわけることができます。
step2 文字を書いて保存してみる
ここまではコーディングソフトを開いて、最低限のものを準備したというだけです。まずは一度文章を書いてみましょう。記載する箇所は
実際にはコードはこのようになります。
[crayon-69a7a47e10423717398445/]ここまでできたら、一度保存をしてみましょう。
保存方法は、macであれば「⌘command」＋「s」で、Windowsであれば「Ctrl」＋「s」で保存ができると思います。
保存するときは名前をindex.htmlとして、デスクトップに保存をしておきましょう。このindex.htmlという名前は、HPの中で特殊な存在で基本的にTOPはこのファイル名にして保存する必要があるので、覚えておきましょう。
ここまでで、文字を書いてみて保存をするという、基礎の部分が完了しました。
step3 書いたものをWEB画面で確認してみる
実際にここまでで準備をしてきたindex.htmlファイルをブラウザにドラッグ&ドロップをして確認してみましょう。
すると画面が下記のように変わることを確認してください。
先ほど記述した文章が表示されていることがわかりますね。
まとめ
今回はHTMLの基礎的として文章を書いてみる。と、ご紹介してみました。次回はこの文章に対してCSSで装飾をしてみるところからご紹介していきます。
]]>みなさんこんにちは。
今回から、初心者向けのHTML・CSSを勉強方法などをご紹介していきます。
とりあえず喋ることが好きな営業マンが、実際に自分でコードが書けるようになるまで、どんなことを勉強しているかを記載していきます。
目標は、HPを１つ自分で作れるようになることです！！
学習のための準備
まず、HPを自分で作れるようになるためには、必要な物がいくつかあります。
１・コーディングソフト
HTMLやCSSと言われるHPを構成する言語をコーディング（書く）するには、メモ帳のような単純なテキストエディタを使用して作成することもできますが、やはり専用のコーディングソフトを活用することで、簡単＋スピーディーにコーディングを進めていくことができます。コーディングソフトは様々ありますが、とりあえず始めるのであれば無料のものありますから探してみてください。
無料コーディングソフト
・Crescent Eve
有料コーディングソフト
・Dreamweaver
・Coda2
様々ありますから、とりあえず利用してみて本格的に始める方は有料版を利用してみてください。
→基本的にコードを記載する行為はどれを使っても同じですので、こちらの記事ではDreamweaverを利用して内容を紹介していきます。
ブラウザー
後々、自分の書いたコードを確認する際に非常に便利な機能がありますので、こちらは、Google Chromeを利用していきましょう。
ダウンロードURLはこちら→https://www.google.co.jp/chrome/browser/desktop/
環境が準備できていることを確認する
最低限、上記の２つが揃っていればコーディングをしていくことはできます。実際にサイトを公開するまでになると、WEBサーバーやドメインなど複数の物が必要となりますが、現状の段階ではこれだけあれば十分です。
では早速、ダウンロードしてきたコーディングソフトと、ブラウザーを使って簡単なテキストを作成してみましょう。
step1 まずはコーディングソフトを立ち上げてみる
まずはコーディングソフトを立ち上げてみてください。（紹介はDreamweaverを使用しています。）
すると、まっさらな画面が表示されるかと思います。まっさらな画面に下記と同じものを記述してください。（コピー＆ペーストで結構です。）
Dreamweaverの方は新規でHTMLのファイルを作成すると自動で下記の文章が記載されているかと思います。
[crayon-69a7a47e10414638423180/]これはHTMLを記述していく上でベースとなる構造文なので、簡単に解説をしていきます。
<html>の中身は大きく head と body の2つの要素にわけることができます。
step2 文字を書いて保存してみる
ここまではコーディングソフトを開いて、最低限のものを準備したというだけです。まずは一度文章を書いてみましょう。記載する箇所は
実際にはコードはこのようになります。
[crayon-69a7a47e10423717398445/]ここまでできたら、一度保存をしてみましょう。
保存方法は、macであれば「⌘command」＋「s」で、Windowsであれば「Ctrl」＋「s」で保存ができると思います。
保存するときは名前をindex.htmlとして、デスクトップに保存をしておきましょう。このindex.htmlという名前は、HPの中で特殊な存在で基本的にTOPはこのファイル名にして保存する必要があるので、覚えておきましょう。
ここまでで、文字を書いてみて保存をするという、基礎の部分が完了しました。
step3 書いたものをWEB画面で確認してみる
実際にここまでで準備をしてきたindex.htmlファイルをブラウザにドラッグ&ドロップをして確認してみましょう。
すると画面が下記のように変わることを確認してください。
先ほど記述した文章が表示されていることがわかりますね。
まとめ
今回はHTMLの基礎的として文章を書いてみる。と、ご紹介してみました。次回はこの文章に対してCSSで装飾をしてみるところからご紹介していきます。
]]>
環境
今回はCAKEPHP３系で行います。
準備
はじめに、サンプルで３つのテーブルを用意します。
postsテーブル：id、name、status、type、seq、created、modified
categoriesテーブル：id、seq、created、modified
categories_postsテーブル：category_id、post_id
ケース別サンプルコード
postに条件を課して一覧を取得する
ページングなしの場合
この場合、find()を使用した一般的なコードは次のようになるでしょう。
[crayon-69a7a47e112f2212940738/]contain()でcategoriesテーブルを結合して、さらにその中で条件や順序を指定しています。where()では複数の条件を指定しています。並列の条件はANDで繋がり、ORの中の条件はORで繋がります。また、LIKE検索する場合はキーワードの前後に%をつけます。order()で順序を指定しています。
この時に実行されるSQLは次のようになります。
[crayon-69a7a47e112fc534350800/][crayon-69a7a47e11301152712682/]
ページングありの場合
この場合、paginate()を使用した一般的なコードは次のようになるでしょう。
[crayon-69a7a47e11306707361163/]基本的な構造はページングなしの場合と同じです。
この時に実行されるSQLは次のようになります。
[crayon-69a7a47e1130c882131527/][crayon-69a7a47e11310134780663/]ページングありの場合、postsテーブルの取得にLIMITがついています。この数はlimitを指定してあげることで変更が可能です。
特定のcategoryに属するpostを取得する
ページングなしの場合
この場合、find()を使用した一般的なコードは次のようになるでしょう。
[crayon-69a7a47e11315388738410/]leftJoin()でcategoriesテーブルをLEFT JOINしてwhere()でpostが属するcategoryを指定しています。
この時に実行されるSQLは次のようになります。
[crayon-69a7a47e1131a484880391/]
ページングありの場合
この場合、paginate()を使用した一般的なコードは次のようになるでしょう。
[crayon-69a7a47e1131e142736336/]基本的な構造はページングなしの場合と同じです。
この時に実行されるSQLは次のようになります。
[crayon-69a7a47e11323998304680/]
結び
私がCAKEPHPを使用しているときよくあるのは、公式のドキュメントでなかなか見つけられないメソッドがあったりして、いろいろとググって発見することです。今回はこれまでいろいろと調べてわかった検索の方法をまとめて掲載しました。
実際の開発ではもっと多くのテーブルが結合したり、条件が複雑だったりすることもありますが、基本的には今回掲載したものを組み合わせて大部分は対応可能かなと思います。
]]>環境
今回はCAKEPHP３系で行います。
準備
はじめに、サンプルで３つのテーブルを用意します。
postsテーブル：id、name、status、type、seq、created、modified
categoriesテーブル：id、seq、created、modified
categories_postsテーブル：category_id、post_id
ケース別サンプルコード
postに条件を課して一覧を取得する
ページングなしの場合
この場合、find()を使用した一般的なコードは次のようになるでしょう。
[crayon-69a7a47e112f2212940738/]contain()でcategoriesテーブルを結合して、さらにその中で条件や順序を指定しています。where()では複数の条件を指定しています。並列の条件はANDで繋がり、ORの中の条件はORで繋がります。また、LIKE検索する場合はキーワードの前後に%をつけます。order()で順序を指定しています。
この時に実行されるSQLは次のようになります。
[crayon-69a7a47e112fc534350800/][crayon-69a7a47e11301152712682/]
ページングありの場合
この場合、paginate()を使用した一般的なコードは次のようになるでしょう。
[crayon-69a7a47e11306707361163/]基本的な構造はページングなしの場合と同じです。
この時に実行されるSQLは次のようになります。
[crayon-69a7a47e1130c882131527/][crayon-69a7a47e11310134780663/]ページングありの場合、postsテーブルの取得にLIMITがついています。この数はlimitを指定してあげることで変更が可能です。
特定のcategoryに属するpostを取得する
ページングなしの場合
この場合、find()を使用した一般的なコードは次のようになるでしょう。
[crayon-69a7a47e11315388738410/]leftJoin()でcategoriesテーブルをLEFT JOINしてwhere()でpostが属するcategoryを指定しています。
この時に実行されるSQLは次のようになります。
[crayon-69a7a47e1131a484880391/]
ページングありの場合
この場合、paginate()を使用した一般的なコードは次のようになるでしょう。
[crayon-69a7a47e1131e142736336/]基本的な構造はページングなしの場合と同じです。
この時に実行されるSQLは次のようになります。
[crayon-69a7a47e11323998304680/]
結び
私がCAKEPHPを使用しているときよくあるのは、公式のドキュメントでなかなか見つけられないメソッドがあったりして、いろいろとググって発見することです。今回はこれまでいろいろと調べてわかった検索の方法をまとめて掲載しました。
実際の開発ではもっと多くのテーブルが結合したり、条件が複雑だったりすることもありますが、基本的には今回掲載したものを組み合わせて大部分は対応可能かなと思います。
]]>
HP（ホームページ）作ってどうするの？運用ステップの初歩を確認
なんて記事を以前に書いていましたが、今回はサイトを分析する上で非常に重要な”コンバージョン”の設定方法に関して記事を書いていきたいと思います。
過去の記事はこちらから
同様の記事
※ Googleアナリティクスの導入方法は、ステップ４を確認してみてください。
コンバージョンとは
コンバージョンとは言葉の意味が広くよくわかりにくいかと思います。ここでは、「目標」という言葉だと思っていただければ結構です。例えば、ECサイトの運営をしている場合「購入数」をコンバージョンにすることもあれば、特定のページの「滞在時間」や「アクセス数」をコンバージョンに設定することもあります。
”設定をする”という言葉を使ったのは、サイトを分析する上で”自分が定める目標”という意味で書いています。
アナリティクスで、自分の確認したい「目標」を設定することで、今後のサイト運営を効率的にできるようしっかりと設定方法を確認しておきましょう。
Googleアナリティクスのコンバージョン
Googleアナリティクスでは、設定できるコンバージョンは数パターンありますが、今回は非常に利用することが多い「目標URLの表示」をご紹介してきます。
「目標URLの表示」は例えば、”問い合わせ完了ページ”（note.soushin-lab/co.jp/thanks...）のように、任意のページが表示された回数計測することが可能です。
また、完了ページまでに、「どのページを見たのか」を指定しておくことで、特定のユーザー行動を可視化することも可能です。サイトの運用する際には非常に便利な設定ですので必ず覚えて設定しておきましょう。
設定は下記図の場所より行います。
画面を開くと「＋新しい目標」から新規のコンバージョンを設定していきます。
クリックすると下記のように画面が表示されますので、テンプレートの中から お問い合わせ＞お問い合わせにチェックを入れてコンバージョンの種類を設定します。
この、テンプレートの中には他にも、標準的な目標を設定するのに参考にできるため、用途に合わせて設定をしてみましょう。
「続行」を押して下記目標の説明で「目標の名前」「タイプ」を設定していきます。
今回は「目標URLの表示」を設定することにしていますので、上記のように”到達ページ”にチェックを入れて続行を押してください。
目標の詳細では、実際に測定したい「到達ページURL」、金額換算する際の「値」、目標達成までの推移が明確な場合は「目標到達プロセス」を設定することが可能です。
最終的に「問い合わせ件数」を測定する場合は、問い合わせ完了画面を到達ページとしてURLを登録し、そこに至るまでのページを任意で測定する場合は別のステップを追加することで測定することが可能です。
これで基本的な設定は完了です。
まとめ
せっかくHP作って運用しているけど、実際のコンバージョン数（問い合わせ件数や、サイトの目標滞在時間・サイトのページ遷移など）を計測できる設定がされていないと非常にもったいないです。
今回はコンバージョン設定の基礎から、代表的な設定例、そして改善施策を考えるのに重要なアナリティクスにおけるコンバージョンの設定方法を紹介しました。
ではまた！
]]>
HP（ホームページ）作ってどうするの？運用ステップの初歩を確認
なんて記事を以前に書いていましたが、今回はサイトを分析する上で非常に重要な”コンバージョン”の設定方法に関して記事を書いていきたいと思います。
過去の記事はこちらから
同様の記事
※ Googleアナリティクスの導入方法は、ステップ４を確認してみてください。
コンバージョンとは
コンバージョンとは言葉の意味が広くよくわかりにくいかと思います。ここでは、「目標」という言葉だと思っていただければ結構です。例えば、ECサイトの運営をしている場合「購入数」をコンバージョンにすることもあれば、特定のページの「滞在時間」や「アクセス数」をコンバージョンに設定することもあります。
”設定をする”という言葉を使ったのは、サイトを分析する上で”自分が定める目標”という意味で書いています。
アナリティクスで、自分の確認したい「目標」を設定することで、今後のサイト運営を効率的にできるようしっかりと設定方法を確認しておきましょう。
Googleアナリティクスのコンバージョン
Googleアナリティクスでは、設定できるコンバージョンは数パターンありますが、今回は非常に利用することが多い「目標URLの表示」をご紹介してきます。
「目標URLの表示」は例えば、”問い合わせ完了ページ”（note.soushin-lab/co.jp/thanks...）のように、任意のページが表示された回数計測することが可能です。
また、完了ページまでに、「どのページを見たのか」を指定しておくことで、特定のユーザー行動を可視化することも可能です。サイトの運用する際には非常に便利な設定ですので必ず覚えて設定しておきましょう。
設定は下記図の場所より行います。
画面を開くと「＋新しい目標」から新規のコンバージョンを設定していきます。
クリックすると下記のように画面が表示されますので、テンプレートの中から お問い合わせ＞お問い合わせにチェックを入れてコンバージョンの種類を設定します。
この、テンプレートの中には他にも、標準的な目標を設定するのに参考にできるため、用途に合わせて設定をしてみましょう。
「続行」を押して下記目標の説明で「目標の名前」「タイプ」を設定していきます。
今回は「目標URLの表示」を設定することにしていますので、上記のように”到達ページ”にチェックを入れて続行を押してください。
目標の詳細では、実際に測定したい「到達ページURL」、金額換算する際の「値」、目標達成までの推移が明確な場合は「目標到達プロセス」を設定することが可能です。
最終的に「問い合わせ件数」を測定する場合は、問い合わせ完了画面を到達ページとしてURLを登録し、そこに至るまでのページを任意で測定する場合は別のステップを追加することで測定することが可能です。
これで基本的な設定は完了です。
まとめ
せっかくHP作って運用しているけど、実際のコンバージョン数（問い合わせ件数や、サイトの目標滞在時間・サイトのページ遷移など）を計測できる設定がされていないと非常にもったいないです。
今回はコンバージョン設定の基礎から、代表的な設定例、そして改善施策を考えるのに重要なアナリティクスにおけるコンバージョンの設定方法を紹介しました。
ではまた！
]]>
創新ノートの更新もあわや一年の間が空いてしまうのでは？なんてくらいお久しぶりです。
更新をしていないにも関わらず多くの方にアクセスを頂きまして有難うございます。
今回はWEB開発をしている人も、そうでない人でも喜んでもらえるものを紹介します！
普段見ているサイトの情報をエクセルにダウンロードできたらいいのになーなんて思ったことないですか？
システム開発はしないけど、楽天やAmazonの価格とかを定期的に確認している、、
などWEBページをスクレイピング（情報抽出）する時に便利なサービスを紹介します。
無料スクレイピングツール import.io
https://import.io/signup?returnPath=%2Fstart
こちらの画面から任意のアカウントにてログインをしてください。
import.ioの使い方
使い方は本当に簡単です。データを取得したいページのURLを入力すると、自動でデータ箇所を判断して情報を集めてくれるなんとも便利なサービスなのです！！
ログイン後の画面は上記のような形になっており、画面左上にある『New Extractor』を押してURLの入力画面を表示してください。
実際のURL入力画面は下記のようになります。
あとはここに情報抽出したいサイトのURLを入力するだけ！
非常に簡単ですよね。
実際にやって見た画面をご紹介
わかりやすいので、Amazonのカップラーメンを検索したページをサンプルに試して見ましょう
このページのURLをコピーしてimport.ioに入れて見ましょう
すると、下記のようになります。
サイトによってスクレイピングの精度が違ってきますが、一度に情報を抽出したい時には非常に便利ですね！
https://www.youtube.com/watch?v=yezXNfkbOSk使い方を紹介している動画もありますのでお時間のあるときにでも読んで見てください。
では、また不定期で更新していきます。
]]>
創新ノートの更新もあわや一年の間が空いてしまうのでは？なんてくらいお久しぶりです。
更新をしていないにも関わらず多くの方にアクセスを頂きまして有難うございます。
今回はWEB開発をしている人も、そうでない人でも喜んでもらえるものを紹介します！
普段見ているサイトの情報をエクセルにダウンロードできたらいいのになーなんて思ったことないですか？
システム開発はしないけど、楽天やAmazonの価格とかを定期的に確認している、、
などWEBページをスクレイピング（情報抽出）する時に便利なサービスを紹介します。
無料スクレイピングツール import.io
https://import.io/signup?returnPath=%2Fstart
こちらの画面から任意のアカウントにてログインをしてください。
import.ioの使い方
使い方は本当に簡単です。データを取得したいページのURLを入力すると、自動でデータ箇所を判断して情報を集めてくれるなんとも便利なサービスなのです！！
ログイン後の画面は上記のような形になっており、画面左上にある『New Extractor』を押してURLの入力画面を表示してください。
実際のURL入力画面は下記のようになります。
あとはここに情報抽出したいサイトのURLを入力するだけ！
非常に簡単ですよね。
実際にやって見た画面をご紹介
わかりやすいので、Amazonのカップラーメンを検索したページをサンプルに試して見ましょう
このページのURLをコピーしてimport.ioに入れて見ましょう
すると、下記のようになります。
サイトによってスクレイピングの精度が違ってきますが、一度に情報を抽出したい時には非常に便利ですね！
https://www.youtube.com/watch?v=yezXNfkbOSk使い方を紹介している動画もありますのでお時間のあるときにでも読んで見てください。
では、また不定期で更新していきます。
]]>
[angularjs_sample2]
]]>[angularjs_sample2]
]]>