TCD FAKE(TCD074) カスタマイズ事例 – ヘッダー動画をレスポンシブに

当オフィスではTCDのFAKE(TCD074)の特別ライセンスを取得しておりますが、たまに、このFAKE(TCD074)テーマについてのカスタマイズのお問い合わせが入ることがあります。

そして最近実際にあったお問い合わせなのですが、

「トップヘッダーに動画を使っているが、スマートフォンでの閲覧時にヘッダー動画の一部分しか表示されない。PCとスマホ、それぞれで別の動画を表示できないか」

とのご要望でした。

確かに、FAKE(TCD074)のヘッダーには画像スライダーだけではなく動画を設定できるんですが、動画は一つしか設定できないので、パソコンでの閲覧を想定した横長の動画で、かつ、動画が左右に動きのあるものだと、スマホで閲覧した際に動画の一部しか表示されず、肝心な部分が伝わらない等の問題が確かにあります。

この問題に対応するには、PCおよびスマホのどちらで閲覧してもそれなりに表示されるような構成で、フレームサイズもPCとスマホのどちらにもフィットするようなアスペクト比の動画を用意するしかないのですが、これにも限界があります。

そして一番良いのは、PC用とスマホ用それぞれのバージョンの動画を用意する事。

実際にヘッダー部分に動画を用いているサイトで、PCとスマホで動画を出し分けているサイトがあります。それが下のスキンケア商品のショッピングサイトであります「ピカイチ」さんのサイトです。

ピカイチ公式ショッピングサイト | さぁ、しあわせなお肌になろう。 (pikaichi.co.jp)

このサイトにアクセスするとまず飛び込むのがCM調の動画です。そして、このサイトではパソコンで見てもスマホで見ても動画は最適に表示されています。理由は、アクセスユーザーの端末に応じて(PCかスマホか)2種類の動画を出し分けているから。

なぜ知っているのかというと、以前、合同会社アシスト様という会社様から、「自社が取り扱う商品の紹介サイトを作成して欲しい。商品動画はあるのでヘッダーに動画を用いたい」とのご依頼があり、イメージ参考サイトとして頂いたのが上記「ピカイチ」様サイトでした。

この際に調べて分かったのは、ピカイチ様のサイトのヘッダー動画はPC用(1920×1080)とスマホ用(1080×1920)の2種類があって、メディアクエリ768pxをブレークポイントとして動画を出し分けているという事でした。

特にCM調の動画とかだと左右に動きがありますし、やはり、そのような場合は動画は2種類用意して出し分けて表示するレスポンシブ仕様としたいところですよね。

話が長くなりましたが、今回のお問い合わせを頂いた際に、FAKE(TCD074)テーマのヘッダー部分に独自カスタマイズを加え、PC用とスマホ用の動画を出し分けれるように改修を加えてみました。以下、そのデモサイトです。

FAKE(TCD074)動画ヘッダーレスポンシブ化デモサイト

このデモサイトでは次の2種類の動画を使っています。

そして実際にデモサイトにアクセスしていただき、ブラウザの幅を縮めたり、または、PCと合わせてスマホでも閲覧いただくと分かるのですが、それぞれの動画が出し分け表示されるのが分かる筈です(このデモサイトのブレークポイントは768pxで設定しています)。

PC閲覧時のスクショ
スマホ閲覧時のスクショ

実際のデモサイトはこちら⇒FAKE(TCD074)動画ヘッダーレスポンシブ化デモサイト

FAKEはコンテンツビルダーに動画アップローダーが搭載されていますが、登録できるのは一つだけ。今回のカスタマイズにおきましては、スマホ用動画はPC用動画のファイル名末尾に「-sp」を付加してワードプレスの管理画面「メディア」にて別途アップロードする方法としております。

例えば、PC用動画のファイル名が「test.mp4」の場合、スマホ用のファイル名は「test-sp.mp4」として頂き、スマホ用動画はメディアアップローダーでアップしておくだけです。それだけで上記動画のレスポンシブが実現できます。

以上、TCD FAKE(TCD074)テーマのカスタマイズ事例のご紹介となります。

ご興味のある企業様ございましたら是非お問い合わせください。お待ちいたしております。

  • 今回ご紹介するカスタマイズ事例は、TCD FAKEテーマのテンプレートファイルにコード追記等の改修を加える手法となりますので、子テーマ化が必要となる手法となります。
  • TCDテーマを使ったサイト制作やカスタマイズを承る場合、当オフィスにおきましては、基本料金としまして、68,400円(税込)を頂いております。
  • 今回ご紹介するカスタマイズ事例の料金は基本料金のみの68,400円(税込)となります。
  • 従いましてTCDテーマのカスタマイズのご依頼の際には、サイト制作からご依頼頂く、または、その他カスタマイズも併せてご依頼頂くのがお得です。
  • TCDテーマのサイト制作およびカスタマイズにつきましては、既にTCDテーマを購入済の方のみ承っております。

