メールでのお問い合わせはこちら、お問い合わせフォーム

スタッフブログ

WEB

1  2

フルスクラッチで、ウェブサイトを効率よく作成する方法

今、クライアントから受注をして、会員サイトの構築をしていこうという構想を社長と一緒に考えておりますが、
フルスクラッチで、作ることを要望されておりまして、どのようにするのが一番効率が良いかと考えております。

cloud-service-platform.png

Amazon EC2や、Heroku、Google Compute Engineなど、クラウドサービスの仮想マシン上であれば、
Railsとか、Laravelなどのフレームワークを入れて、地道に作っていてけば良いのですが、
恐らく、共有のレンタルサーバーですと、上記のようなフレームワークを動かすことができないため、
それに代わる、フレームワークもしくは改造可能なCMSを探しておりました。

そこで見つかったのが、簡易フレームワークである、levis: PHP Frameworkと、
作品公開サイト向けコンテンツ管理システム(CMS)freo。

どちらもPHP-LABOというフリーPHPスクリプト配布&改造&入門サイトを運営してた「ないと」さんが、
作り上げたシステムです。

levis: PHP Frameworkについて

levis: PHP Frameworkは、こちらで使わせていただく立場で、えらそうに聞こえると申し訳ないのですが、
PHPで作られたフレームワークもどきです。

実際にフレームワークもどきで検索して出てきました。

しかしながら、その構築の思想は、Cake PHPというとても有名なフレームワークに影響を受けていて、
かなりしっかりしたMVC(Model、View、Controller)モデルになっています。

これなら、無駄を少なくして、とても効率的にシステムを構築することができそうです。

levis: PHP Frameworkのサイトはこちら
http://refirio.org/levis/

これでしっかりとした情報管理のシステムを有するホームページが制作できそうです。

freo: CMSについて

そして、上記を調べているうちにリンクを辿ってたどりついたのが、コンテンツ管理システム(CMS) freoです。

freo自体は、PHP5と、テンプレートエンジンSmarty2で作られていて、この仕様を見たとき、
PHP5はもうライフサイクルを終えそうだし、Smartyもバージョン2だと将来性が無いな~と考えておりました。

しかしながら調べていく中で、Smartyもバージョン2.6.3あたりから、PHP7に対応していて、
freo自体も公式的にうたってはいませんが、最新バージョンでPHP7に対応しているというので、
もしかしたら、これ使えるかも?ということで、パソコンのXAMMPにシステムを入れてみました。

サポートサイトに書いてあるのですが、
php.iniに"error_reporting = E_ALL & ~E_NOTICE & ~E_DEPRECATED"を入れれば
実際にPHP7で動作することを確認しました。

Apache 2.4.37 + MariaDB 10.1.37 + PHP 7.3.1という環境です。

創作サイト向けコンテンツ管理システム freo(フレオ)
http://freo.jp/

16.jpg

更に、いろいろと見ていくと、マルチユーザー対応になっていたり、
更新のためのフォーム項目も自身で追加できたりと、かなり優秀です。
またコミュニティーもできていて、サイトなどで、ノウハウもかなり公開されていて、
悩んだときにも、解決方法を見つけられそうです。

ということで、現在、システムのベースとして
levis: PHP Frameworkとコンテンツ管理システム(CMS) freo
が候補にあがっています。

そこではっと考えたのですが、PHP-LABOのないとさんのシステムは、GPLで公開されています。

GPLとは、General Public Licenseの略で、
「自己責任で使ってください」
「著作権の表示は消さないでください」
「複製・改変・再配布・販売等は自由にやってOK」
「再配布する物もGPLライセンスにしなさい」
ということが謳われています。

つまり自由に使うことができて、それでお金をとっても結構なんですが、
引っかかるのは、再配布する物もGPLライセンスにしなさいというところです。

自分たちがこのGPLのライセンスに乗っかってシステムを構築した時に、
それを他の人達にも、GPLで公開しないといけないのか? というところが
気になって、GPLについて少し調べました。

結構長くなってきたので、GPLライセンスについては、次回紹介させていただきます。

ホームページ制作の仕事をしていると、他のホームページで使われている画像を見て、

