AGN Web! - AGN Web! BLOG

制作事例　ハピネステクノロジー株式会社様

前回サイト制作から2年が経過しリニューアル
レスポンシブ対応、コンテンツの充実を行いました。
公開　2015年8月12日
URL　http://happitec.co.jp/

●制作内容
・デザインの刷新
・レスポンシブ対応
・トップページは垂直にダイナミックなスライドする画面スクロール、

WordPressでプラグインVisualizerを使ってキレイなグラフを掲載してみる。

先日、Wordpressで構築したブログにグラフを手軽に載せられないか、お客様よりご相談を受け、いろいろ方法を調べてみました。グラフを載せる方法としては、エクセルでグラフを作って、画像ファイルにして貼り付けるか、プラグインで対応するかの、いずれかになります。以下プラグインでグラフを記事中に挿入する方法を紹介します。

1．プラグインVisualizer: Charts and Graphsを導入する。
特に難しいところはありません。プラグインの新規追加よりVisualizer: Charts and Graphsを導入しましょう。

もちろん有効化します。

2．グラフを作る。
導入したプラグインは、サイドメニューの「メディア」の中に項目が作れています。ちょっと面食らいましたが、画像と同じ扱いと言うことらしいです。Visualizer Libraryを選びます。

Add Newを押してグラフの新規作成に入ります。いろいろ種類がありますが、例として円グラフのパイチャートを選択します。

設定画面になります。

ここで、データを読み込みます。データはPC上でもネット上でもいいのですが、CSVファイルで用意する必要があります。今回は例として以下のデータを用意しました。

種類,匹
犬,10346000
猫,9959000

1行目に項目と単位、2行目以下からデータをカンマ区切りで記入し、○○.csvの名前で保存します。トラブルを防ぐため保存はエンコードをUTF8のBOM無しにしておきます。From Computerボタンを押して、CSVファイルを選ぶと、読み込まれて画面上のグラフに反映されます。

数値は自動で％に変換されますので、計算は不要です。楽ですね。
NEXTで次に進み、グラフの体裁を整えます。タイトルをつけたり、色を変えたり、3D表示したり、見た目を調整して、「Create Chart」を押し完了です。

3．記事に貼り付ける。
再び、Visualizer Libraryのトップに戻ると作成したグラフが表示されています。必要に応じてグラフを作り、このページで管理することになります。作成したグラフの下に、貼り付け用のショートコードがありますので、コードを記事に貼り付けて完了です。

↓こんな感じになります。↓
[visualizer id=”1335″]

英語プラグインと言うことで、取っつきにくいところもあるのですが、比較的簡単な方ではないでしょうか？
1回限りの単発での掲載であるなら、エクセルで作ったグラフのキャプチャ画像を取り掲載することをおすすめしますが、定期的にグラフを掲載するようでしたら、上記プラグインでの作業をお薦めします。

ちなみに、私は猫派です。

参照
インプレス　日本の家庭でのペット飼育の現状とは？

制作事例　新潟浴場組合様

新潟の銭湯が加盟する、新潟浴場組合様のWEBサイトをリニューアルしました。
利用者の高齢化が進み、各家庭に風呂がある時代に、いかに「銭湯」を知ってもらい、足を運んでもらうかがテーマです。
営業中の掲載浴場全てに足を運び、取材＋撮影してきました。

公開　2015年8月5日
URL　http://www.niigata268.com/

●制作内容
・デザインの刷新
・CMSの導入
・レスポンシブ対応
・コンテンツの全面見直し
・RICOH THETAによる360°全天球写真を取り入れ

WordPressの無料テーマAttitudeの使い方（フッターエリア使用方法）

1.WordPressの無料テーマAttitudeの使い方
2.WordPressの無料テーマAttitudeの使い方（固定ページ活用方法）
3.WordPressの無料テーマAttitudeの使い方（フッターエリア使用方法）
3回目の今回は、フッターエリアの使用方法になります。
正直言って、前回でAttitudeの使い方は大筋終わっていますが、
サイトとしての形ができるまでの説明と思って読んでください。
前回と同様の完成サイトのトップページを元に説明していきます。

