はてなブックマーク

【Google】2021年3月以降モバイル環境でアクセス出来ないサイトをインデックスしない方針 2020.10.16 2020.10.20 SEO （2020/10/20 一部記述に誤解を招く表現があったため訂正いたしました。） Googleのウェブトレンドアナリスト、ジョンミューラー氏がオンラインで開催されているPubCon2020のKeynoteで以下の発表をしました。 Content only visible on desktop will be ignored つまり、「デスクトップ版でしか表示できないコンテンツは無視する」ということです。そしてインデックスをさせたいコンテンツ（構造化データ、画像、動画など）はモバイルで表示ができなければいけません。最終的な期限は2021年3月になります。 2021年3月以降はモバイルで表示できなければインデックス自体がされません。 これまで、 G

jQuery&CSSでレスポンシブなハンバーガーメニューを簡単に作成する方法 2022.02.22 2022.04.11 ECサイト構築 ハンバーガーメニューは、今やスマートフォンサイトやタブレットサイトにて広く普及されているメニューの表示形式であり、中にはPCサイトでも設置されている事例さえ見られます。かつては、これがメニューだと認識されないという短所もありましたが、ハンバーガーメニューのデザインが一般的に認知広まったことで、操作方法と、操作することによって期待できる表示結果を多くの人が予想できるようになりました。 スマートフォンのような表示領域が小さいデバイスであっても、コンテンツの表示領域を妨げることなく、特に、カテゴリ数等のメニューが多いサイトに相性が良いハンバーガーメニューについて、レスポンシブ対応で簡単に作成できる方法をまとめました。 ハンバーガーメニューとは？ 赤枠で囲んだと