これと似たようなイラストが欲しいな~と思うことがあります。

音楽などでも、テレビなどで音楽が流れてこの曲名なんだっけ?

ということがあり、曲名が分からなくて、イライラすることがあります。

この原稿を書いている時に、Webで検索してみたら、鼻歌で曲名を言い当ててくれるアプリがあるそうです。

soundhound.png

SoundHoundというアプリで、

・音楽を聴かせればその楽曲の情報を検索してくれる
・お店などで流れている音楽はもちろん鼻歌でもOK
・精度はほぼ百発百中、楽曲データベースも豊富

なんだそうです。

早速スマホに入れてみました。

あっ、今回話しをしたいのは音楽の話ではなく、画像の話です。

似たような画像、イラストが欲しい時に、似たような画像を検索してくれるサービスがあります。

それは、Google画像検索です。

<a href="https://images.google.com/?gws_rd=ssl">https://images.google.com/?gws_rd=ssl</a>

で似たような画像を検索してくれます。

gimage.jpg

そうすると似た画像を探したい元画像を添付します。

gimage2.jpg

そうすると似た画像をたくさん呼び出してくれます。

そこには、素材を販売しているサイトなどが出てきますので、そこから購入するなどすれば、

ウェブ制作の素材として、利用することが出来ます。

Googleは、人工知能を使って画像の解析を行っておりますので、

非常に優秀で、思った画像を見つけてくれることが多いです。

よろしければ、一度利用してみてはいかがでしょうか?

ウェブマスター向け公式ブログで、

日本語検索の品質向上にむけてと題して

Google は、世界中のユーザーにとって検索をより便利なものにするため、検索ランキングのアルゴリズムを日々改良しています。もちろん日本語検索もその例外ではありません。 その一環として、今週、ウェブサイトの品質の評価方法に改善を加えました。

と発表しました。

具体的には、一般におまとめサイトと言われる、キュレーションサイトに対して、評価を下げるという対策を打ち出したということです。

明らかに、DeNAが運営し、問題となったことも影響していると考えられますが、多くの人たちが検索をするとキュレーションサイトが上位に出てきて、どれもこれも似たようなコンテンツで同じようなことを書いていて、どこかのライターさんがコピーだとバレないようにリライトしているため、日本語のつながりがおかしくなっていたり、信憑性の無い情報になっていることに不満を持ったためと考えられます。

その不満の矛先が、Googleに向かい、Googleも対応せざるを得なかったということでしょうか。

話は、少しずれますが、YouTubeも検索すると、YouTuberと思わしき、静止画に文字が流れるようなコンテンツが幅を効かせ、見ている人たちの不満がたまってきているので今後対策されそうな気がします。

ということで、内容云々ではなく、誰が言っているのか、そしてサイトそのものに好感度が持たれるかどうかが重要になっているんでしょうね。

と書いているときにも、クライアントから電話が来ました。

その方が言うには、お客さんから

「ネットで検索したら、営業しているのに、本日休業と書いてあった。そしてお客さんが書き直せるので書き直しておいたよ。」

と言われたそうです。

それでびっくりして、

「うちのホームページは誰でも書き直せるのかい?」

と質問してきたのです。

通常のホームページが誰でも簡単に書き直せることはないので、私の方で

「恐らく、口コミサイトかなにかでしょう。最近、そういうキュレーションサイトが上位に上がってきてるんですよ...」

と説明をしました。

メインサイトよりもそういうサイトが上に上がってくるというのは、ちょっと問題だと思います。

Googleにも真剣に対策をして欲しいところです。

しかし、最近の人工知能は、すごいことになっているので、日本語の解析もどんどん進化して、
それがオリジナルなのか、コピーなのか理解できるようになっていくのではないかと思います。

Fotolia_121518785_XS.jpg

最近、キュレーションサイトに絡んで、オウンドメディアを運用しようという提案が多くなってきています。

価値あるホームページを作るのは大変ですね。

Googleのウェブフォントが便利 

最近は、海外のサイトなんかでは、ウェブフォントを使ってデザインするのが
主流になってきているのですが、日本でもGoogleがウェブフォントを
フリーで提供したことで、その利用が促進しそうです。