公共事業受託案件(入札情報)を無料で検索できるサイトのご紹介

入札情報検索システム

コロナウィルスの影響により事業縮小されている事業者の方も多いのではないでしょうか?

私も最近知ったのですが、公共事業案件(入札)には個人事業も参加できるんですね。

公共入札案件には「物品」、「工事」、「役務」と3つの種別カテゴリーがあり、そのうち「物品」と「役務」は、『全省庁統一資格』という入札に参加するための資格が必要ではありますが、この資格はいくつかの書類を申請書とともに申請すれば取得できる資格だそうです。そして、この資格は個人事業主でも取得できるんです。

そのうち機会があれば入札資格を取得申請してみたいと思っております。

また、「工事」はいわゆる公共工事案件のことですが、こちらは簡単に誰もが参加できるものではありません。建設工事ですから建設業法に基づく建設業許可が必要ですし、その建設業許可を取得するだけでも各種建築系資格所持者が必要となるからです。

入札案件は実はいくつかの官公庁のホームページにて検索ができます。

官公需情報ポータル

こちらは中小企業庁が運営しているサイトとなりますが、面白いのは、外部システム向けにAPIが用意されているんです。

このAPIを使えば、何万件とある情報を条件指定してデータ取得ができます。面白いので、簡単に入札情報検索システムを作成してみた次第です。

簡単!ブログ用AMP対応テーマの作り方 – ワードプレス

今回、当オフィスのブログをAMP化するにあたっては、まず、ワードプレスを使用しております。

ただ、規則が厳格なAMPサイトにおいては、各種ライブラリやスタイルシートを読み込むワードプレスとの相性が悪く、ワードプレスにおけるAMP化は、AMPプラグインやAMP対応テーマを使うしかありません。

しかし、先のとおり私のAMPサイトはワードプレスサイトですがAMPプラグインやAMP対応テーマは使用しておりません。テーマから自作でありまして、かつ、一応AMP対応のテーマとなります。

ご覧の通り、いたって簡潔なテーマとなっております。テンプレートもindex.php、single.php、archive.phpの3つのみ。

index.phpの役割は、ブログ記事を新着順でメディアカードとして表示するテンプレート。

single.phpの役割は個別記事の表示用、archive.phpの役割はカテゴリーや月別の記事一覧表示用です。

実は、AMPプラグインやAMP対応テーマを使わなくとも、今回作成した簡単なブログ程度のものでありましたら、簡単にAMPテーマが作れます。

その理由、

  1. AMPではJavascriptは使えませんが、PHPタグの埋め込みが可能。
  2. AMPテンプレートは命名規則が緩やかで、拡張子も自由につけることができる。

つまり、AMPのルールに則ったヘッダーとフッターのみのテンプレートを作成し、ファイル名をindex.phpとして保存、コンテンツ部分にはthe_title()タグやthe_content()タグ、ワードプレスサブルーチン等を記述できるので、AMPテンプレートがワードプレステンプレートに早変わりなのです。

ただ、気を付けなければならないのは、AMPテンプレートは厳格なルールに基づいていなければならない点。余計なものを読み込ませるわけにはいきません。

ですので、基本的に今回のAMP化テンプレートは、ほぼAMPテンプレートそのままでありまして、ワードプレステーマとしての記述としては、記事タイトルや記事本文、アイキャッチ画像の各種出力タグの使用やWPルーチンの記述程度に留めております。wp_head()などの余計なファイルの読み込みにつながるような関数は一切使っておりません。

あと気を付けないといけないのはブロックエディターですね。ブロックエディタで作成した投稿ページは、単純な「段落」や「見出し」、「画像」を張っただけ程度のものでしたら問題はありませんが、AMPテンプレートでは外部スタイルシートを読み込むことができませんので、ワードプレスデフォルトのブロック用スタイルが読み込めません。なので、複雑にブロックを組み合わて作成したような投稿ページだと表示が崩れますし、それどころかほとんどのブロックは使えません。

また、画像ブロックで挿入した画像も、なるべく小さなサイズを指定しておかないと、AMPテンプレートのビューポートを突き破ってしまいます(AMPテンプレートタグだとresponsive指定ができるんですけどね)。

