メールでのお問い合わせはこちら、お問い合わせフォーム
  • スタッフブログ

スタッフブログ

前の15件 1  2  3  4

第66回さっぽろ雪まつり 

今日から「さっぽろ雪まつり」が始まり、期間は2月5日(木)~2月11日(水・祝)となっています。
昨日は会社からの帰りに大通公園へ行って写真を撮ってみました。

地下鉄を西11丁目で降りて向かったのは『雪ミク』です。
まだ作業中でしたが、丁度完成する直前だったようで、公式写真の撮影するタイミングを見る事ができました。
去年と似たような雰囲気ですね。

yukimatsuri_001.jpg

5丁目では人形劇とオペラの融合『雪の国のアリス』が
上演されるようでリハーサルが行われていました。

yukimatsuri_002.jpg

雪の雪像も良いですが、氷の氷像も綺麗です。
夜はライトアップされるので、より綺麗に見えますね。
昨日は満月だったので、雲から顔を出す月が幻想的でした。

yukimatsuri_003.jpg

道庁前の『アカプラ』では『ユキテラス2015』が行われています。
地上から上がるライトの光が雲を照らします。
雪が降ったらどんな感じに見えるのでしょう。

yukimatsuri_004.jpg

また時間があれば見に行ってみたいです。

レスポンシブ対応 

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

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

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

先日ハイブリッドアプリが出現するまでの話をしましたが、今回はハイブリッドアプリを作るのに何を使うかというお話です。

ツールとしてはオープンソースの開発ツールが有名です。
eclipseなどがよく使われていると聞きます。

開発ツールと聞くと以前は大手メーカー製のものが中心でした。
代表的なものはマイクロソフトのVisual Studioですね。
昔はVisual-C、もっと昔はMS-C。
その頃はboland-C++やLattice-Cといったサードパーティーの開発ツールメーカー製品もありましたが、Windows時代になってVisual-Cが登場してからはだんだん廃れて、Visual Studio以外は見かけなくなりました。

ですが、現在はオープンソースの開発ツールが大きな勢力を作っています。
プラットフォームの多様化に伴い、状況も変わっていたわけです。

ハイブリッドアプリはスマホ用のアプリのため、そもそもマイクロソフトが関係しないという点も、この状況の原因の一つでしょう。
(Windows Phone は日本はもちろん、米国でもあまり普及していないので、それ用の開発ツールも「主流」にはならない訳です)

それが先月、状況が変わる事になりました。

Visual Studioの最新版(Visual Studio 2013)がハイブリッドアプリの開発をサポートしたのです。
つまり、マイクロソフトのツールでAndroid用やiOS用のアプリを作れるようになったのです。
(iOS用を作るのにMacが必要なのは相変わらずですが)

Visual Studio に Apache Cordova を入れることで、ハイブリッドアプリが作れる環境になります。

ここまでは(条件次第で)無償でいけます。

なお、今回Visual Studioには(現状有償で今後もそれなりの商品を作る気なら多分有償ですが)ほぼネイティブ動作をするスマホアプリの開発環境も用意されました。
Xamarinというものをサポートしたと報じられています。
これを使うと、C#でAndroid用とiOS用のアプリを開発できるそうです。
同じソースとはいかないようですが、同じ言語でいけるわけです。
(本来はAndroidはjava、iOSはObjective-C)


とりあえず、遅いうえに知らない間に起動しなくなったりするeclipseを使わなくてよい分、ハイブリッドアプリが一歩身近になった気がします。
(Visual Studiomも同じ病にとらわれなければ良いのですが。遅いのはeclipse自身の問題でも、動作がおかしくなるのはeclipseの責任ではないので。)

プラットフォームが単一化への道を進むように、開発ツールも単一化へ進むのかもしれませんね。
学習コストの節約には良いと思います。

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

コンテンツマーケティング

を購入しましたが、そこに、

「なぜコンテンツマーケティングをしなければならないのか?」

8つの理由が書かれていました。

[理由1]広告宣伝費を抑えられる
[理由2]オピニオンリーダーになれる
[理由3]顧客に嫌われない
[理由4]顧客とのコミュニケーションが生まれる
[理由5]顧客のロイヤリティを高められる
[理由6]ターゲットが絞り込みやすくなる
[理由7]情報を自然に拡散できる
[理由8]顧客の反応が検証しやすくなる

ということだそうです。

確かに売り込みは嫌われますし、良いコンテンツは自然と拡散されていきます。


ある海外のソーシャルメディア・マーケティングの内容に次のようなものがありました。

ソーシャルメディアコンテンツの原則

拡散因子#1:人々はポジティブなコンテンツをシェアする
拡散因子#2:人々は感情的なコンテンツをシェアする
拡散因子#3:人々はメリットのあるコンテンツをシェアする
拡散因子#4:人々は面白いコンテンツをシェアする
拡散因子#5:人々は政治&宗教をシェアする
拡散因子#6:人々は人々を考えさせるコンテンツをシェアする
拡散因子#7:人々はユニークなコンテンツをシェアする
拡散因子#8:人々はショッキングなコンテンツをシェアする
拡散因子#9:クリティカルマスに到達しなければならない
拡散因子#10:人々はインセンティブのあるコンテンツをシェアする


良いコンテンツはシェアされるのです。


ユニリーバのダヴ リアルビューティー スケッチというコンテンツは、
海外で6,500万回、日本語版も200万回再生されています。


確かにこの映像を見ると見るとジーンと来て、シェアしたくなります。

この動画にコンテンツマーケティングの本質、
さらには、最近コトラー博士がいうところのマーケティング4.0が
提示されていると思います。

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

