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

アイキャッチ

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

デザインから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を使い実現したものです。

関連記事

N市 様 健康事業向け、応募フォームを制作納品致しました

健康

この度、とある自治体様が実施する健康事業に関するウェブ制作に関わらせて頂きました。

と言いましても、私が直接落札したとか、直接に随意契約を取り交わしたとかではなく、あくまでもクライアント様が間に入っている案件でありまして、残念ながらこの制作事例もクライアントとの立場関係上、実際に納品先のウェブサイトを公開することはできません。

概要とぼかし写真にて簡単にご紹介いたします。

大元の発注者は地方自治体のN市 様であり、このN市 様は市民の方々が健康づくりを始め、継続することができる環境整備を推進するための事業イベントを数年前から毎年開催しておられます。

このイベントに参加するには応募が必要で、参加・応募方法として、はがき郵送よる参加・応募、スマホアプリによる参加・応募i、ウェブ応募フォームからの参加・応募方法があります。

そして、その事業を一括して受注した事業者様がおられ、実際には何次業者となるのかは不明ですが、当オフィスがウェブ応募フォームの制作を賜った次第であります。

N市 様が受託事業者向けに作った仕様書に基づき制作しましたが、各入力フォームにはバリデーションルールが細かく定められており、単なるメールフォームの納品とは異なり、事業の肝となる部分の実装を賜ったものと気を引き締めての作業でした。

6月頭頃から取り掛かり、打ち合わせや仕様の確認などを行いながら、6月終わり頃に何とか納品、クローズとなりました。

※ヘッダーとフッター部分は切り取っております。また、一部コラージュをかけております。
※ヘッダーとフッター部分は切り取っております。また、一部コラージュをかけております。

このようなイベント向け参加登録応募フォームやアンケートフォームといったウェブアプリケーションの制作を随時承っております。

お気軽にお問い合わせください。

reCAPTCHA V2を実装したメールフォームを納品いたしました

セキュリティ

とあるウェブ制作会社様より、コンサル系ランディングページへのメールフォームの実装のご依頼を賜りました。

メールフォーム自体のデザイン案は既にある状態でありまして、UIはコーディングするのみの案件。メールフォームは当オフィスにてPHP言語で制作したものを実装いたしました。

また、今回のメールフォームにはreCAPTCHA V2の実装もさせていただきました。

残念ながらクライアントとの立場関係上、実際に納品先のウェブサイトを公開することはできませんが、メールフォーム部分のみ一部抜粋した形でご紹介いたします。

メールフォーム事例
※クライアントとの関係上ぼかしを入れております。

現在、reCAPTCHAはV3が最新バージョンでありまして、実装も最新バージョンであるV3の方が容易なのですが、最新バージョンのV3ではIE11ユーザーはスパムとして認識されてしまいます。世の中いまだにIE11ユーザーが多い事から旧バージョンのV2実装のご依頼があるのだと思います。

ご興味のある方からのご依頼、お待ちいたしております。

静的ホームページへのウェブアプリケーション実装事例 – 閲覧ユーザーに有益なツールとUIを提供しよう

PHP言語イメージ

今回は、静的ウェブサイトに不動産物件情報を一覧表示させるウェブアプリケーションの開発、実装事例のご紹介です。少し前おきが長いですがご了承下さい。

「ホームページを業者に作成してもらったけれど、静的ホームページだから更新しにくく不便だなぁ」

「やっぱり投稿機能を持った管理しやすい動的ホームページが良かったんだけど、また一からリニューアルしないといけないのかな?」

とお思いの方おられませんか?

心配いりません。当オフィスであればこのようなお悩みを解決できます。

知ってました?実はウェブアプリケーション作成の技術があれば、一からホームページをリニューアルし直す必要はないんです。現状の静的ホームページにウェブアプリケーションを追加実装すれば良いんです。

まず静的ホームページとは何なのかから説明します。対義語に動的ホームページという言葉もあります。