制作サイト

業種：歯科医院
ページ数：10ページ程度

グローバルメニュー
・トップページ
・院長のあいさつ
・診療科目
—一般歯科
—小児歯科
—口臭歯科
—予防歯科
—歯周病
—ホワイトニング
・初めての患者様
・アクセス
・お問い合わせ

フッターエリア（病院名、住所、診療日）

ダッシュボード/ 外観 / ウィジェット

「カスタムウィジェット画面」に移り「Footer Sidebar」にウェジットパーツをドラッグ&ドロップします。
フッターエリアは3カラムなっています。

テキスト　→　病院名
テキスト　→　住所
Biz Calendar　→　診療日

1.病院名
ダッシュボード / 外観 / ウィジェット / Footer Sidebar / テキスト

ダッシュボード / 外観 / ウィジェット / Footer Sidebar / テキスト
テキストの「▼」を押すと項目が出てきます。
タイトル部分に文字を入力して保存します。

2.住所
ダッシュボード / 外観 / ウィジェット / Footer Sidebar / テキスト

テキストの「▼」を押すと項目が出てきます。
本文部分に文字を入力して保存します。

3.診療日
ウィジェットあるカレンダーはブログの更新を表示するカレンダーなので
診療日や営業日を表すカレンダーには使用できません。
プラグインをインストールして、診療日を表せる「Biz Calendar」使用します。

ダッシュボード / 外観 / ウィジェット / Footer Sidebar / Biz Calendar
Biz Calendarの「▼」を押すと項目が出てきます。
タイトル部分に文字を入力して保存します。
※カレンダー設定は別途行います。

ここまで、HTMLを一度も記入せずサイトが完成しました。
一応は見れるサイトになったのではないでしょうか。

ここから、部分的に色を変えたりレイアウトを調節したい場合は、
CSSなどの知識が必要となります。。

無料テーマAttitudeも万能ではないので、
勉強して自分好みのサイトに近づけてください。

撮影事例　佐渡編

先日、サイト制作の撮影で弊社カメラマンと佐渡に行ってきました。
その時撮影した撮影サンプルを紹介します。

朱鷺の森公園にて。飼育場内の朱鷺です。
ガラス越しですがかなり近くで朱鷺を見ることが出来ます。
http://tokinotayori.com/tokipark/

その後、立ち寄った妙宣寺です。
http://www.niigata-kankou.or.jp/sys/data?page-id=8903

新潟県内唯一の五重塔。
こちらには時間調整の都合で寄ったのですが、手入れの行き届いた境内は静かで良いところでした。

当日は天候に恵まれず、屋外の佐渡らしい写真をほとんど撮ることが出来ませんでした。
田園風景の中の朱鷺などを撮りたかったのですが…。

生き物の写真や、景観写真もアートグラフィック新潟にお任せください。

IFTTTを使っていろんなサービスと連携(例えばTwitterからFacebookにアルバムを作る)

夏、ですね。みなさん夏バテしていませんか？

インターハイ始まりましたね。もうすぐ甲子園も始まります！
今では見るからに不健康そうですが、昔はこれでもスポーツしてました。
インターハイとか夢の向こうのへっぽこ選手でしたが(笑)

スポーツを通して、違う学校や年齢性別の別、いろいろ違う人たちと会って話して。
今でも仲良く遊ぶ人たちもいます。僕はスポーツを通してでしたけど、こんな感じでこうやってみんないろいろ繋がっていくのですね。

というちょっとまじめな前振りから強引にいきますが。今日はいろんなサービスを連携できる「IFTTT」のお話です。

IFTTTって？

IFTTT(イフト)とは「レシピ」と呼ばれる個人作成もしくは公に共有しているプロフィールを使って数あるWebサービス（Facebook、Evernote、Weather、Dropboxなど）同士で連携することができるWebサービスである。開発したのはリンデン・チベッツで2010年にスタートした。