私の会社でも先日、ウェブフォントを使って、デザインをしてみましたが、
GoogleのNoto Sans Japaneseというウェブフォンは、太さも、100~900までと
細い文字から、太い文字まで指定できて非常に良い感じです。

ライセンスは、Apache License, version 2.0ということで、
自由に使って良いし、料金も取られません。

notosans.jpg

使い方は簡単です。

<style>
  @import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
</style>

とスタイルに記述して、

あとは、それぞれのCSSのclassもしくは、idに下記を指定するだけです。
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 900;
手順は簡単で、しかもとても便利です。

今後のウェブサイトは、スマートフォンから、パソコン、
あるいはテレビまでのあらゆるデバイスに対応しないといけないので、
ウェブフォントを使って、折り返しが臨機応変に対応できるというのは
非常に有難いことです。

欲を言えば、ゴシック体のNoto Sans Japanese以外にも、
明朝体のフォントが増えてくれると非常に有り難いですね。

Googleさんに期待しております。

Firefox 36がHTTP/2に対応 

会社でもよく使われている、Firefoxが2月24日、最新のバージョン36に更新されました。

FF36.jpg

http://www.itmedia.co.jp/news/articles/1502/25/news051.html

今回の目玉の機能は、今月17日に正式な仕様として承認されたばかりのネットワーキングプロトコル「HTTP/2」をフルサポートするということです。

HTTP/2については、下記のスライドシェアでいろいろと説明されていますが、HTTP/1.1の非効率な部分を解消して、またいろいろと新しい機能がついているようです。

ブラウザでのプッシュ通知もできるようになりそうです。

HTTP/2は現在広く使用されているHTTP/1.1との互換性を維持しながらも、新たな機能や特徴が複数盛り込まれていて、多くのリクエストを同時に転送可能にし、通信時の負荷も少なくすることが可能になるのだそうです。

米GoogleのChromeブラウザも次期アップデートから段階的にHTTP/2をサポートすると発表しているので、今後HTTP/2への流れが加速しそうですね。

みんながよく使っているWeb ServerのApacheなどで使えるようになるか気になるところです。

HTTP/2が普及すると、ホームページでさらにリッチなコンテンツが可能になりそうです。

今後もHTTP/2についての情報を収集したいと思います。

レスポンシブ対応 

DAOのサイトがサーバを変更したタイミングで、レスポンシブ対応に変更してみました。

今まではスマートフォンで見ると、パソコンでみたレイアウトがそのままの状態で表示され、スマートフォンの操作で拡大するなどしてみることを前提としていました。

dao_pc.jpg

レスポンシブ対応としては、メニュー部分をコンパクトに折り畳んで、サイドバーの部分をカラム落ちさせて、コンテンツの下部に並ぶようにレイアウトを変更する形にしています。

dao_sp.jpg

メインビジュアルの部分は表示させた状態でも良いのですが、リサイズさせるのが難しいようなので非表示としました。

元々レスポンシブ対応を考えてのレイアウトではないので無理もありますが、前よりはスマートフォンで見やすくなったのではないでしょうか。

メニュー部分に使用したのはjQueryのプラグイン「MeanMenu」です。

サイトからzipファイルをダウンロードし、CSSとJavascriptをHTMLから読み込みjQueryで「MeanMenu」を呼びたします。

jQuery('要素').meanmenu();

画像を使ったメニューだとスマートフォンで見たときに、リストに画像がそのまま表示されるので、文字に置換する仕組みが必要になります。

MeanMenuはwordpressのプラグイン版もあるので便利ですね。

タブレットをターゲットとするサイト等を制作する場合、普段のPC用サイトでは気にならない事が、問題になったりします。

画面サイズの制限が厳しいため、ナビゲーション等を無くして本文コンテンツをフルスクリーン化したくなることがあったりします。
その理由は様々。
a.文字などを大きくして見やすくしたい(内容の拡大)
b.スクロールを減らして見通しをよくしたい(表示領域の拡大)


以下はフルスクリーン化のサンプルです。
(IEの場合、IE11以降が必要です)

フルスクリーンサンプルを見る