上記のような問題はありますが、とりあえず、見出しと文章、幅300px程度の小さな画像を並べた簡単な投稿ページであれば今回解説したAMP化方法で問題はありません。

ちなみに今回作成したAMP対応WPテーマのベースは、AMP公式サイトにある「The Scenic」というフリーのAMPテンプレートを使用しました。

「The Scenic」 の紹介ページはこちら

以上、是非お試しください。

横浜にあるフラ教室(オハナ・フラ・エ・マルラニ様)のウェブサイトを制作納品いたしました

malulaniアイキャッチ

今回のご依頼主は、横浜市内のフラ教室様でオハナ・フラ・エ・マルラニ(’Ohana Hula E Malulani)様です。

元よりホームページはお持ちでありましたが、これまでは手作業での更新であったため、今後は更新が容易な形になさりたいのと、コロナの影響による客離れを機に、未経験者および初心者にターゲットを絞った集客用ウェブサイトにしたいとのご要望でした。

使用したテーマはランディングページ向けテーマであります「LIQUID LP」。これに集客用バナーの出し分けが可能な「LIQUID CONNECT」プラグインも導入し、内部SEO対策まで施したうえで納品させて頂きました。

内部SEO対策が功を奏し、「フラ教室 横浜 未経験者向け」等といったスモールキーワードにおきまして、現時点における順位ではありますが、\ グーグル検索結果1位 /を達成できております!

この結果が実際にコンバージョンに繋がれば幸いです。

〇 オハナ・フラ・エ・マルラニ(’Ohana Hula E Malulani) 様

http://hulamalulani.com

malulaniスクショ(PC)
malulaniスクショ(SP)

都内建設会社様(株式会社和弓建設 様)のウェブサイトを制作納品いたしました

アイキャッチ

今回のご依頼主は、都内でリフォーム業を営む建設会社様で株式会社和弓建設 様です。

デザインからAdobeXDにて当オフィスが担当し、ウェブサイトはワードプレスにて構築致しました。

使用したテーマは「LIQUID CORPORATE」。当オフィスによる独自カスタマイズを加えたウェブサイトになります。

〇株式会社和弓建設ウェブサイト
http://www.wayumi.jp

和弓建設(PC)スクショ
和弓建設様ウェブサイト(PC版)
和弓建設(SP)スクショ
和弓建設様ウェブサイト(スマホ版)

都内企業様(合同会社アシスト様)の商品紹介ウェブサイトを制作、納品させて頂きました

合同会社アシスト

今回の発注者様は、都内で「AI SELPHY STAND」を中心とするガジェット系製品の製造、開発、輸出入を営む合同会社アシスト様です。

クラウドファンディングをこれから実施するにあたり、商品紹介のランディングページと会社情報ページが欲しいとのご依頼でありました。

また、コラムやお客様の声等の投稿機能も欲しいとのご要望もありました。

動的コンテンツがある事から、今回納品したウェブサイトはワードプレスにて構築。

使用したテーマは「LIQUID LP」。当オフィスによる独自カスタマイズを加えたウェブサイトになります。

若干納期が遅れてしまい大変ご迷惑をおかけしてしまいましたが、何とか納品にこぎつけました

それにしても合同会社アシスト様が今回発売される予定の「AI SLEFY STAND」ですがなかなか面白い製品ですよ!

人工知能搭載で自撮り動画が撮れる製品で、キャッチコピーは「自分専属カメラマン」、「自動顔認識であなたをどこまでも追いかける」。

SNSに動画投稿したい方にピッタリの製品となります。

興味ある方は是非、合同会社アシスト様にお問い合わせを!

※納品サイトで使用されている商品画像や動画は合同会社アシスト様より支給頂いたものとなります。

トップページ(PC)

製品紹介ページ(PC)

トップページ(SP)

製品紹介ページ(SP)

都内企業様ウェブサイトのお問い合わせフォーム、reCAPTCHA V2を実装・納品いたしました

セキュリティ

都内のとある企業様からのご依頼で会社ホームページのお問い合わせフォームにreCAPTCHA V2を実装してほしいとのご依頼がありました。

昨日、サーバーFTP情報等を頂き、作業開始。本日午後に納品となりました。

今回の案件で少し困ったのが、メールフォーム(PHPアプリケーション)は既に実装済みであることでした。

前回の納品事例ではメールフォームの実装からの案件でありましたので、自分が作成したメールフォームであることから、いわゆる「勝手知ったるなんとやら」だったわけですが、今回は少し違います。

メールフォームは他人が作成したPHPアプリケーションなわけでして、まずは、このメールフォームの処理の流れを知る事から入りました。