― Wikipediaより
https://ja.wikipedia.org/wiki/IFTTT

そのまま引用しましたが、あるサービスで「何かをすると」違う他のサービスに「何かできる」というものです。

IF this Then That

これはIFTTTでレシピ(何かから何かを連携するのをIFTTTではレシピといいます)を作るときの魔法の呪文ですが、そのまま「もしこれをしたら」「そのときあれはこうなる」ということですね。
連携できるサービスはいろいろ。右の画像が現在(2015年7月30日)使えるサービスのアイコンです。かなりいろいろありますね。

IFTTTしてみる

例えば今回はTwitterにアップした写真をFacebookのアルバムに追加してみます。出かけた先でおもしろい写真をとってTwitterにアップしたものをFacebookにアルバムとしてまとめておいたら、後から見直したりまとめて使ったりするのに便利、かもしれませんよね。

0.チャンネル登録

IFTTTにログインして(アカウントのない方はアカウントを作ります。メールアドレスとパスワードでOKです)、チャンネルの登録をします。

右上のメニュー「Channels 」から利用するサービスのアカウントを登録します。
今回はTwitterとFacebookのアカウントを登録しました。

1.My Recipesを作る

レシピを作成します。「My Recipes」から入って、「Create a Recipe」をクリックします。
IFTTTは海外のサイトで、まだ日本語対応していませんが、直感的にクリックしていくだけでレシピが作れます。

2.もしこれで

「Create a Recipe」をクリックすると「if this then that」と表示されます。これが魔法の呪文でしたね。反転している「this」をクリックします。

トリガーとなる(利用するサービスでどんなことをしたら)サービスがアイコンで一覧表示されるので、利用するアイコンをクリックします。今回はTwitterです。

3.こんなことしたら

次に「どんなことしたら」を選びます。今回は特定のハッシュタグで分類できるように「New tweet by you with hashtag」を選択して、「#photo」というハッシュタグをつけたときに発動することにしました。

進んで行くとぬるぬるスクロールして行くのが、さりげなく使い易いですね。

4.あれで

次はどのサービスに使うかを選択します。先ほどは「this」だったところがTwitterのアイコンになっていますね。これも直感的にわかりやすくなっています。

反転している「that」をクリックすると利用できるサービスの一覧で表示されるので、今回利用するFacebookをクリックします。

5.何をする

次に何をさせるかを選択します。今回はアルバムを作るので、「Upload a photo from URL」を選択します。

URLを登録する欄、Facebookに登校するメッセージ、登録するアルバムの名前を登録します。今回は新しく「Twitterphoto」というアルバムをFacebookに作ることにしました。

ここでアルバム名を登録するとFacebookに新規でアルバムが作られます。空欄にした場合は「IFTTT Photos」というアルバムが作られます。

この三つをきめたら「Create Action」をクリックします。

6.確認画面

最後にこれでOKかどうかの確認画面です。IFTTT用にレシピのタイトルを決めることもできます。今回はそのまますることにしました。

写真をTwitterに投稿する

ちゃんと動くか確認します。ハッシュタグ#photoをつけた写真入りのツィートを作成します。

ifttt使って投稿！アルバムができてたらOK♪ #photo pic.twitter.com/4CAueKuual

— 空狐 (@arbeitfuchs) 2015, 7月 31

Facebookにアルバムが作られる

ほんとにちゃんとFacebookに投稿されるていることを確認します。(反映されるまでに若干タイムラグがある場合があります)

無事投稿されてますね。ちなみ新規で「Twitterphoto」というアルバムもちゃんと作成されていました。成功ですね。これで出先からTwitterに投稿した写真をアルバムにまとめることができるようになりました。

他にもいろいろ

今回はTwitterに投稿した写真をFacebookのアルバムにまとめるレシピを紹介しましたが、他にもいろいろな事ができますよ。