まず、旧来のホームページは、ホームページ作成の基本的なコンピューター言語であるHTML言語(ハイパー・テキスト・マークアップ・ランゲージ)のみで作成されており、HTML言語はタグと呼ばれる命令をテキストエディタ等で記述して拡張子がhtml(またはhtm)のファイルを作成し、それをブラウザが1行ずつ読み込んで記述された命令通りの表示をするというものでした。

例えば、

<h1>これはタイトルです。</h1>

と、HTML言語で命令を記述したファイルを作成すると、ブラウザはその支指示を読み取り、そのとおりに画面上に表示してくれるわけです。

しかしこの場合、テキストエディタで記載し作成した内容は、ファイルをテキストエディタで編集し直す等しない限りは固定であり、決まった内容でしかなく、条件に応じた動的な表示はできませんでした。

これが、HTML言語で作成されたホームページは静的ページであるという理由です。

この静的ページの問題は、装飾やユーザーインタラクティブなユーザーの興味を引くようなページを作成できないばかりではなく、ブログ投稿やニュースリリース等のような定期的にコンテンツを追加したり、修正したりといった事が難しいという問題がありました。

そこで登場するのがASP(アプリケーション・サービス・プロバイダー)やワードプレスと言ったウェブアプリケーションです。

ASPとは例で説明すればわかりやすいかもしれません。わかりやすい例は、amebaやlivedoorブログ等のブログサイトです。

あのブログサイトは、使ったことがある方は分かるかもしれませんが、ログインして管理画面に入ると、ブログ作成のための設定や入力が可能となります。

本来であればブログ記事をテキストエディタでHTML形式のコードを用いて作成し、ブログを更新する際には、再びテキストエディタでファイルを開き追加編集してアップロードする等が必要なところ、あのようなインターネット上で作動するアプリケーションがあるおかげで、管理画面で簡単にブログを投稿し、保存したり、管理したりも自由にできるわけです。

つまり、ウェブ上のアプリケーションなわけです。

また、ワードプレスについても同じでありまして、サーバー上にワードプレスをインストールすることで、それ以降は、ウェブ上の管理画面にログインすれば、ブログサイト以上の高機能な編集機能を有し、ウェブ上で作動するブログ投稿システム(アプリケーション)として機能するのです。

ホームページによく備えてあるメールフォームですが、あれもウェブアプリケーションです。

このように、ウェブアプリケーションを導入することで、ウェブを閲覧するユーザーに有益なサービスをもたらすことができます。

自身が所有するホームページを頻繁に更新する必要がある場合は動的ホームページの導入を考えた方が良いのです。無料ブログサイト等のASPやワードプレスのような高機能な投稿機能を備えたCMS(コンテンツ・マネジメント・システム)の導入です。

つまり、動的ホームページとはウェブアプリケーション化されたホームページ管理システムと言っても良いでしょう。

冒頭のように、動的ホームページの導入を渋ったばかりに後から困ったことにならないためにも、本来は初めからよく仕様など検討のうえ、ホームページの製作依頼をして下さい。

でも、後からでもウェブアプリケーション技術者であれば、静的ホームページに動的コンテンツの実装を行うことは可能なんですよ!

当オフィスによる制作事例を紹介します。

別のブログ記事で当オフィス制作事例として紹介済みの(株)エスユーホームズ様のホームページですが、まさしく、今回のブログ記事の「困った」と同じ状況でした。

当初の打ち合わせでは、物件一覧の表示や管理機能は不要であり、ニュースリリースやブログ投稿等も不要の静的ホームページでのご依頼だったわけです。