表示切替1ボタンではフルスクリーンにした際にスタイル等は変更していません。
上で言えばb.の用途で使うのに適しています。
表示切替2ボタンではフルスクリーンにした際にスタイル等を変更して文字を大きくしています。
(ついでに背景色も変えています)
この場合はa.の用途で使うのに適していますが、元に戻す処理が必要となるためESCや表示切替1ボタンでフルスクリーンから戻ると、変わりっぱなしになるので、使いどころに注意が必要でしょう。

WordPressでシンプル予約システムを導入するプラグイン「MTS Simple Booking C」が便利そうなのでご紹介いたします。

プラグインは有限会社エムティシステムが開発したもので、無償版の「シンプル予約システム」と有償版の「シンプル予約システムビジネス版」があり違いは「オプション機能」「ユーザー登録機能」「問合せフォーム機能」の有無となっているようです。
詳細はホームページでご確認ください。

ローカルのWordPressに「シンプル予約システム」を設置して試してみました。
プラグインはダウンロードのページから圧縮ファイルをダウンロードして、解凍後にWordPressの「plugin」フォルダへコピーします。
WordPressのプラグイン画面で有効化すると設置が完了します。

wp01.jpg

設置が完了すると「予約システム」のメニューが表示されるので、「各種設定」の項目を設定していきます。

wp02.jpg

設定が完了すると予約受付を行いたい内容を設定していきます。
カスタム投稿タイプ「予約品目」が表示されているので、記事の投稿と同様に予約品目を追加していきます。

wp06.jpg

予約品目の内容を設定したあとは、受付するスケジュールをスケジュール管理のカレンダーで設定します。
曜日ごとに設定できので細かい要件の対応できそうです。

wp07.jpg

実際のサイト上に表示する内容は固定ページの作成で行います。

○受付フォームのページ: スラッグ「booking-form」
○受付完了のページ: スラッグ「booking-thanks」
○カレンダーのページ: ショートコード [monthly_calendar id="xx"]

ショートコードの「id=」は「予約品目」のpostIDが入るようです。
Contactform7のようにどこかに表示してくれたら良いに...。

wp08.jpg

メニューなど日本語で書かれていて、これだけの手順で予約システムが導入できるのは手軽で良いですね。

ここではザックリとした流れを書きましたので、詳細を知りたい場合は開発元のホームページでご確認ください。

12月になってすごく寒い日が続きます。

私の会社ですが、これまでサーチエンジン対策を結構売りにしてきたのですが、それが通用しない時代に入ってきました。

サーチエンジン対策、ちまたではSEOと言われる技術ですが、Googleが評価しているホームページ内の要素と、ホームページ外の要素を人工的に作り出して、ホームページの検索順位を上げていこうとするものです。

これまでGoogleは、ホームページ内の要素は、自分たちでいくらでもいじることができるので、自分たちではどうすることもできないホームページ外の要素を重く評価してきました。

しかし、SEOをする人たちは、このことをGoogleが評価していることを知って、自作自演で被リンク構造を作り上げて順位を操作してきたのです。

しかし、Googleは、このことに対して対策を講じるようになってきました。2012年以降の話です。

それで被リンク構造をパターン認識して、人工的であることが分かると、容赦なくペナルティを加えるようになってきました。

これがペンギンペナルティです。

それと同時に、低品質なコンテンツに対するペナルティも加えられるようになりました。
つまり重複コンテンツや、他のサイトから拝借したようなコンテンツのサイトはペナルティを受けるのです。

さらには、ハミングバードという新しいアルゴリズムによって、検索エンジンが人工知能のような優秀さを身につけててきます。

そのような時代になってくると、旧来のSEOでは歯が立たなくなってくるのです。

その一つの対策が、コンテンツ・マーケティングというものです。

良質なコンテンツを継続的に提供することで、サーチエンジンもそのホームページを評価してくれるようになるのです。

そして、私もSEOがうまくいかなくなって、いろいろ調べて分かってきたことが、Googleは過剰なSEO対策に対して、ペナルティを加えますが、コンテンツの量が多ければ、被リンクに対する耐性が強くなるということです。

シンプルに考えれば、分かることなんですが、少ないコンテンツしか無いのに、被リンクがやたら多ければ、それは不自然です。