個人的に使っているのは、iPhoneで撮った写真をFlickrに登録したり(iCloudの要領確保のため)、Tumblrで書いた記事をFacebookページ流したり、好きなブログが更新されたらRSSを利用してFacebookにリンクを流す、などです。

他にもgmailとevernoteを連携したり、いろいろなことができるので自分好みのレシピを作ってみてくださいね。素敵なレシピができたらぜひ教えてください！

Android OSは、ドコまで使えるのか!?

自宅で使っていたMacBookPro(Let2008)が、長年の酷使と熱？によりグラフィックボードが瀕死の状態となり画面がモノスゴイ状態からブラックアウトになるなど…使うのに困難をきわめ、修理に出してみれば

『古くて、もう部品ないっす』

などと言われしまう状況に…
新しいMacを買うにしても、こちらも予算的に瀕死の状態だったため「場繋ぎ」にと手元にあるLenobo YOGA Tab 10インチを自宅メインマシンとして使う事になしました。

果たして、AndroidOSはどこまでできるのでしょうか。

続きを読む Android OSは、ドコまで使えるのか!?

在庫リスクなし！オリジナルグッズを作って販売できるWebサービスまとめその1

20160611

在庫を持たずにオリジナルデザインのグッズを作成･販売できるWebサービスを、今回はまとめました。

自分だけのデザインのグッズを作りたい…
だけど、在庫を抱えるリスクを考えるとハードルが高くて迷っている…
そんなクリエイターやデザイナーの方におすすめです！

また、基本的に発注があってからの製作となるので
デザインを気軽に登録できるのもいいところ！
ぜひ参考にしてみてください。

※2016/06/30、2016/11/19に記事を加筆修正しました。

↓こちらでもグッズ作成サイトまとめてます!
オリジナルグッズを作って販売できるWebサービスまとめその2

続きを読む在庫リスクなし！オリジナルグッズを作って販売できるWebサービスまとめその1

バスケットボールスピリッツvol.6先行予約

バスケットボールスピリッツvol.6は8/3（月）発売です！

詳しい内容はこちらからご覧ください。

ご予約はAmazon、オンラインショップから！

windowsでデジタルサイネージをやるにあたり制御用の小さなプログラムをUWSCで書いてみる。

172013

最近流行のスティックPCですが、これを使ってWindowsPCによるデジタルサイネージが出来ないか、模索してます。
PCベースでデジタルサイネージを構築する際、必要になってくるがブラウザ制御用ソフト。基本放置で何時間も稼働するわけですが、不意のリセットやフリーズ、勝手な再起動にどう対処するかが、課題になります。

まずは、どんなサイネージになるのかデモを作ろうと思い、IEをコントロールする用のスクリプトをUWSCで書いてみました。UWSCはフリーのWindowsコントロール用スクリプト言語。元々はマウスの動きを「録画して」再生するソフトだったと思います。基本的にWindowsの制御には最適な言語です。

とりあえず、スクリプトをEXE化して、スタートアップに入れ、自動でブラウザを起動、定期的に読み込み直し、時間が来たら終了、をやってみたいと思います。（EXE化はUWSCシェアウェア版の機能）
とりあえず、UWSC公式サイトのIE起動サンプルをベースに組み立てます。

STOPFORM(FALSE) //stopボタンを非表示に

//ブラウザをフルスクリーンで起動
Public IE
IE = CreateOLEObj("InternetExplorer.Application")
IE.Visible = true
setOleEvent()
URL = "スライドショーの置いてあるURL"
IE.Navigate(URL)
IE.FullScreen = True

//定期的に読み込み直し
WHILE 1
KBD(VK_F5, CLICK, 100) //F5キーを押す
SLEEP(600) //600秒に1回リロード

GETTIME()
X = G_TIME_HH2 + G_TIME_NN2　//現在時刻の取得
IFB X = 2030 THEN //20時30分にシャットダウンする
POFF(P_SHUTDOWN) //PCをシャットダウン
ENDIF

WEND