それが納品間近になって、「やっぱり取扱い物件情報一覧を表示させたい」との要望がありまして、そこはやはりお客様ですし、物件情報を更新するたびに毎度手編集で記事投稿してね、とは言えないわけです。(^^;

方法論として、きちんとしたシステムを導入するのであれば、物件情報一覧ページのみワードプレスをインストールして作成するという方法があります。

実はワードプレスは我々開発者には優れたインターフェースとしての機能もありまして、外部ウェブアプリケーションからワードプレスにアクセスし、そのワードプレスで投稿したデータにアクセスし、投稿データ情報を取得、そして外部アプリケーション側でそのデータ、情報を使用するということも可能なのです。

つまり、既に作成していたメインの静的ホームページにウェブアプリケーションを埋め込むんです。

そのウェブアプリケーションの役割は、外部のワードプレスにアクセスして、ワードプレス上で投稿されたデータ(物件情報等)を取得、そのデータをメインのホームページ上に一覧表示させる、というもの。

ただ、既に納期を過ぎていたばかりでなく、上記方法論だと工数もさらにかさんでしまう。

そこで考えたのが、簡易的なCMS機能の実装です。この簡易CMS機能は以下のようなファイルシステム(ローカルファイルの読み書き)を用いた簡易的な仕組みでありまして、簡易的ではありますものの、お客様の負担は十分少なく、物件情報の更新作業ができるというものであります。

【(株)エスユーホームズウェブサイト、物件情報一覧表示用簡易CMS機能の概要】

1.物件情報はお客様の方でエクセルシートにご入力いただき、それをCSV形式のデータとして出力。

2.そのCSVデータをこちらが指定したサーバー上のフォルダにFTPアップロードしていただく。

3.当方でメインのホームページに埋め込んだウェブアプリケーションがそのCSVファイルからデータを読み取り、ホームページ上に物件情報を一覧表示させる。

トップページ物件一覧UI
トップページに表示される物件情報UI

個別物件一覧ページUI
物件一覧表示ページUI

https://www.office-tomo.net/wp-content/uploads/2021/05/簡易CMS機能説明書.pdf

実は、この程度の機能の実装でありましたらそんなには工数もかかりませんので、そんなにお高くはありません。是非一度お問い合わせください。

サイトマップを備えた独自404ページで、ユーザーへの心配りを

404エラー画像

最近、当オフィスによる事例として(株)エスユーホームズ様のウェブサイトをリニューアル納品いたしました。

こちらの会社様はブログ投稿や写真などのギャラリー等も必要ないとのことで、静的ホームページとして納品したのですが、いざ納品してみて良く考えると困ったことに。

インデックス情報がいまだ旧サイトのままであることから、検索エンジンで表示された検索結果をクリックしても、旧サイトのデータは現在サーバー上にはないことから「404エラーページ(ページが存在しない)」が表示されてしまうのです。

この404エラーページは、一般的にはレンタルサーバー会社側で用意したページが表示され、ロリポップの場合下記画像のようなページが表示されます。

ロリポップ404エラー画面

しかし、これはあまり好ましくありません。なぜならば、せっかくアクセスしてくれたユーザーはがっかりですしイメージダウンですし、面白味に欠けます。

また、この404エラーページが表示されたユーザーは直帰すること受け合いですし、心配りが足りません。

従いまして、せっかくアクセスしてくれたユーザーを逃さないためにも、404エラーというイメージダウンをプラスに変える方策として、サイトマップ付きの独自404ページを作成し設置する事を思いつきました。

ワードプレスの場合はサーバー設定不要で404ページを結構簡単に用意できますが、今回は一からコーディングした静的ホームページ。ユーザーが存在しないページをリクエストすると当方で用意した404ページが表示されるように.htaccessファイルでサーバー設定したわけです。

.htaccessの作成や設置方法はレンタルサーバー会社のマニュアルがあるので結構簡単です。

これなら、新たなリニューアル後のウェブサイトの全体像も掴みやすく、ユーザーも気を取り直し、元々アクセスしたかった情報にアクセスができます。そしてなによりユーザーを逃さない(直帰させない)で済むのです。

普段は何気に考えていた404ページですが、このような場面においては便利だし、ちょっとしたした心配りにつながるサービスだと思いました。

せっかくご注文頂き納品するわけですから、最後まで気を抜かず、お客様のイメージダウンにはならないような心配りをしたいものです。

ロリポップにおける.htaccessファイルの設置方法マニュアルはこちら。

https://lolipop.jp/manual/hp/htaccess/

そして新たに作成した404ページの全体像がこちら。

404エラーページ事例