ハイブリッドアプリ 

コンピュータソフト(アプリ)を作る場合、開発ツールというものを使ってプログラムを作り、アプリを完成させます。

では、ちょっと昔話をしましょう。
昔、8ビットパソコンが一般的だった頃はこの開発ツールやプロクラムがコンピュータごとに違うものでした。
各メーカーから発売さているパソコン※ごとに、別々のツールを使って別々のプログラムを作る必要があったのです。

※同じメーカーでもシリーズが違えば互換性が無いため、別々のものになります。
例 NEC PC-6001とPC-8001,シャープ X1とMZ いずれも8ビットパソコンです

このため、ソフトハウスは色んな機種用にプログラムを作らねばならず、余計な手間がかかっていました。

16ビットパソコンの時代になると各機種ともMS-DOSという同じ名前のOSを使うようになりましたが、OSの機能だけでは実用性のあるプログラムは作れないため、やっぱりメーカーごとに違うプログラムが必要になりました。
ただ、この頃になるとメーカーも知恵を付けて、「メジャーなもの」にだけソフトを作るようになります。
早い話がNECのPC-9801シリーズ用しか作らないようなったのです。
これでソフト制作の手間は軽減されます。
単一の対象にソフトを作るのがソフト開発の理想形ですから。
シェアで劣勢になってソフトの供給が途絶えたNEC以外は連合してAXなどの共通規格パソコンを作ったりしましたが、全く太刀打ちできませんでした。

32ビットパソコンの時代になると、世界共通のパソコンが日本に現れます。
それまでは日本語処理を快適にするためには専用のハードが必要なため、海外のパソコンは(Macを除き)誰も使いませんでした。
しかし、パソコンの処理能力の向上によって、ソフトで日本語処理が出来る様になったため、DOS/Vパソコンと呼ばれるパソコンが現れたのです。
ただ、これも結局ソフト不足で、一部のパソコン自体が趣味というPCオタクしか購入しませんでした。

その後ウインドウズの時代になると、全ての(Macを除く)パソコンで同じソフトが動くようになります。
やっと「単一プラットフォーム」の時代が来たのです。


ところで、スマートフォンも中身はコンピュータです。
パソコンの世界ではアップルのMacは異端児扱いでソフト開発の上では無視しているソフトメーカーが多いのですが、日本のスマートフォン市場ではアップルのiPhone(iOS)は大きなシェアを持っています。
このため、AndroidとiOSの両方に対応する事が必要となります。
この両者、見た目は似ていても、開発ツールは全く異なり、出来上がるプログラムも別物です。
つまり、開発者にとっては、98時代よりも昔に逆戻りしたようなものです。

そこで考え出されたのがハイブリッドアプリという考え方と技術です。
ひとつの開発ツールから、Android用とiOS用の両方のプログラムを作ることで、「単一プラットフォーム」に近い状況を作り出したのです。

スマホ用アプリは規模の小さいものが多いため、コスト軽減の観点からもハイブリッドアプリは好都合。
ですが、動作速度面での課題など、問題点もあります。
今後もこの技術の進展には注目していきたいと思います。

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

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

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

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

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

sbn.jpg

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

ネットでよく利用されるサービスとして、ブログやSNSと並ぶのがツイッターです。
ツイッターで投稿できる文章は文字数が少ない短文なため、長い文章を投稿したい場合は何回かに分けて投稿する必要があります。
でもツイッターに張り付いて次々と入力していくのは、あまりやり易い話ではありませんね。
そこで、ツイッターでのつぶやきをあらかじめ用意しておいて、一定時間ごとに自動投稿するツールを作りました。

長文であれば、あらかじめ原稿を用意しておく事もあると思います。
その原稿がテキストファイルで、1行がツイッターの文字数制限以内なら、そのままこのTweetPlanner.dで読み込んでツイートする事が出来ます。
何度もコピペする手間が省けます。

今回公開した無料版のTweetPlanner.dでは最大20行分のツイートまで対応しています。
多くの用途では十分な行数と思いますが、不足を感じる方向けに行数制限の無い有料版も用意しています。

なお、このツールはWEBサービスでもサーバに設置するものでもありません。
Windowsパソコンで動作させるプログラムです。
C#を使った関係で動作環境は.NET Framework必須です。
開発・テスト環境が.NET Framework 4 のため、これを動作環境としています。
(.NET Framework 3.5等(Windows7の標準は3.5.1、Vistaは 3.0 ※)での動作テストは行っていないので、windows update等で 4にした上での利用を推奨します)

※Windows 7に標準で含まれる.NET Frameworkのバージョンは? - @IT
 http://www.atmarkit.co.jp/fdotnet/dotnettips/934win7fx/win7fx.html

Adobe CC 

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

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

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

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

adobe_cc.jpg

ある医療機関からの依頼を受けて、診察の順番待ちシステムを構築中です。

人気のある病院は、本当に待たされるんですよね。

私の子供がアトピーを持っていて、

治療のためにいつも通っている医療機関があるのですが、

2時間待ちは当たり前。

お子さんを連れた主婦たちも本当に時間が勿体無いな~って思います。

しかし、順番待ちシステムを使うと、ネット上から診察予約が出来て、

システムが予測した待ち時間後に行けば、あまり待たずに診察を

受けることが出来ます。


このシステムを導入してくれれば、家族も待ち時間が少なくなって、

どんなに良いことかって思うのですよね~

もうすぐ出来上がりそうなので、出来上がったらご紹介いたします。

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

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

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

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


前の15件 1  2  3  4