//------IE制御用
DEF_DLL SendMessageA(Hwnd, Long, Long, Dword): bool: user32
CONST WM_ACTIVATE = $06
Public Pub_url, Pub_docc, Pub_BeforNav_cnt, Pub_DocComp_cnt, Pub_inp_flg
Procedure BusyWait()
  Sleep(0.3)
  tm = GetTime()
  repeat
    ifb GetTime() - tm > 90  // TimeOut
       Pub_docc = ""; Pub_BeforNav_cnt=0; Pub_DocComp_cnt=0
       IE.Navigate(Pub_url)
       tm = GetTime()
    endif
    Sleep(0.2)
    ifb Pub_inp_flg
       Pub_inp_flg = False
       continue
    endif
    if IE.busy then continue
    if Pub_url = "" then break  // No read
    if (Pos("*"+Pub_url+"*",Pub_docc)) or (Pos("*"+IE.LocationURL+"*",Pub_docc)) or (Pub_BeforNav_cnt<=Pub_DocComp_cnt) then else continue
    errflg = False
    if IE.document.title = "503 Unavailable" then errflg = True
    if IE.document.title = "Service Unavailable" then errflg = True
    if IE.document.title = "503 Service Temporarily Unavailable" then errflg = True
    ifb errflg
       Sleep(90)  // 503: Wait&Retry
       tm = 0
       continue
    endif
    Sleep(0.3)
  until ! Pub_inp_flg
  Pub_url=""; Pub_docc=""; Pub_BeforNav_cnt=0; Pub_DocComp_cnt=0
  SendMessageA(IE.Hwnd, WM_ACTIVATE, 0, 0)
Fend
Procedure setOleEvent()
  OleEvent(IE, "DWebBrowserEvents2", "BeforeNavigate2", "fucBeforNav")
  OleEvent(IE, "DWebBrowserEvents2", "DocumentComplete", "fucDocComp")
  OleEvent(IE, "DWebBrowserEvents2", "OnQuit", "fucQuit")
  Pub_url=""; Pub_docc=""; Pub_BeforNav_cnt=0; Pub_DocComp_cnt=0; Pub_inp_flg=False
Fend
Procedure fucBeforNav()
  ifb (Pos("javascript:",""+EVENT_PRM[1])=0) and ("about:blank"<>""+EVENT_PRM[1])
     if Pub_url="" then Pub_url = ""+EVENT_PRM[1]
     Pub_BeforNav_cnt = Pub_BeforNav_cnt + 1
  endif
  Pub_inp_flg = True
Fend
Procedure fucDocComp()
  ifb (Pos("javascript:",""+EVENT_PRM[1])=0) and ("about:blank"<>""+EVENT_PRM[1])
     Pub_docc = Pub_docc + "*"+EVENT_PRM[1]+"*"
     Pub_DocComp_cnt = Pub_DocComp_cnt + 1
  endif
  Pub_inp_flg = True
Fend
Procedure fucQuit()
  ExitExit
Fend

STOPFORM(FALSE) //stopボタンを非表示に

//ブラウザをフルスクリーンで起動

Public IE

IE = CreateOLEObj("InternetExplorer.Application")

IE.Visible = true

setOleEvent()

URL = "スライドショーの置いてあるURL"

IE.Navigate(URL)

IE.FullScreen = True

//定期的に読み込み直し

WHILE 1

KBD(VK_F5, CLICK, 100) //F5キーを押す

SLEEP(600) //600秒に1回リロード

GETTIME()

X = G_TIME_HH2 + G_TIME_NN2　//現在時刻の取得

IFB X = 2030 THEN //20時30分にシャットダウンする

POFF(P_SHUTDOWN) //PCをシャットダウン

ENDIF

WEND

//------IE制御用

DEF_DLL SendMessageA(Hwnd, Long, Long, Dword): bool: user32

CONST WM_ACTIVATE = $06

Public Pub_url, Pub_docc, Pub_BeforNav_cnt, Pub_DocComp_cnt, Pub_inp_flg

Procedure BusyWait()

Sleep(0.3)

tm = GetTime()