コンテンツが多ければ、多少リンクが多めにあっても不自然では無いということなんです。

ですから、これからサイト運営者は、外的なSEOよりも、内的なSEO、さらにはコンテンツ・マーケティングを真剣に考えたほうが良いと思います。

私も真剣にコンテンツマーケティングに取り組もうと思い、本を購入しました。

そちらが、商品を売るな コンテンツマーケティングで「見つけてもらう」仕組みをつくるという書籍です。

商品を売るな コンテンツマーケティングで「見つけてもらう」仕組みをつくる
商品を売るな コンテンツマーケティングで「見つけてもらう」仕組みをつくる 宗像 淳

日経BP社 2014-12-04
売り上げランキング : 48


これからGoogleと渡り合っていくためには、このような観点が必要だと思います。

今年も残すところ一か月足らず、2015年までもう少しですね。

こんな時に使いたくなるのが、そうカウントダウンタイマーです。キャンペーンサイトなんかには欠かせませんね。

このカウントダウンタイマーを設置するのは、昔ならFlashを使うことが多かったのですが、最近はスマホ、タブレットなどのデバイスが増えてきてJavascriptで代用するというのが傾向になりつつあります。

Javascriptで格好いい、カウントダウンタイマーが無いかな~と探していたらありました!

flipCountDownというJqueryで動くカウントダウンタイマーです。

http://xdsoft.net/jqplugins/flipcountdown/

flipCountDown


こんな感じのカウントダウンタイマーを作ることができます。

最初にプラグインを読み込みます。

<script type="text/javascript" src="/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.flipcountdown.js"></script>
<link rel="stylesheet" type="text/css" href="/jquery.flipcountdown.css" />

divのエレメントを追加します。

<div id="flipcountdownbox1"></div>

flipcountdownを初期化します。

jQuery(function(){
  jQuery('#flipcountdownbox1').flipcountdown();
})

各種設定がありますが、新年へのカウントダウンはこんな感じです。

jQuery(function(){
 jQuery('#new_year').flipcountdown({  
  size:'lg',
  beforeDateTime:'1/01/2015 00:00:01'
 });
});

これで動かすことができます。

ぜひ使ってみてください!

デモはこちら

今、あるサイトのモックアップを作っているのですが、そこに実装しようとしている機能があります。

ツールチップという機能で、日本語では吹き出しとも言います。

あるページ上のオブジェクトにマウスを合わせると、吹き出しが現れるという機能で、最近良く使われるようになってきました。

それで今回使おうと思ったのが、jQuery PowerTipというJqueryのプラグインです。

jQuery PowerTip
http://stevenbenner.github.io/jquery-powertip/

実装方法としては、Jqueryの本体と、jquery.powertip.jsを読み込み、

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript" src="js/jquery.powertip.js"></script>

ツールチップを表示する要素をjQueryのセレクタで指定し、スクリプトを実行します。

$('.tooltips').powerTip(options)

あとは、タイトルタグに表示したい文字を記載するか、

<a href="hoge/link" title="This will be the tooltip text.">Some Link</a>

もしくはdata属性に記載することでいけるみたいです。

<a href="/hoge/link" data-powertip="This will be the &lt;b&gt;tooltip text&lt;/b&gt;.">Some Link</a>

これで動かせるんですが、本サイトのデモをダウンロードして、exampleを動かしてみたのですが、きちんと動作せず結構焦りました。

よくよく見てみたら、プラグインのファイルが読み込まれていませんでした。

「exampleが動かないってどういうことですか?」という感じです。


それでこちらで直して、動作するようになったものをアップしました。

jQuery PowerTip DEMO

動作確認はこんな感じで確認できます。

powertip.jpg

あなたの宇宙戦艦はこれです 

battelship.jpg今日はちょっと毛色の違ったものを紹介します。

弊社のFacebookページにはウチの業務と関連の無さげなアプリが掲載されています。
「あなたが宇宙戦艦の艦長だったら誰を乗組員にしますか?」というアプリで、簡単な質問に答えるとFacebook上の友人5名を乗員に迎えて、どんな戦艦の艦長になれるかを表示するジョークアプリです。