結論から言いますと、オブジェクト指向(クラス化)概念のコーディングがされた高度な仕様のメールフォームでありましたが、しかしそこは、メールフォーム程度のコーディング量でしかない事から、少し時間がかかりつつも何とか読解。無事処理の追加までできました。

※一部ぼかしを入れております

当オフィスでは、既存のPHPアプリケーションへの追加改修なども承っておりますのでお気軽にお問い合わせください。

夏と言えば海、海と言えば水着!スイムウェア商品のランディングページを納品致しました。

海辺

とあるクライアント様よりスイムウェア商品のランディングページ制作を賜りました。

この案件は商品画像素材や文章、ワードプレスインストールまでクライアントにて準備されていて、また、クライアント側にこだわった要望もない案件であり、テーマデフォルト仕様での制作納品であった為、比較的簡単な案件でした。

使用したテーマは「LIQUID LP」。

このテーマは、「サービス」、「プロダクト」、「リード」といった3種類のテンプレートが付属しており、ランディングページを制作するうえで便利なクラスライブラリを内蔵。また、各種ブロックも搭載しており、ランディングページを簡単に制作できる工夫が施されております。

イメージ的にも海にピッタリ!?

クライアント側の準備のおかげもありますが、単納期を可能にしてくれました。

当オフィスではランディングページ制作も随時承っております。

お問い合わせお待ち致しております。

スイムウェアランディングページ

インスタグラムoEmbed – インスタグラムメディアをウェブに埋め込む

インスタグラムロゴ

インスタグラム基本表示APIを使ったインスタグラム投稿一覧表示については別の記事で既にご紹介致しました。

こちらは、インスタグラムoEmbedを使った事例となります。

インスタグラムoEmbedは基本表示APIと異なり、インスタグラム投稿(メディア)の埋め込みデータを取得するAPIになります。

つまり、インスタグラムで表示されているそのままの形をウェブに埋め込みが可能です。

ただし、インスタグラムoEmbedは、投稿(メディア)のパーマリンクを明示して、その投稿(メディア)の埋め込みデータを取得できるにとどまり、一度に投稿(メディア)全体の埋め込みデータを取得できるものではありません。

最新のインスタグラム投稿一覧を埋め込むには、基本表示APIとの組み合わせ処理が必要です(基本表示APIで取得可能なフィールドにはパーマリンクが含まれる。つまり、基本表示APIを使えばパーマリンクの一覧取得が可能)。

基本表示APIとインスタグラムoEmbedを組み合わせて使えば、下記のようなインスタグラムの埋め込みが可能です。

関連記事

インスタグラム基本表示API – インスタグラムメディアをウェブで自由に表示する

インスタグラムロゴ

フェイスブックやツイッターと異なり、インスタグラムは投稿一覧の埋め込みコードが取得できません(投稿単体では埋め込みコードの取得が可能ですが)。

インスタグラムの投稿一覧をウェブで表示または埋め込むには、親会社であるフェイスブックにより提供されている各種APIの使用が必要となります。

この各種APIは、フェイスブックアプリケーション開発者用サイト(Facebook for Developers)のアカウントを取得したうえで、フェイスブックアプリケーションを設置するウェブサイトを明示し、そのアプリケーションで使用するAPIの選択、そして、そのアプリケーションの登録が必要になります。

また、場合(作成するアプリケーションの機能)によってはアプリレビューと呼ばれるフェイスブックの認証を受けなくてはなりません。

ウェブサイト所有者が、自分のインスタグラムアカウントを使い、インスタグラム投稿を自身のウェブサイトに表示させるには、

  1. インスタグラム基本表示APIを使う方法
  2. インスタグラムoEmbedを使う方法

の2通りあります。

インスタグラムの投稿(インスタグラムでは「メディア」と呼ばれる)は、画像やキャプション、投稿日、ユーザー名といったフィールドと呼ばれるデータで構成されており、1.の基本表示APIでは、投稿単位でこれらフィールドデータを取得できるものです。

フィールドデータの取得は、投稿(メディア)IDを指定して任意のメディアのフィールドデータを取得できるだけではなく、全投稿(メディア)のフィールドデータを一度に取得もできます。

この一覧取得したフィールドデータを出力ループ処理する事で、自由な形(UI、ユーザーインターフェース)でインスタグラムメディアの一覧表示が可能になります。

下記メディアカードの一覧表示は、基本表示APIを使い実現したものです。

関連記事


 
Proudly powered by WordPress
Copyright 2020 office-tomo.net All right reserved.