【jQuery】レスポンシブなサイトで、デバイスサイズで適用させるjavascriptを切替 2018.04.12 2018.04.16 レスポンシブWebデザイン レスポンシブウェブデザインではCSS（スタイルシート）を画面の横幅に応じて設定したブレイクポイントを切り替えることで、HTMLコンテンツの見た目を調整しています。CSSではメディアクエリを利用してこの切り替えを実施していますが、JavaScriptの切り替えはどのように行えばよいのでしょうか？ 今回はレスポンシブウェブデザインでブレイクポイント毎にJavaScriptの切り替えを実現するjQueryの実装方法をご紹介します。 実装例 実装例は以下になります。 <script type="text/javascript"> jQuery(document).ready(function($) { //600px以上の場合 if

ファーストビュー一秒以内を実現するために！HTML/CSS/JS記述の工夫 2018.05.08 2018.05.14 SEO ECサイトの運営だけでなく、サイトを運営するウェブマスターにとって重要なのはサイトの表示速度です。2018年7月からGoogleは「スピードアップデート」を実施し、ユーザーにとってあまりにも遅いサイトの評価を下げる発表をしています。 特にユーザーがランディングした際に表示されるファーストビューは特に重要とされ、コンバージョンや離脱率にも大きな影響を与える要素となっています。 ファーストビューの重要性 表示速度はモバイルではユーザー満足度に大きくかかわります。特に検索エンジンの最大手、Googleは2013年8月（約5年前！）、「1秒以内にAbove the foldを表示することが重要である」と言及されています。 参考： もう遅いとは言わせない！Google推奨の

datalist要素を使ったフォームの作り方 今回はHTML5に新しく加わったdatalist要素を使ったフォームの作り方を紹介します。datalist要素とはinput要素にサジェスト機能を追加する要素です。 フォームを作成するとなると<input type=”text”>や<select>を使うことが多いですが、datalist要素を使うことで、これら両方の入力形式を一つのフォームで併せて実現することができます。 datalist要素を使ったフォームの実装デモ 次のフォームにテキスト入力もしくはダブルクリックしてメニューを選択してください。 好きな拳法： ダブルクリックすると選択肢に 北斗神拳 南斗聖拳 南斗水鳥拳 と表示されます。これら選択肢のいずれかを選ぶとフォームに選択肢のテキストが入力されます。テキストはもちろん後で修正できます。 ※safariやIE9以下といったdatali

MySQLインストール時に遭遇する「アクセス拒否エラー(Access denied for user ‘root’@’localhost’)」の対処 2016.11.01 技術 こんにちは、開発部山田です。 朝晩寒くなってきましたね。皆さんいかがお過ごしでしょうか。 今回はDockerなどで環境構築していると稀に遭遇する、 「mysqlでroot権限が設定されていなときのエラー」についての対処法をご紹介します。 $ mysql -u root ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO) rootユーザの権限設定がされていなく、上記のようなエラーが発生することがあるようです。 PHP StormなどのIDEや、sequel proなどのMySQL管理ツールでDBに接続でき

開閉可能なアコーディオンパネル タイトルをクリックすることで本文が表示されたり閉じたりを切り替えることのパネルをJqueryを使って作成することができます。様々なサイトで定番として利用されることが多いですが、画面領域が限られたスマートフォン上で複数のコンテンツを効率よく表示させたいといった場合にこそ威力を発揮する実装となります。 扱うコード量も比較的少なく簡単に実装できるので是非とも使っていただければなと思います。 jQueryとJavaScriptの関係 ちょっとその前に…jQueryとJavaScriptの関係とは何なのでしょうか？ JavaScriptはブラウザと直接やりとりしてWebページの見た目や内容を変える便利な言語です。 ところがJavaScriptには弱点があり、IE8以前のIEとそれ以外のブラウザで大きく挙動が異なることや、最新のブラウザでも動作が微妙に異なることなど、J

MP4形式の動画をHTMLに埋め込んで再生しよう 別記事にてECサイトにYoutube等の動画コンテンツを設置する方法を公開しておりますが、今回はスマートフォンで投影したり、動画編集ソフトを使って作成したmp4動画をHTML5ページに埋め込んで再生するための方法を紹介します。 実際の商品の動きや音などを確かめる際に、動画は大変有効です。最近では動画でのマーケティングが盛んになっていることもあり動画を利用することが非常に効果のある施策になっています。 ECサイトなどでは購入につながる可能性も高くなるので、覚えておくと大変便利です。 video要素について知っておこう HTML5では動画を再生するために、video要素が追加されました。以前はFlashなどプラグインをインストールしないとブラウザ上での動画再生はできませんでしたが、このvideo要素の登場でHTMLへの簡易な記述で動画再生ができ

メンテ不要！ECサイトにカレンダーを埋め込むたった3つのステップ 2016.06.10 2017.02.27 おすすめ メンテ不要のカレンダー埋込方法 こんにちは、サポート部の市川です。 ページのサイドやフッターのエリアにカレンダーを設置している通販サイトはたくさんあります。しかしHTMLとCSSのみで作成している場合、毎月のカレンダーのHTMLを変更するなどメンテナンスがやや面倒です。 今回は、Webサイト制作のSYNCK GRAPHICAさんが無料で公開している【営業日・定休日カレンダー】のJavascriptコードをカスタマイズさせていただき、通販サイトに表示するカレンダーとして埋め込む方法をご紹介します。 定休日・臨時休みを予め登録できるカレンダー 今回、ご紹介するカレンダーは以下の特長があります。 毎週の定休日・祝日休みを設定できる Javascriptコードに一度記述をすれば毎

長いスマホ商品ページでも購入導線をわかりやすく表示し離脱を防ぐ 画像やテキストで商品が訴求された長い商品ページは商品の情報が充実していてるのですが、いざ買おうと思ったときに「どっから買うたらええねん」となってしまうことがあります。特にスマートフォンでは画面が小さい分注意。 そうなってしまわないように、今回は商品ページでユーザーにを迷わせないようにカートボタンへの固定ボタンを表示させます。

google feed API遂に廃止か？！ サポート部の山本です。 先週大きなニュースがありました。 google feed APIが動かなくなっているということです。。。 正確には、廃止したのかはわかりませんが以前にも一旦廃止され、その後復旧するということがありました。 復旧するかもしれないという可能性に懸けるのも一つですが この際別の方法で実装するのが良いかと思います。 ということで今回は代替方法をご案内します！ HTMLとJSを使い実装していきます。 コピペしていただくだけで、ブログなどのフィードを表示させられます。 wordpressのアイキャッチに設定している画像も出せます。 以下実装方法をご案内します。 表示させる条件として、サイトとブログなどのドメインが同じであることと Wordpressをお使いいただいていることがございますので、ご注意ください。 別のドメインや複数表示さ

ECサイトにYoutube等の動画コンテンツを設置する方法【レスポンシブデザイン対応】 2022.01.31 2022.04.11 EC運営ノウハウ ECサイトにおける動画コンテンツの活用は、消費者の購買意欲の向上に繋げるきっかけとなります。実店舗のように商品を見たり触れたりすることができない代わりに、動画コンテンツを見ることで動きや音など静止画では取得できない情報を知り得ることに繋がります。また、商品の実際の使用感を確認できたり、設置や組み立ての方法を説明するためにも有効です。 ECにおける動画コンテンツの公開は販促プロモーションの一環として、今に始まったわけでもなく以前より注目されておりましたが、最近のYoutube等の動画共有サービスが広く認知されたことで、動画コンテンツの重要性を再認識されているEC事業者様も多いかと思います。そこで本記事では、作成した動画コンテンツをECサイト上で

皆さんこんにちは、サポート部の山本です。厳しい残暑もやっと終わりを迎え、逆に朝晩の冷え込みが強くなってきています。気温の変化は体調を崩す要因にもなりますので、皆さん気をつけて下さい。 さて今回はECサイトでもよく使われている「フォーム」を簡単に入力しやすく装飾できる方法をご紹介したいと思います。 様々な場面で使われる「フォーム」 ECサイトではメルマガ登録フォームや問い合わせフォーム、注文者情報入力フォーム等、さまざまな場面で利用されています。今回はCSSだけでフォームを簡単に装飾してみます。 まず初めに以下URLを見てください。 https://ssl.aispr.jp/yamay/form/inquiry/ シンプルですが、いかにも地味でフォーム欄も小さく入力しやすいとは言えないですね。これをベースに装飾していきましょう。 フォーム入力エリアを広げる まずは以下を追記してテキストインプ

【Doctrine】Query Builderでのデータ取得は使い方が分かれば便利！ 2015.10.26 2020.01.24 技術 こんにちは。開発部の原田です。 PHPではデータベースのデータを操作するためのモジュールなどが用意されていますが、その他にも“Doctrineを使う”という選択肢があります。 Doctrineとは？ ORMライブラリの1つで、平たく言えば「SQLを書かずオブジェクト指向でデータベースの操作ができるもの」と思って頂ければと思います。 Doctrineではデータベースに保存するセッターメソッドや、逆にデータを取得するゲッターメソッドがありますが、「これとこれとこれの条件に合致したデータが欲しい！」となるとプログラム側での条件分岐や繰り返しが必要になってきます。 そういう場合は、データベースからデータを取得する時点で細かい指定ができるQuery Builderを

JQueryを使ってコンテンツの表示順を入れかえたい こんにちは、サポート部の市川です。毎日暑い日が続いていますが、体調などは崩されていませんでしょうか。 さて、Web制作をしていると、ページのテキストや画像といったコンテンツの順番を入れかえたいという状況がでてくるかと思います。 多くの場合、HTMLを単に書き換えるだけでよいのですが、例えばCMSでの会員登録画面の「名前」や「会社名」、「住所」といった項目の表示順を入れかえたいといった場合にシステムの都合上、設定で簡単に入れ替えることができない場合もあると思います。 今回はそのような時に、Jqueryを使って簡単にコンテンツの表示順の入れかえするための方法を紹介します。 【Jquery】beforeメソッドとafterメソッドを使ってdivコンテンツを入れ替える 次のURLで表示されるページのdivでくくられた５つのコンテンツ「A・B・C

非MAMP環境でMacにXdebugを入れてみる こんにちは。開発部の原田です。 PHPでプログラミングする上でなかなか便利なXdebugを個人のMacに入れてみました。 Macへの導入手順になりますが、備忘録も兼ねてまとめたいと思います。 ※非MAMP環境です。 Xdebugとは？ PHPのデバッガです。デバッガとはプログラムのバグの発見や修正（デバッグ）を支援してくれるプログラムのことです。デバッグによく使う「var_dump()」を見やすく整形してくれたり、エラーが出た時どの処理でエラーが出たかまで表示してくれる便利なものです。 …ということで、早速作業に移りましょう。 Xdebugを入れてみよう！ 入れる前にまず確認しておかなければいけないことがあります。PHPがデバッグ版ではないことです。 確認方法は、下記コマンドで確認するか php -i | grep 'Debug Build

ECにもAMP対応の波が 先日正式にリリースされた検索結果のコンテンツを爆速で表示する「AMP」。EC大手のZOZOTOWNさんが対応されていたのでご紹介します。 AMPとは GoogleやTwitterなどが力を入れているAMPプロジェクト。以前「Googleなどが立ち上げたAMPが静的ページを超高速化する！」でもご紹介しましたが、検索結果での表示から、コンテンツの閲覧までを非常に高速にするHTMLの仕様です。 例えば「サッカー」で検索をしてみると、、、 「サッカー」で検索 このようにサッカーに関連したニュースが検索結果の上位に表示されます。さらにそれぞれのニュースをタップすると、ページを読み込むこと無くコンテンツを表示させるというものです。AMPのHTMLの仕様に沿って静的ページを作成すると、当てはまるクエリで検索された時にこのような読込が実行されます。 ZOZOTOWNの商品ページが

フォーム入力を楽にするフリガナ自動入力 ECサイトで買い物や問い合わせ、会員登録などのフォーム入力をする際に、「フリガナ」の入力が必要になる場合があります。 出来るだけフォーム入力の手間をなくし、離脱率を減らすよう工夫が必要ですが、今回はフォーム入力をした際に名前の漢字に合わせたフリガナを自動で入力するjQueryプラグインをご紹介します。 名前を入力すればフリガナを自動入力できるjquery.autoKana.js 実装にはjquery.autoKana.jsというプラグインを使用します。 ダウンロードは以下より。 GitHub – harisenbon/autokana: Library for automatically rendering Furigana for inputted Japanese Text 設置方法は以下の通りです。 ①jQueryライブラリを読み込み まずはj

意外と簡単なGoogle Webフォントを活用する2つのステップ！ 2016.03.15 2016.05.12 おすすめ みなさんこんにちは！あっという間に3月ですね。。。 今年ももう3ヶ月過ぎたことに驚きを隠せない開発部ヤマダです。 さて、本日はGoogleのWebフォントを使用する方法をを紹介します！ （若干いまさら感が否めないですが。。。） “Web Font とは” 普段Webサイトを製作していると、見出しやタイトルでサイトのイメージに合ったフォントを使いたいときってありますよね。 私も今まではIllustratorで画像を作成して、それをそのまま要素で配置していたのですが、CSSでフォントを指定することで好きなフォントを表現することが可能です。 CSSの記述で body{ font-family: Helvetica , "游ゴシック" , "Yu Gothic" , sans-

アプリケーションの登録が完了すると、連携するために必要な値である「CLIENT ID」と「CLIENT SECRET」が付与されます。 本日は最後にこのID/キーを使用して、Instagramのアカウントの認証と、プロフィール情報を取得するところまで実装してみます！ サイトの認証や、実際にInstagramの画像を表示させたいページにPHPのコードを記述していきます。今回はTOPページである index.php に下記のコードを記述しました。 （クライアントID, クライアントシークレットは秘密なので伏せておきます★） // 設定 $client_id = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' ; // クライアントID $client_secret = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' ; // クライアントシークレット

前回の記事「テスト自動化ツールseleniumでファイルのアップロード予約をする方法」ではWebサービスやWebシステムにログインしてCSVやファイルを予約UPすることを想定した記事でした。 普段みなさまはFTPを利用してファイルを色々UPしてWeb上の例えばhtmlやCSSなどを更新していると思います。そういったFTPを利用した場合も予約でファイルをUPできたらいいのに・・・とお考えのはずです。 ・・・実はこれも可能なんです。 CSSなどをFTPでアップする具体的な方法 「ファイルアッパー」というものを利用すると便利です。 http://hp.vector.co.jp/authors/VA036522/soft.htm このサイトのマニュアルは非常に分かりやすく記載があるのでここで詳細を説明するのは割愛させていただきますが、簡単に設定が可能です。手順にそって行ってください。 ファイルアッ

2015年末、インターネット利用端末はスマホがPCを上回り、通販市場においてもスマホ中心のインターネット市場となりました。スマホ中心のEC市場へと移行する中で、今も諸事情でなかなか着手できなくECサイトのスマホ対応が未完了もしくは不完全なECサイトも散見されます。 今一度、ECサイトのスマホ対応方法を整理し、2016年以降にスマホ対応を強化される場合、どの方法がベストなのか？について、Googleが提言する３手法（Googleディベロッパーズでのスマホ対応方法）＋以前使われたコンバータ（自動変換ツール）を含め整理解説します。 技術的なことはさておき、少し技術に詳しくないECサイトご担当者様がECサイト運営視点で分かりやすいよう解説したいと思いますので、これからスマホ対応のさらなる強化を検討される際の参考にしていただけましたらと思います。 ECサイトのスマホ対応方法 Googleが提言するス

WordPressプラグインでAMP対応 以前の記事、「Googleなどが立ち上げたAMPが静的ページを超高速化する！」でご紹介した、検索結果からのコンテンツ表示を高速化するAMP。AMPのHTMLの仕様に則って記述をすればAMP対応が可能ですが、今回はWordPressのプラグインを使って簡単にAMP対応する方法をご紹介します。 WordPressのプラグインをインストール まずはWordPressのプラグインで新規追加から、「AMP」と検索します。いくつかプラグインが表示されますが、こちらのプラグインをインストールして有効化してください。 パーマリンクの設定を変更 設定を有効化したら、「設定」→「パーマリンク設定」へとすすみ「変更を保存」を押します。設定はこれだけでOKです。あとは、実際にAMPの設定がされているかを確認します。 AMPで設定したページにアクセスしてみる 問題なくインス