このアプリをFacebook不要にしたのが今日紹介する「あなたの宇宙戦艦はこれです」です。
単なるweb上のアプリなので、個人情報は全く使いません。
「(自分や友人や同僚・上司・後輩の)実名が表示されるようなアプリはちょっと(人、特に会社の人には見せられない)」という方も、安心してください。

巷では宇宙戦艦や(宇宙ではない)戦艦が活躍するアニメやゲームが話題です。
いつもはビジネスで一杯の頭の片隅に、別分野の風でも入れてみませんか?

sbn.jpg

◇補足
ちょっと知識のある人だと「戦艦と言ってるのに戦艦にならないぢゃないかw」という事が多いと思いますが、「宇宙戦艦」を「宇宙軍艦」にすべきというご要望にはお応えできません。m(__)m

Adobe CC 

制作業務では「Adobe Creative Cloud」を使っていますが、たくさんあるアプリケーションの中で普段使っているのはWebに関連するアプリが中心になります。

Webで動きのあるコンテンツを配置する場合は、FlashかjQueryプラグイン系を中心に検討しています。

「Adobe Creative Cloud」には、「Edge Animate」が入っていますがこれまでのところ使っていません。
使い慣れたFlashでモーションを作り「HTML5 Canvas」でパブリッシュしても良いのかも知れませんが、使ってみないことには比較もできませんので、これから試してみたいと思います。

ただ、そろそろ「Adobe Creative Cloud」の新しい情報が出てくるかも知れないので、どう転ぶかは状況によりますね。

adobe_cc.jpg

4月17日、18日と株式会社ザッツが主催される
 「ニュースレター・広報誌プロフェッショナルデザイナー養成講座」
に参加してきます。

自社でニュースレターを発行しているが、なかなか効果が上がらない
とか、作るのが面倒で挫折していしまったという会社が多いと思いますので、
当社で、札幌圏を中心にニュースレターの代行サービスを始める予定です。

札幌の会社でニュースレターの制作に関心をお持ちの方はぜひご連絡下さい。

株式会社ザッツは販促のコンサルティングをしている会社で、かなりのノウハウがありますので、当社では株式会社ザッツと提携して、これからニュースレターの代行サービスを展開していきます。


新着情報管理ツール whatsnew.d 

ホームページ制作には、いくつか定番の要素があります。
その一つがトップページにある「更新情報」の表示。
ホームページは更新がありますから、その更新を告知する事が必要ですね。
更新以外でもニュース等の告知情報※を掲載する事がよくあります。

※告知情報
 サイト自身の更新は伴わない情報です。
 病院や教育施設等のサイトですと、休診や休講のお知らせが該当します。

ですが、更新のたびにトップページを書き換えるのは大変です。
弊社と保守契約されているお客様のサイトなら、私共で書き換えますが、自身で制作運営されているサイトだと面倒ですよね。
もちろん、保守契約されているお客様でも、告知情報だけなら自分で書き換えられる方が便利です。
CMSを使っているサイトならそういった機能も用意できますが、普通のサイトでは何がしかのプログラムが必要です。

昔はSSIやIFRAMEとCGIを組み合わせてページ内に動的コンテンツを組み込むなんて事もありましたが、現在ではセキュリティの観点からSSIは利用できないサーバが多いですし、PerlのCGIは一般の方には設置のハードルが高いという問題があります。

そこで、この度「新着情報管理ツール whatsnew.d」を作りました。
「更新情報」や「告知情報」を管理するツールです。

このツールはPHPを使用しているため、Perlより設置が楽です。
また、SSIを使わないので多くのサーバで利用できます。
自身のサイトに設置される場合は、商用でも無料でお使いいただけます。
詳しくは下記ページをご覧ください。

無料配布ツール
http://www.dao.jp/s-tools/


このツール、実は私自身が必要とした機能を追加しています。
それは「プレビュー機能」です。
(その代わり確認画面はありません)
実際の見え方に出来るだけ近い表示でチェックしたいと思う訳です。
いきなり稼働中のサイトに載せて、後から再編集でも良いのかもしれませんが、途中の状態を公開するのは、やはりかっこ悪いので、この機能を付けました。

1  2