repeat

ifb GetTime() - tm > 90 // TimeOut

Pub_docc = ""; Pub_BeforNav_cnt=0; Pub_DocComp_cnt=0

IE.Navigate(Pub_url)

tm = GetTime()

endif

Sleep(0.2)

ifb Pub_inp_flg

Pub_inp_flg = False

continue

endif

if IE.busy then continue

if Pub_url = "" then break // No read

if (Pos("*"+Pub_url+"*",Pub_docc)) or (Pos("*"+IE.LocationURL+"*",Pub_docc)) or (Pub_BeforNav_cnt<=Pub_DocComp_cnt) then else continue

errflg = False

if IE.document.title = "503 Unavailable" then errflg = True

if IE.document.title = "Service Unavailable" then errflg = True

if IE.document.title = "503 Service Temporarily Unavailable" then errflg = True

ifb errflg

Sleep(90) // 503: Wait&Retry

tm = 0

continue

endif

Sleep(0.3)

until ! Pub_inp_flg

Pub_url=""; Pub_docc=""; Pub_BeforNav_cnt=0; Pub_DocComp_cnt=0

SendMessageA(IE.Hwnd, WM_ACTIVATE, 0, 0)

Fend

Procedure setOleEvent()

OleEvent(IE, "DWebBrowserEvents2", "BeforeNavigate2", "fucBeforNav")

OleEvent(IE, "DWebBrowserEvents2", "DocumentComplete", "fucDocComp")

OleEvent(IE, "DWebBrowserEvents2", "OnQuit", "fucQuit")

Pub_url=""; Pub_docc=""; Pub_BeforNav_cnt=0; Pub_DocComp_cnt=0; Pub_inp_flg=False

Fend

Procedure fucBeforNav()

ifb (Pos("javascript:",""+EVENT_PRM[1])=0) and ("about:blank"<>""+EVENT_PRM[1])

if Pub_url="" then Pub_url = ""+EVENT_PRM[1]

Pub_BeforNav_cnt = Pub_BeforNav_cnt + 1

endif

Pub_inp_flg = True

Fend

Procedure fucDocComp()

ifb (Pos("javascript:",""+EVENT_PRM[1])=0) and ("about:blank"<>""+EVENT_PRM[1])

Pub_docc = Pub_docc + "*"+EVENT_PRM[1]+"*"

Pub_DocComp_cnt = Pub_DocComp_cnt + 1

endif

Pub_inp_flg = True

Fend

Procedure fucQuit()

ExitExit

Fend

実際に表示するスライドショートして、フルスクリーン表示が可能な、jqueryのスライダーcamera slideshowを使ってみました。画像のみ差し替えあとはフルスクリーンのデモそのままです。

http://agn-web.com/demo/camera/demo/fullscreen.htm

デモではドロップボックスのpublicフォルダにスライド用の写真を入れてありますので、ドロップボックスに指定のファイル名で画像を放りこめば、デジタルサイネージのスライドショーも差し変わる、コンテンツ更新らくらく仕様です。

これで、UWSCのEXEファイルをPCに仕込むことで、フルスクリーンでIEを起動し、定期的にリロードして、指定時間にスリープするデジタルサイネージ用PCとしての体裁が整いました。

できれば、これらに加えて
・安全のためキー操作などのハードウェアロック。
・PCのハードウェア情報などのログを取り、1日1回メールで送信。
・WEBカメラを仕込んで、立ち止まった人の数を計測。
・その時何を見ていたかと合せてレポート作成。
なども仕込んでおくと、これだけでも結構高機能なデジタルサイネージになりますね。安全な連続運転にはもっと色々気を遣う必要がありますが、デモとしては十分でしょう。
安価なWindowsベースのスティックPCの登場で夢が広がります。

本格的に動かすならならもうちょっと堅牢さが必要だと思います。自由度ではRasberry PiあたりでLinuxベースのシステムを組んだ方がいいような気もします。とりあえず、お手軽さを重視して、UWSCを使った構築例でした。