「作れるWEBCHAT」販売開始

ウェブサイトへ配置して、２４時間応答ツールとして利用可能な「作れるWEBCHAT」の販売を開始しました。

簡単に更新可能なムーバブルタイプドットネットの機能をデータベースとして利用し、ご自分等で簡単に応答の設計・作成ができます。

製作ベースにMovableType.netをご利用の方は、「作れるWEBCHAT」の買取版をご購入いただけます。通常月額利用料がかかってしまうウェブチャットですが、一度の購入でお使いいただけるのでとても経済的に導入いただけます。

詳しくはこちらのサイトのご案内をお読みください。　MtoM・「作れるWEBCHAT」のご案内

ヴァーチャル産業交流展2020へ参加

ヴァーチャル産業交流展２０２０で以下の新商品をご案内しています。

2021年１月20日〜２月１９日　ヴァーチャル産業交流展２０２０

https://vsangyo-koryuten.tokyo/

★オンライン受付処理システム「CATHAND」

自治体等の早急に対応が必要な補助金・助成金の事務処理を、セキュリティを保ち、早く、正確にオンライン上で処理できるシステムを開発しました。
オンラインで受付し、リスト化する様々な業務にも対応するカスタマイズが可能です。

詳しい資料はこちらからダウンロードできます。

★LINE自動応答「チャット職人」

ご事業のQandAや個人のニーズに合わせた商品紹介など、２４時間無人対応できます。

LINEのお友達登録をしていただくと、「チャット職人」の製作見本をご覧いただき、実際に体験いただけます。

詳しい資料は以下よりダウンロードしてください。

★WEBサイト構築「Move up to MovableType.net」

貴社のウェブサイトは安全ですか？常時SSLに対応していますか？

担当者が専門知識がなくても簡単に更新でき、もちろんスマートフォン対応。優れたデザイン性と実用性を持ち、検索に強く、安全に使えるWEBサイトにお引越ししませんか？

高機能・低価格　ウェブサイト構築サービス　ムーバブルタイプドットネットへのムーブアップ（サイト引越し）サービス

専用サイトURL　Move up to MovableType.net

常時SSL化したのに鍵マークが緑色にならない!チェックした方が良い箇所

弊社サイトもサーバーで無料で提供されているLet’s Encryptを利用してサイトを常時SSL化にしています。

 

常時SSLとは、ウェブサイトを閲覧する（ウェブサイトにアクセスする）際、閲覧するためのHTMLファイル等が閲覧者のPCに送られ表示されるので閲覧できるようになるのですが、そのファイル転送等の際、送っているファイル情報を暗号化して通信するという規格です。

 

今までは、ユーザーが個人情報等を入力する場合に必須の通信規格でしたが、誰でも安心してインターネットを利用するために、現在はインターネット業界全体でこの安全な通信をすべてのウェブサイトに導入する事を推奨しています。常時SSLとは、サイト全体を暗号化して通信させる次世代の標準化規格なわけです。

 

FirefoxやChromeでは常時SSLでないサイトで入力項目に入力しようとすると、警告が出るようになりましたので、常時SSLの実装は急務かと思います。

 

たとえばさくらサーバーでは、無料でこのLet’s Encryptを導入できるしくみがあります。その手順は以下のとおり。WordPressサイトに導入を想定してご説明します。

 

・管理画面へログインする。ドメイン／SSLメニューから、独自ドメインの横に表示されている「登録」から無料のSSLを選択し、クリック。

 

この作業は、独自ドメインに対して、Let’s Encryptを取得発行する作業をやってくれるもので、ネイキッドドメインとwww付きのドメインに対して証明書を発行してもらえます。また、３ヶ月ごとの更新作業もバックエンドで行ってくれるので、一度設定したらあとは放置でかまいません。（※導入にあたっては、さくらサーバーの詳細を確認してください。）

 

導入したから、これでhttps:// と「S」が付いた状態でアクセスできるようになりはしますが、このままですと、鍵マークは緑になりません。

 

HTTPSの規格では、そのサイトに読み込んで表示するものは、同じHTTPS通信からのものでないと、警告が出てしまうのです！

 

たとえば今までサイト内で表示していた画像ファイルなどは、登録時のURLはhttpのままです。ですから警告が出てしまいます。そんな画像は大量にあるでしょう。しかも、ワードプレスには検索置換の機能も無いです。

 

さくらサーバーと組み合わせて使っている場合、便利なプラグインが用意されています。そのプラグインを利用すると、サイト内のhttp://画像のURLをhttps://に書き換えて警告が出ないようにしてくれます。「SAKURA RS WP SSL」というプラグインです。

 

その際、phpのバージョンをアップしておかないとプラグインが動作しないので、さくらの管理画面からPHPのバージョンを5.6か7.1にしておきます。（※バージョンアップで不具合が起こる場合があるので各自の責任で行ってください）

 

管理画面からインストールして、サイト内のページが全て鍵マークが緑色である事を確認します。

 

弊社では、ここで２つのページが鍵の色が安全を表す緑色になりませんでした。

 

・アフィリエイトの画像を読み込み→この画像の読み込み先がhttpとなっていました。
こちらの大手画像リンク先は当然すでにhttps化しているだろうとimgのリンク先をhttpからhttpsに書き換える

 

このページは無事にSSL化できました。

 

・トップページが緑鍵にならない。。。どこに原因があるのか、HTML側からしっかりチェック。

 

すると、SNSの外部読み込みソーシャルボタンがhttpのままでしたので、httpsに書き換えクリア。

 

鍵が緑マークとならない理由の多くはhttpからの画像読み込みが原因です。特に外部のサイトからの画像読み込みをチェックしていただくと、無事常時SSL化が完結します。

 

 

**************************************

 

 

弊社ではこの常時SSLが標準装備される、MovableType.netというサービスをご紹介する場合が多いです。中小規模のサイト製作には、高機能、安全、低価格で利用する事ができます。お客様側で何にもする必要がありません。完成後は簡単にご自分達でいつでも自由に発信していく事ができます。

301リダイレクトに日本語ドメインを宛てる場合の注意・日本語ドメインの周辺サービスでの適応状況

日本語ドメインですが、ずいぶん広まってきて、それに伴う周辺技術もだんだんと対応してきているように思えます。

日本語検索に関して考えると、やはりかなり有利になると思います。

 

 

３０１リダイレクトファイルに記述する日本語の部分をpunycodeにする

 

この度、地元でクリニックを開院していらっしゃるお客様がクリニック名を変更するにあたり、日本語ドメインを採用する事にしました。

旧

名称：◯◯クリニック　URL: marumaru.com

新

名称：◯◯△△クリニック　URL:www.日本語文字.com

という感じです。

 

旧ドメインを管理しているサーバー内に301リダイレクトのファイルを設置しました。

その際、新ドメインの中にある日本語はそのままだとうまくリダイレクトしません。

日本語を含んだドメインをDNSサーバー等で扱えるようにするにはpunycodeという英数文字列に変換する必要があります。

日本語をpunycodeに変換してくれるサイト：http://punycode.jp/

たとえばここでドメイン名である「日本語文字」という日本語部分だけをpunycodeにして前後のwww. と.com を組み合わせればリダイレクトする際のドメインができます。

 

 

301リダイレクトファイルの記述方法

 

301リダイレクトファイルですが、サーバーがその機能（mod_Rewriteが使えるApacheサーバー）に対応している必要があります。

 

 

301リダイレクトファイルは.htaccessというファイルに記載しますが、この拡張子で作ってしまうとPCからは見えないファイルになってしまうので、htaccess.txtというファイル名にしてテキストファイルとして編集し、サーバー上にアップロードしファイル名称を変更します。

 

古いドメインはwww付きとネイキッドドメインの両方が新ドメインへリダイレクトするようにします。（2行目から3行目、６行目から７行目）またこのドメイン名配下のフォルダにアクセスしてきたすべてのアクセスを新ドメイン配下の同ファイルへリダイレクトさせます。（4、５行目）

 

これは、ウェブサイトの中身は変更なく、ドメイン名のみを付け替えているので、旧ドメインのSEO的資産を新ドメインへ永久にリダイレクトする事により、旧ドメイン資産をそのまま引き継ぐ処置となります。

 

ドメインの付け替えによるロスを極力減らす措置と言えます。

 

 

日本語ドメインへのサービス対応状況

 

いくつかのインターネットサービスでは、日本語ネイキッドドメインは使えない（登録できない）状況にありましたので、www付きの日本語ドメインを正式ドメインとしました。

(2017年2月現在)

 

Google Analytics , Google Search Console　・・・　日本語のネイキッドドメインは登録不可でしたがwww付きならば箇所によっては日本語のまま登録可能、punycodeならば登録可能。

 

MTクラウド・・・　www付きならば設定可能。ただし、punycodeで登録したほうが良い。（再構築時にエラーがでたりする）

 

FONT PLUS(日本語ウェブフォント)・・・綺麗な丸ゴシックを表示したい為、利用。

ここでは、www.日本語文字.com、www.punycode.com、日本語文字.com、punycode.com など、全部を登録しました。デバイスにより日本語対応状況が異なるらしく、URLを前方一致で判断しているとの事でデバイスによって送られてくるコードが異なるそうです。

（※不思議な事にiphone7で見た際、未だにウェブフォントが出たり出なかったりする。笑）

 

検索に強い日本語ドメインですが、いざ周辺サービスを利用しようとすると、対応していないサービスもあり、サポートに問い合わせたりとなかなか大変でした。

 

ところでpunyの意味ですが、直訳だと「うんざり」です。日本語がうんざりコードって。。。笑

超簡単設置！レスポンシブ対応スライダー Swiperの設置方法

レスポンシブウェブデザインに対応しているスライダー、Swiper（3.4.1バージョン）の設置方法をご紹介します。

 

Swiper 本体サイト(英語)

 

他で使っているjQueryなどと競合しないので、安定して使いやすいスライダーです。

・１画像づつの切り替え

・画像サイズは同じ

・オートプレイ

・ナビゲーションドットを表示する（色変更する）

場合のご紹介です。

 

CSSの設置

 

CSSとjsファイルの両方とも、CDN での設置方法なので以下の行を記述するだけです。（CDNサイトへリンクして必要なファイルを読み込む形）

<head>~</head>内へ記述し、CSSを読み込みます。自サイトのスタイルシートの前に記述する事で、後ほどドットのカラーなどを変更できます。

 

 

jsの設置

 

次にHTMLのBodyの締めタグ</body>の直前にjsファイルの読み込みとjsのコードを設置します。

jsコード内では、オプションが設定できます。

 

 

オプションの説明

direction :画像の設置、切り替え方向。horizontalは水平に切り替わる事を意味しています。

loop:最後画像まで行くと、最初の画像が引き続き出てくる

autoplay: 自動でずっと動き続けるモード。画像が静止して表示される秒数。1000が１秒。

speed:１つ１つの画像が切り替わる速度。数字で指定。

effect: 画像の切り替え方法。fadeは消えて次の物が出る。他にslide:右から左にスライド、cube:四角の箱が回る感じ、coverflow:切り替わる際、前後画像が斜めに。flip:画像が裏返しに切り替わる。などがある。

pagination:画像下部に表示させるページネーション（この場合ドット）を囲むHTMLのセレクタ名を指定。

 

オプションの詳細はこちらから（英語）

 

スライド画像の指定

 

スライダーを設置したいHTMLの場所に下記のように設置

 

最後のswiper-paginationはナビゲーションを設置する場合。要らなければこの行は削除。
ここまでの設置でスライダーは動きます。

 

さらに、左右に「＜　＞」の形の前へ、次へのナビゲーションを出す場合、スクロールバーを出す場合などは

swiper-paginationの行の下に下記を追加すればOK

 

 

このスライダーは、全体を囲う .swiper-container に幅や高さを指定しないと設置している画像の大きさでレスポンシブ対応となります。幅は100%が指定されている場合と同じ動作となります。

 

ドット色変更

 

今回は、ナビゲーションのアクティブなドットのデフォルト色が青なため、白にするべくCSSで上書きしました。アクティブでないドットは薄い灰色な感じです。アクティブでないドットは

.swiper-pagination-bullet　で同じように設定されています。

 

簡単に実装できて、便利ですね！新しいバージョンで実装するには、CDNの読み込み部分のバージョンを変更してください。（2017.01時点の最新です）

新サービスMtoM・ムーブアップ（サイト引越し）サービス開始 〜おかげさまで10周年を迎えます！〜

All Home Page株式会社は、おかげさまで当月から１０周年を迎えます。

 

今まで多くのお客様、関連会社様、皆さまに支えられ、社会のお役に立つクリエイティブを製作してきました。

お客様の広告宣伝、WEBでの成功をサポートし、お客様の笑顔を喜びとしてきました。

今後もますます、社会にとって良いもの・美しいもの、お客様のビジネスの発展に寄与するクリエイティブを世の中に送り出していきたいと思います。

 

祝１０周年・新サービス開始！MtoM：Move up to MovableType.net
ムーブアップ（サイト引越し）サービス

 

スマートフォン対応、高セキュリティ、高機能なウェブサイトが低価格で実現。自由にデザインできる優れたWEBアプリケーション、MovableType.netへあなたもお引越ししませんか？

 

MtoM Move up to MovableType.net 専用サイトへ

 

曇りガラス風のページタイトルを作るCSSーテンプレートで使える＆パララックス＆レスポンシブ対応

See the Pen Frosted Glass Title for some templates by Manami F (@Manamin) on CodePen.

Movabletype.netの開発において、ウェブページのタイトルを曇りガラス調にしようという話になりました。

 

この案件では、Movabletype.netの標準テーマである「One Page」をベースにカスタマイズしています。One Pageでは、ウェブページはトップページにパララックスで表示されます。
そのスクリプトを部分引用させてもらいウェブページのテンプレートを作りました。ちなみにBootstrapも使われているのでカスタマイズが楽です。

 

ちょっと話が長くなりましたが、テンプレート等で複数ページを出力する際、クライアントが投稿した画像を背景画像にセットし、ページタイトルを曇りガラス調にするというお題です。

 

 

HTMLの説明

 

・HTMLでBoxを作り、インラインで背景画像を設定する。その中にタイトルのH2などを作りタイトルを設置する。

通常の背景画像URLを使用した場合のHTML

 

Movabletype.netのカスタムフィールドタグを使った場合の背景指定（識別子はpageimage）
・最初に画像のURLを変数に代入して、インラインの指定で使っています。
・画像が設定されていない場合にはデフォルトの画像を設定しています。

 

 

CSSの説明

 

曇りガラス効果はCSSのblurを使います。blurは背景画像に設定すると、その中の要素、テキスト等もすべてがぼやけてしまいます。

 

そこで、背景画像となるボックスにまずは背景画像を設定し、そのボックスに擬似クラス::beforeで中身の無いボックスを作り、元のボックスと同じ大きさに引き伸ばしたものにblur効果をつけた背景画像を設定します。同じ画像が２枚重なっているイメージです。上の画像にblurがかかっているイメージです。

 

そのままですと、上のボケた画像が見えるだけになってしまいますので、擬似クラスで作るボックスは、widthやheightを設定し、paddingで中央に配置する箱とします。
その際、高さはピクセルで固定に設定し、横幅は％で可変に設定するとレスポンシブに対応できます。

 

擬似クラスで背景画像を設定する際に、２つの大きなポイントがあります。

 

可変画像はHTML側だけで指定してあり、CSSで背景指定する事は出来ません。そこで、擬似クラスの背景画像設定で background: inherit; と指定します。

 

擬似クラスの背景指定で、background-clip: content-box;を設定する事で、paddingの部分には背景画像が表示されなくなり、最初に設定したBlurのかかっていないクリアな画像が見えるという具合です。

 

この擬似クラスで作ったblurがかかっている部分はpaddingで作っているので、borderなどはblurとの境に引く事が出来ません。

 

そこで、タイトルのボックスは、この擬似クラスのblurの真上に来るようにボックスを設定し、borderやbox-shadowなどで装飾するとより曇りガラス風になります。
（CodePenでの設定数値は異なっていますが、通常は同じ数値にすると真上に来ます）

 

タイトルのボックスに透明度のある画像などを加えるとオシャレな感じですね。

 

 

※画面幅を大きく想定しているので、PC設定では高さを500pxにしてあります。スマホ時のメディアクエリーでは、高さを250pxにしています。
※入れ物のdivは.pageimage と.img-blurのクラスが付いており、タイトルボックスはh2.img-blur-innerです。
※２枚目のblurがかかった背景画像は、.img-blur:beforeで設定しています。
※高さは固定ですので、heightやpaddingの数値でボックスの大きさや位置を調整してください。

 

ホームページのセキュリティって何ですか？

低価格でずっと安心して使い続けられるホームページは？

弊社がMovable Type.netやMovable Typeクラウド版をお客様にお薦めする理由

 

昨日新規の中小企業のお客様からホームページ新規作成のお問い合わせがありました。その際、「ホームページのセキュリティって何ですか？」と聞かれました。

 

「会社のパソコンは会社に居る時だけ電源を入れると思いますが、ウィルスソフトを入れて守っていらっしゃいますよね？
ホームページは誰でもいつでも見られるように２４時間電源が入ったままです。そして２４時間ウィルスの脅威にさらされています。昨今は、ホームページがウィルスにやられると被害者になるのではなく、加害者になってしまうという被害がたくさん増えているんです。

 

ホームページは完成後に情報更新ができないと死んでいるのと同然で検索にも不利ですし、事業の役にも立ちません。ホームページは情報更新が命なんです。
その情報更新がご自分達で簡単にできるようにする為、ホームページにベースとなるシステムを入れます。それがCMSというものです。このCMSはページを書き換えるシステムであるので、ウィルスにも大変狙われやすくなります。

 

このCMSは無料のもの、有料のものなどいくつかありますが、このCMSを、日々生み出されるウィルス被害に対してきちんと対応したり、バージョンを最新に保つ事がまず一番大切になります。

 

そのCMSの中で長い運用実績があり、信頼性の高いMovable Type（ムーバブルタイプ）というシステムがあります。ここの開発元で優れたサービスが提供されています。開発元自体が、サーバー（ホームページを置いておくパソコン）を監視し、セキュリティ対策を施してくれるという他にはあまり無いサービスがあります。

 

それがMovableType.netやMovableTypeクラウド版です。Movable Typeは世界で最初に広まったブログシステムで日本の上場企業がたくさん採用している信頼と実績のあるシステムです。そして安価に利用出来る高機能なCMSです。

 

ホームページにあまりご予算がかけられない中小企業様や個人事業主様でも、低価格で高機能、そして最も強いセキュリティを保ちつつ、ずっと安心して使い続けられる優れたサービスです。

 

弊社ではその安全なベースの上に、お客様のご事業に特化した、本当に役立つホームページをご要望通りにお作りしています。
」とご説明申し上げました。

 

弊社はWEB制作業者です。他のCMSの取り扱いもあります。
多くの制作業者が取り扱うWordPressのサイトも制作する事があります。WordPress自体は無料で自動アップデートもあり、大変優れたCMSだと思います。

 

ですが、これ１つで完結せず、複数のプラグイン（小さなプログラム）を入れないと通常の仕様ができません。そのプラグインの多くは海外製でセキュリティ含め実態がよくわかりません。そして本体のWordPressをアップデートしたら、ウェブサイトの機能が止まる事も多々あります。弊社としては、確認ができて本当に安心できるものじゃないと、お客様のサイトに組み込みたくないので、そんな所がどうしても嫌なんです。

 

また本体のアップデートが止められたままになるサイトが持ち込まれる事もあります。本体は無料でもそこに付随するプラグインが有料だったりします。よくわからない海外製のものにお金を払うなら、本体にお金をかけようよ！と思うのです。本体こそ、きちんと保証された安心なものであって欲しいのです。

 

無料のCMSが使われてアップデートが止められたままになっている状況が持ち込まれて思う事があります。
アップデートの影響を確かめながらきちんと対処する事を個々で行っていくのは、大変な作業でその分、当然費用もかかります。

 

そしてそれは開発者が責任を持って修正バージョンなどを配布してくれた場合に限る対処療法です。だって保守管理をする制作会社が本体を作っているわけでは無いんですから。お客様に見えない作業を誠実にやっていたとしても、開発者から修正版が出ない限り手の打ちようが無いわけです。

 

日々そのような事を実感する弊社では、開発元が責任を持って商品開発しているシックスアパート社のムーバブルタイプ、特にそのCMSの最高のパフォーマンスを出せるようにサーバー環境を整え、常に最新バージョンライセンスが付随した高機能CMSのMovableTypeクラウド版や低価格・高機能なMovable Type.netをお客様にお薦めしているのです。

 

お客様にとっての最高の選択は何か？という事をお客様目線で考えると、弊社はやっぱりMovable Typeの関連サービスをお薦めする事になります。セキュアな安心感があってこそ、本当に事業に役に立つホームページをフル回転で活用できるのです。

Movable Type.netのサイト
https://movabletype.net/

Movable クラウド版
http://www.sixapart.jp/movabletype/cloud/

どんなWEB広告よりも費用対効果に優れた広告とは？

たくさんの種類の集客広告を目にしますね！フェイスブックやツイッターなどのSNS系のWEB広告を目にする機会も多いかと思います。あれがいい、これがいい、など集客セミナーだけでも山ほどあります。

 

でも落ち着いてよく考えてみてください…
「探している人に、探している物を見せる広告」
これが最も成果につながるとわかると思います。

 

３月２４日14:00~市ヶ谷ハンズオンセミナーのお知らせ

WPのサイドバーを表示するウィジットで特定のカテゴリーを非表示にする

ほとんどがMTのカスタマイズをしていますが、WPサイトのページ設計改善を頼まれました。１番は、WPのバージョンアップが目的で、新しい環境に移行するとともにぐちゃぐちゃなページ導線等を改善し、どこに何のページがあるのか、またどこを見れば情報にたどり着けるのかがわかるように可視化しました。

 

前置きが長くなりました。

 

WPのサイドバーをカスタマイズする必要がありました。

 

１.カテゴリーの順番を変える必要がありました。→Category Order and Taxonomy Terms Orderのプラグインを利用させていただき、解決。

 

２.非表示にしたいカテゴリーがありました。

 

・プラグインで解決できないか？
Advanced Category Excluder を入れてみました。しかし、結論から言うと、うまく作動しませんでした。

 

・functions.phpファイルにコード追加かぁ。。。

いろいろと検索させていただき、TOMOさんのブログで以下のコードを参考にさせていただきました。

 

 

なんですが、複数指定した場合、（x,y,zのカテゴリーIDにあたる部分）最初のカテゴリーにしか適用されませんでした。配列へセットする部分の

$exclude = “x, y, z”;

 

の記述を

 

$exclude = array(x, y, z);

 

と変更する事で無事複数のカテゴリーに対応できました。

 

このカテゴリーのサイドバー表示ですが、ある特定カテゴリーだけ背景色を変えて欲しいとの要望もありました。これはClass で指定するようです。w

 

MTDDC Meetup TOKYO 2015 今年も参加致しました！

すっかりご報告が遅れてしまいましたが、MT東京（Movable Type東京ユーザー会）が主催するMTDDC Meetup TOKYO 2015に今年も参加してきました。

 

2015年11月28日（土） 日本マイクロソフト31F

 

http://mtddc2015.mt-tokyo.net/news/mtddc-meetup-tokyo-2015-participant-report.html

 

本来、MT東京に所属する私はスタッフとして手伝うべきでしたが、今年は参加者としてしっかりセミナーを拝聴させていただきました。一部をご紹介します。

 

 

基調講演：シックス・アパート株式会社　執行役員平田氏

今後のCMS業界、インターネット業界を見据えた基調講演は、大変共感する部分が多くあり、Movable Typeがセキュリティに対して当初より堅牢な構造であった事、今後は制作から運用にさらに重点が移るであろう事などが印象的でした。

 

 

弁護士が教えるWEB制作の受注トラブル回避法：弁護士法人ファースト法律事務所代表弁護士　藤井総氏

とかく口約束が多くなりがちなWEB制作案件において、契約書の大切さがよくわかりました。弊社では制作の際は必ず契約書を取り交わしますが、その内容で担保すべき項目がよくわかり大変勉強になりました。

 

 

Styleguide Driven Development×CMS:株式会社まぼろし 久保知巳氏

Styleguideの設定と実装に大変参考になりました。制作案件において決めきれていない部分が多々ありましたので、大いに参考にさせていただきたいと感じました。

 

 

テンプレートタグのまとめ：小粋空間 荒木勇次郎氏

基本のテンプレートタグから始り、高度なタグとその実装方法などをご紹介いただきました。自分のタグ認識が曖昧な部分があったので、頭の中の情報が整理できました。知らなかった使い方等もあり、有難い内容でした。

 

 

２つの「Layout」プラグインでMovable Typeをパワーアップ：The Blog of H.Fujimoto 藤本壱氏

弊社案件でもよくお世話になっている藤本氏のセミナー。藤本氏のこのプラグイン、弊社も導入させていただき、大変便利に使えクライアントさんに喜んでもらっています。新しい拡張プラグインでどのような使い方ができるかをお聞きしました。

 

 

やはりお前らのMTMLは間違っている：アルファサード株式会社代表取締役　野田純生氏

軽快な関西弁とともに、実際のMovable Typeのコード記述における矛盾点や間違いをずばっと切ってくれました。野田氏と言えば、PowerCMSというMovableTypeを大きく拡張する有名なプラグインを開発する会社代表ですが、その超優秀なプログラミング思考をひしひしと感じる事ができました。話しもいちいち面白かったです。笑

 

 

Lightninng Talkで弊社もお話をさせていただきました。

題は「小さな制作会社の生きる道」です。笑

制作だけじゃない、制作会社は運用にさらに重点を置く事で多くのメリットがある事をお話しさせていただきました。

巷には、こうすれば集客が増える、こうやって利益を出す…などの講座やセミナーが溢れかえっています。でもどれも部分的なものが多く、分析だったり、一般的な話しだったり、コードに関わるハウツーだったり、画一的なものばかりです。

激しいインターネット広告界において、勝ち抜いて利益を出すには、業種も個性も違う、それぞれのクライアントに合わせた独自の勝ちパターンを見つけていく事が必要だと感じます。誰にも通じるやり方は誰でもやっているやり方で効果は頭打ちです。そのクライアントだからこそできる、他に真似のできない独自の工夫、それを一緒に考えられるのは、実際にサイトを制作し、改善できる制作会社だけなのです。

制作から分析・改善運用までを一環して制作会社が行なえれば、サイトの作りを隅々まで知っているわけですから、総合的に物事を判断できます。その顧客の事業内容に合わせて、力量に合わせて、費用対効果が最も高い改善や運用をご提案できるのです。

弊社では、Google検索広告上級資格をとり、GoogleAnalyticsユニバーサルを研究したサイト分析、サイト改善のノウハウを積んでいます。LTでは、そんなお話をさせていただきました。

そして、良い営業成績を生み出すウェブサイトを育てていく為には安定したセキュリティがベースである必要があり、拡張性の高い、優れたベースCMSを導入している必要があります。そこで弊社では、安価に使えセキュリティがしっかりしている、Movable Typeをウェブ制作のベースとしてお薦めしております。

【WEBデザインと印刷デザインは違う】WEBデザインで優先するべきは？

弊社フルスクラッチ制作のネットショップで、サイトオーナーの希望により、デザイン変更をしています。

 

デザインはオーナーさんの知り合いの印刷デザインを手がけるデザイナーさんです。
ちらし等を拝見させていただきましたが、柔らかい、センスのいいデザイナーさんです。

 

しかし、指示通りにデザイン変更をしていると、すぐにデザインの着眼点の違いに気づく事になりました。

WEBデザインでは、印刷デザインと大きく違い優先すべき要素が入ってきます。

それはデザインが見る人にどうゆう影響を与えるのかという事です。

 

印刷デザインの場合、目に入る情報は全紙です。全体として良いイメージ、インパクト、正確な情報を認識させて、望むべき行動へと導きます。

全体のバランスを考えて要素を配置、全体としてちらしの役割を達成させます。

 

WEBの場合は、もっとたくさんの条件に配慮したデザインでなければなりません。

 

＜正確な情報を伝えるには＞

・可変の画面幅で情報を提供している

WEBの場合は、正確な情報を伝える為に決してユーザーを迷わせてはいけません。
特に画面の幅はスマートフォンのような横幅が狭く縦が長い画面になりますし、パソコンの場合は横幅が広く見えている縦幅は短い可能性があるわけです。

様々なサイズで情報を提供しているという事をデザインの面からも意識しなくてはいけません。

・ネットショップの商品リスト

例えば、商品をリストにして並べている場合、スマートフォンならば横に２商品、縦は上下に長く続きます。PCで見た際は、横に４〜６商品、縦に続くという感じです。

（※弊社では、画面幅に合わせてデザインを変えるレスポンシブウェブデザインを採用しています。）

写真に付随する商品名や値段、情報等は、どの商品のものか、迷わずに一目でわかる事は最低条件となります。

・商品情報を区別させるデザイン

例えば細い罫で囲う、背景色と区別できる地色をつける…など、デザインで１つの商品情報をまとめて伝達させるという役割を持つ事になります。

ネットショップでは、ちょっと迷ったとか、わかりにくかったなど、たとえ小さなストレスでも大きな損失に繋がります。ユーザーのマイナス体験となり、再訪してもらえなくなるからです。

・様々なユーザーを決して迷わせないデザインが大切

これは商品リストの例ですが、一時が万事で、デザインは、ユーザーが迷わずに情報を取得できるという役割を手伝う必要があります。

若い人からお年寄り、視力の弱い方、インターネットに慣れていない方、様々なユーザーの方を想定し、可能な限り誰もが迷わず、一目でわかりやすい情報を取得させる事を第一としたデザインであるべきと考えます。

 

＜アクションが伴う＞

・ハイパーリンクの認識

WEBの場合、印刷物と異なる点の大きな特徴に画面上で何らかのアクションを起こさせる必要があるという事です。

よく誘導するアクションはクリックです。そのテキストがクリックできて、さらなる情報ページへと続くハイパーリンクである事を一目でわからせないといけないのです。

デフォルトで定番のリンク色は青で下線です。また多くの人はその事に慣れています。ですから大手ポータルサイトでは青色をリンク色として採用しています。
デザインの雰囲気を統一させる為にリンク色や装飾を変更する際は、そのテキストがリンクがかかっている、もしくは当然リンクであるとわからせる必要があります。

 

新着情報などの欄で使うテキストならば、コーナー内の記事タイトルなので比較的容易に認識できるでしょうが、文章内のリンクテキストなど、サイト内でリンク色を統一しわからせてくる体験を踏ませる…など工夫が必要となるでしょう。

 

そして、注意すべきはそのサイズです。スマートフォンでは、行間に配慮しないと指で正確にタップする事ができません。押しにくいリンクは大きなストレスとなります。

 

・ボタンなど

印刷物に無いものとして、ボタンなどがあります。購買を起こさせるボタン、読んで欲しい記事に導くボタンなどは、ユーザー心理として押しやすく、目立つ、横長なボタンが有効です。

印刷デザインからすると、なんか派手だなと感じるかもしれませんが、やはり押してみたくなる…という心理はデザインによってあるのです。多くのランディングページでは、頻繁に横長で大きな赤いボタンが出てきますよね。

ボタンを多く設置して実際の行動をせまる機会が必要という事です。

店員さんが「お似合いですよ〜！」「お買い得なんですよ〜」と何度も商品をお薦めして決断を促すような意味合いです。

PCサイトならばどこかに購買できるボタンを、スマホ画面で閲覧の際は、スクロールした際に購買に結びつくタイミングでのボタン設置やしかけが必要という事です。

 

他にも…

今回は印刷デザイナーさんとやりとりする中で、特に２つの大きな違いを感じましたが、他にもCMYKとRGBによる色の違いから来るユーザーへ与える心理的な影響の違いなどもあるように思います。

弊社は印刷物のデザインもやりますが、WEBデザインが主流なので上記のような要素等はごく自然に考えてきた事でしたが、今回は一緒に作業してみて、自分自身もその違いを再認識する事となりました。

 

また気づいた事などがあれば、書いていきたいと思います。

【Slick 設定ガイド】商品などを順に見せるレスポンシブ対応カルーセル、スライダー 2015.7

自社が運営するサイト構築にレスポンシブウェブデザイン対応のカルーセル、Slickを設置してみました。Slickは、副題が the last carousel you’ll ever need(ずっと欲しかった究極のカルーセル）とあるので、他にもいろいろ使ってきましたが、今後はこれ1本でいけるかな？

 

 

ネットショップなど、商品画像を１つ１つスライドさせてユーザーへアピールしたいですよね？

 

そんな時、簡単に設置できて、いろいな効果も簡単に実装できるslickのカルーセルは大変使い勝手がよく、広告宣伝効果も高いと思います。
またスマホでの閲覧が爆発的に増える中、レスポンシブデザインに対応している事は今やマストと言えるでしょう。

 

 

ネットショップでよく使うカルーセルの見せ方として、複数画像を１枚１枚送り、なおかつ、レスポンシブ対応で画面幅に合わせて表示枚数を変える設定をご紹介します。

 

 

jQueryを利用する際に気をつけたいのは、そのスクリプトが日々進化している事です。検索で使い方などを調べても、その記事を作成した際のガイドなので、その後に参照するjQueryなどが変わっていたり、紹介されているスクリプトがダウンロードされているものと適合しないで動かない事などがあります。

 

ですから、本家のガイドは本来きちんと参照したほうがいいと思います。
今回紹介しているバージョンは2015年7月17日、1.5.6です。
ただダウンロードした時点でのjQueryの指定バージョンさえ合っていれば大丈夫かと思います。jQueryの読み込みはダウンロード時に本家に紹介されているCDNで読み込めば簡単、確実です。

 

 

英語が苦手、またこのような設置は初めて という方の参考になるように、なるべくわかりやすくご紹介します。

 

 

Slick の本家ページ（英語だけどここが重要です）

（↑ここの４分の３くらいの場所にダウンロードのボタンもあります）

SlickをダウンロードしてくるためのGitHubページ

（PC画面だと右側カラムの中に「Download Zip」というボタンから最新スクリプトがダウンロードできます）

 

 

大まかな手順

1.自分のPCにSlickのファイルをダウンロードする。（上記参照）

2.必要なファイルをFTP等でウェブサイトへアップロードする。

3.ウェブサイトにコードを書き込む。

 

 

＜1.自分のPCにSlickのファイルをダウンロードする。＞

・ダウンロードして解凍すると複数のファイルが含まれています。

cssやjs本体が含まれるSlickフォルダの他、READMEファイル(使い方説明やライセンス情報）、Jsonファイルなどです。ライセンスはMITです。

 

 

＜2.必要なファイルをFTP等でウェブサイトへアップロードする。＞

・ウェブサイトにダウンロードしたファイルのうち、以下のものをアップロードします。その際、Slickというフォルダを作成して一緒にいれておけばわかりやすいでしょう。どこへアップロードしたかを覚えておきます。
トップページに設置するならば、トップページがある階層にフォルダを作成して入れるといいでしょう。

 

 

アップロードするファイル

 

slick.css
slick-theme.css（デフォルトのスタイルを利用する）
slickフォルダの中にある、fontsフォルダ（デフォルト記号などが利用可)
ajax-loader.gif (ローディング中の画像)

slick.min.js (js本体)

 

slickの機能を変更するには、slick.jsが必要となります。今回はslick.min.jsで大丈夫です。

正常に動かす為にはjQueryのライブラリが必要ですが、それはCDNを利用して読み込みますのでアップするのはこれだけです。これらのファイルをどこへアップしたか、メモしておきましょう。
（※CDN…自分のウェブサイトへファイルをアップせず、配布先から直接ファイルを読み込んでくるコンテンツデリバリーシステムの事）

 

スタイルシートは.cssのファイルなのでお間違いないように。Sassに対応しているので、同名で.scssファイルが含まれています。

 

今回ご紹介する例では、トップページの階層にSlickというフォルダを作成し、そこに入れる事とします。Slickを設置するのは、トップページという事にします。

 

 

＜3.ウェブサイトにコードを書き込む。＞

 

ヘッダーに設置するコード

 

HTMLヘッダーの中（<head>〜</head>の間）に以下のコードを入れます。コードはヘッダーの一番最後の方に入れるといいかと思います。

今回は、slickというフォルダに入れて同階層に置いているので、スタイルシートのパスは以下のようになります。

 

 

 

スライドさせる画像部分のコード

 

次に表示する画像を指定する部分ですが、以下のようにdiv要素で囲みます。全体をdiv要素で囲み任意のクラス名をつけます。その中の一つ一つの画像もdivで囲みます。つけたクラス名は後ほど使うのでメモしておきましょう。この場合は、.top-slider としました。

画像をクリックすると、その関連ページに飛ばしたいので、リンクをしてあります。リンクが無くても問題ありません。

 

今回はリンクを貼った画像を表示ですが、画像と共にテキストを表示したり、動画などのコンテンツも入れられるようです。画像の枚数に制限は無いようです。
クラスをつけた要素はdivですが、他のものに変更する事もできます。その場合は、オプションで指定する必要があります。

 

 

js部分のコード

 

jsを読み込み、動かす関数部分を入れます。
挿入位置は最後の</body>直前にいれます。
以下のコードを書く順も大切です。jQueryを読み込み、slickのjsを読み込み、slickを動かす関数を書きましょう。

オプションを何も指定しない場合は、以下のようになります。まずはこれを設置して、今までの過程に間違いが無いか、動くかどうかを確認するといいかと思います。

動かない場合は、jsのパスに間違いがないか、スペルなど異なっていないかなどをチェックしてみましょう。

 

 

上の２行は、jqueryを配布先から直接読み込んでいるCDN部分になります。
最初に申し上げましたが、ここでの参照はファイルをダウンロードした時点で本家に紹介されているものを使うのがいいかと思います。

こちらの設置説明ページにある
Add slick.js before your closing <body> tag, after jQuery
の部分のコードを拾ってきましょう。（上記では上の２行になります）

 

３行目は、slick.min.js を置いたパスを正確に指定します。今回はslickフォルダに入れ、同じ階層に置いているのでこうなります。

関数の中で.top-slider とある部分は、ご自分でつけたdivのクラス名になります。

 

オプションの設置

 

オプションを指定するには、上記コードの空白行に入れていきます。

オプション名1 : 値,
オプション名 2: 値,
オプション名 3: 値

という形で入れていきます。最後の半角カンマを忘れずに。一番最後は半角カンマは要りません。ここいらへん、ちょっと間違っても動きませんのでご注意を。

 

 

レスポンシブ対応のウェブサイトに設置し、一般的なオプションを指定した場合は、以下のようなコードになります。

 

 

オプションの説明です。

 

autoplay: true, 自動再生にしています。（デフォルトはfalse動かないです）

autoplaySpeed: 2000,動くスピート（デフォルトは3000ミリ秒つまり3秒）

dots: true, カルーセル下に表示されるドット。どの画像が表示されているかわかる。（デフォルトfalseで非表示）

slidesToShow: 5, 一度に表示する画像の数（デフォルトは１）

slidesToScroll: 1,動いて変わる画像の数（デフォルトは１）

 

 

上記の設定ですと、１画面に５枚表示になり、1枚毎にずれて表示されていきます。

この指定のままですと、パソコン画面でも５枚表示、スマホ画面でも５枚表示になります。画面サイズに合わせて全体のサイズも変わってくれます。なかなか秀逸。
ですが、さすがにスマホで５枚は見にくい。そこで、レスポンシブのオプションを設定します。

 

 

レスポンシブウェブデザインに関する上記設定の説明です。

 

 

上の場合、画面サイズが

 

最小〜４８０pxまでの場合
1枚表示、1枚づつ送り

 

481px〜600pxまでの場合
2枚表示、1枚づつ送り

 

601px〜1024pxまでの場合
3枚表示、1枚づつ送り

 

1025px以上の場合
5枚表示、1枚づつ送り

 

 

全部1枚づつ送りになってますが、表示枚数毎に変えてもいいですね。
1025px以上が5枚になるのは、レスポンシブの設定の前にslideToShowオプションで5のデフォルト指定をしているからです。

 

その他、オプションは恐れ入りますが本家サイトを参照ください。
また時間がある時に追記したいと思います。

 

 

最後に…

 

実際にネットショップで使うためには、CSSでカラーやサイズ等、さらに調整が必要でしょう。
スライド下のドットなどはデフォルトですと、黒のドットなので、背景が黒の場合など見えません。（自分の所がそうなのでこれから変えていかねばっ　笑）

 

その場合、CSSで該当箇所を変更していく事になります。時間がとれれば後日、CSS等のカスタマイズもご紹介したいと思います。。

 

弊社の新事業が東京都の「経営革新計画」に承認されました！

 

かねてより準備して参りました弊社新事業が、東京都の経営革新計画に承認されました。

西東京商工会様、中小企業診断士様のご尽力により承認をいただく事ができました。

今後はその計画を成功させるべく更なる努力をして参りたいと思います。

グーグル初級・上級試験取得！検索に強いホームページを制作します。

ホームページはユーザーに見てもらえて初めて意味を持ちます。

ユーザーに見てもらえて、そのサイトの設置目的を果たす事がホームページの使命です。

 

サイトの設置目的は、ネットショップの場合は購入してもらえる事ですし、認知度を上げるためのホームページならばサイト内をくまなく見て回ってもらう事になるかと思います。

 

まず、その初めの一歩は、検索された際に見てもらえる位置に居る事です。

 

検索で見てもらえる位置とは検索されて1ページ目もしくは２ページ目に入っている事です。
もちろん、その中でも順位が高いほうが見てもらえるわけです。

 

そして、次にはずらっと並ぶ検索結果の中で、実際にクリックしてサイトへ訪問してもらえるかどうかという事になります。

この点を、多くのSEO会社の営業は触れませんが、実は最も重要なポイントの一つです。

SEO会社にしてみれば、上位にさえサイトが表示されれば、それでお金をもらえるわけですから、クリックされるかどうかはあまり関係ないのでしょうね。笑

 

クリックされてからは、ホームページがどう製作されているかが、大きなポイントとなってきます。

 

表示の速さはもちろんの事、ファーストビューでわかりやすく、インパクトのある魅力的な惹きつけができないと、ユーザーはあっという間に離脱します。

 

ユーザーの心を誘導するビジュアル、文章、言葉、構造、レイアウト、すべての要素がトータルに働いて、実際のコンバージョン（求められる目的）にまで結びつけられるかどうかが勝負となります。

 

「検索での順位を上げましょう！」「見てもらえるホームページを作りましょう！」「有料広告を出して見てもらいましょう！」ホームページを所有しているオーナーへはひっきりなしに営業の電話がかかってきます。その多くは、その一連のほんの一部のサービスを提案して、かなり高額を請求してくるSEO会社や製作会社です。

 

たとえば検索（自然検索、オーガニック検索といいます）で上位に上がるように、サイト内を分析する事を進められます。高い料金で分析しても、サイトを実際に改善してくれる訳ではありません。

 

その指示書に沿って改善する為には、今度はオーナーは制作会社に高いお金を払って改善を依頼しなければなりません。

 

でも、その指示内容、効果的なものもあればそうでもないものもたくさんです。そもそも制作時にきちんとSEO対策をしておけば大丈夫なものがかなり多いです。

 

高い料金で分析し、さらに高い料金で改善し、それでも成果が出ないと、また別の提案をしてきます。有料広告です。

 

自然検索で上を取れないなら、有料で目に触れるようにしましょう！というわけです。
でもね、制作時からきちんとSEO対策をしておけば、最初から検索に強いサイトになるんです。

 

もちろん、オーナー様の更新努力も必要なんですが。

 

有料の広告は有効に使えば、大変効果を発揮できる広告手段でもあります。

 

主なものに、グーグルのリスティング広告であるアドワーズ、ヤフーのプロモーション広告などです。

 

ネットショップ様など、自然検索で上位を取るだけでなく、有料広告と組み合わせる事は、コンバージョンに大変効き目があります。
より多くの顧客となるべき人々の目に強制的に触れさせる事ができるからです。

 

ですが、この広告、運用はかなり専門的で難しいのです。

弊社では、制作会社にめずらしく、グーグルアドワーズの初級・上級試験に合格しています。

ホームページ制作会社ですが、広告代理店がこぞって持ちたがる資格であるグーグルパートナー資格のベースとなる資格です。

 

クライアント様から依頼され、予算をなるべく低く抑えて、最大の効果を出す広告を運用します。
弊社ではクライアント様からアカウント運用を委託され、アカウントの管理もしています。

 

有料広告で成果を出すためには、ユーザー心理を掴む広告文、ターゲットを分析した広告の打ち方、投資収益率を最大にする施策などが必要となってきます。

 

弊社では、これらの検索アルゴリズムをしっかり把握しています。そしてユーザー心理を分析する広告宣伝のプロです。

 

弊社では、これらの専門知識を活かし、ホームページを制作し始める時点から、デザインやレイアウト、要素の配置やページ割り、様々な観点において、自然検索での上位がとれるホームページを製作していきます。

 

また、自然検索で上位が取れるホームページは有料広告でも品質スコアが高く、有料広告を打つ際も費用を少なく抑える事ができます。

 

お客様の想いをしっかり達成できる、実際に実利に繋がる効果的、唯一無二のオリジナルホームページをお造りしています。

 

IE9やIE8にダウングレードするとEXEファイルがダウンロードできない不具合の対処法

弊社は今年度、自治体等の入札に参加する事を目的に昨年末Windows7のPCを購入し準備してきました。
事務用にWindows8は持っていたのですが、JAVAを使用する入札システムが一昔前のPC環境にしか対応しておらず、入札システム利用のためだけにひとつ前のOSを搭載したPCを買う事になりました。

2013年11月、PC売り場にはすでにWindows7はほとんど無く、若干機種のあったLenovoのPCを買いました。
その際、OSが、Windows7 32bit機を買えば、これほど苦労はしなかったかもしれませんが、購入したPCのOSはWindows7 64bit機でした。

 

購入したPC:Lenovo Thinkpad E430c (実はこのPC、W7の32/64両方動作OKだそうです）
搭載OS:Windows7 64bit
初期IE:IE10

 

入札システムを利用するには、Windows7 OSの場合は、32bit,64bitの両方に対応しています。(認証局もそのような場合が多いです）
しかし、ブラウザはIE8かIE9の32bit でなければならない。（認証局も同じです）

 

それを確認し、まず、IE10をIE9にしようと考えました。
プログラムの削除から消す、もしくはその画面左にあるWindows変更あたりから削除するとIE9が出てきました。
その時点で、「すべてのプログラム」を開けるとIE9 64bitとIE9という２つのアイコンがあり、64と書いていないほうが32bit版です。

 

しかし、このIE9 32bit版を利用して入札資格申請をしていこうとしましたら、ログインは問題なかったのですが、申請プログラムのファイル（EXEファイル）がダウンロードできなかったのです。ポップアップも何も開かない状態でした。
入札システムのサポートに連絡しても、「初めてのケース」といわれ、いろいろやっても原因がわからずでした。

 

このIE9に問題があると考え、これも削除しましたら、最終的にIE8が出てきました。
IE8 32bit版でシステムを利用しましたら、やはり同じ、プログラムファイル（EXEファイル）のダウンロードができず、今度はポップは開くものの、エラーメッセージがでて開けませんでした。

 

この間、IEの設定を変えたり、セキュリティソフトを削除してみたり、Lenovoのサポートに電話したり（親切な対応をしてくださいました）入札システムの技術担当さんにも電話したり（親切に対応いただきましたが、やはり例がないとの事で原因不明）、セキュリティソフトのソースネクストは電話番号がわかりにくいくせに、全く繋がらず断念、認証局のNTTネオメイトの女性の方に有力な情報をいただき試す事に。…実にここまでで、本来の事業ができずにまる２日の格闘となってしまいました…笑

 

やっと原因となるものと対処法がわかりました。

 

Windows7 64bit OSでは、IE9より上のバーション等は、サイトから32bit版をダウンロードできても、OSに、これは64bitじゃなーい！と拒否されてしまうため、インストールができません。

 

そこで、プレインストールのIE 32bit版をベースにします。（自分の場合、どんどん削除してIE8 32bit版が残っていたので、それを元にしました）
そして、IEのUPDATEを繰り返して行きました。IE8がIE9になり、次はIE11になりました。（2014.01.08時点）そして、このIE11は32bit版のままアップグレードできました。←ここ大事です。

 

有効な対処法として、一度しっかりアップグレードしてからIE11,10などを削除してIE9に戻すと、ファイルがダウンロードできないという不具合は発生しないそうです。（購入した時点でIE10を消したため、IE9やIE8の互換性がないファイルが残って不具合を起こすらしいです。）
本来、買った時点で一度しっかりアップグレードしてからIE9などにすれば良かったのでしょうね！

 

自分は、IE11の最新版のまま、入札システムのホームページを出し、その際、「互換性表示」にサイトを登録して進めましたら、IE11のまま、ログインもダウンロードも正常に行えました。（入札システムや認証局での動作環境ではIE11は不可となっていますが）

 

もしかすると、動作環境では、使用するJAVAとIEが32bitである事が最も大切なのかもしれませんね！IE9以降では、ブラウズする際に「互換性表示」を使えばいけちゃうわけですし。。。
まる２日間苦労しましたが、IEの32bitのベースから始められた事は正解でした。1E10以降になると、アイコンは１つになっちゃいますからわかりにくいです。Cドライブ、プログラムファイルの（X８６）などの表記があるほうが、32bit版です。PC機種は他のメーカーでも同様の症状があるので関係ないようです。そのPCが作られた際のWindows7 OSとIEの組み合わせによっての事象です。

 

2014年３月にXPのサポートが終了します。PCの買い替えでWindows7を買って入札システムに備える方もあるかもしれないと思い、参考までに書いておきます。

Caluculated Fields Form プラグインを使ってみました

ワードプレスを使用した制作サイトで、フォーム画面上で計算をし、提示する必要があったので、Caluculated Fiedls Formというプラグインをインストールして使用してみました。

 

 

無償版

画面の遷移なく、計算結果をすぐ表示できる(Ajax使用)ので便利です。投稿ページ、固定ページとも導入可能。ただし、無償版だとフォームとして送信できません。←これ致命的ですよね。笑

 

 

有償版

制作サイトは有償版のものでないと機能を実装できませんでしたので、有償版を使用しました。

値段は49.99ドル？約５０００円と少しでした。ペイパル決済をしました。

 

画面上でフォームに使用される任意の項目をいくつでも使用でき、それらの値(Value)に含まれる最初の数字を計算にも利用できます。

画像キャプチャ付きなのでちょっと安心感がプラス。

制作サイトは、フォーム内で商品を選択し、注文合計や送料を提示し、メール注文のものでしたので、必要な機能はすべて補完できました。

 

 

インストール設定等

通常のプラグインと同様にインストールします。

無償版の後に有償版をインストールする場合は、上書きか一度削除してから有償版をアップロードします。後者のほうがお薦めです。

有償版を購入した場合は、購入後に現れるダウンロードページを必ずブックマークなど、しておいたほうがいいです。今後のアップロード等もそこからダウンロードする可能性大です。

なぜかといえば、サポートサイトに会員ログインがありません。

 

設定は、設定用のページがあり、英語ですが簡単に設定できます。

メールフォームは複数設置可能です。

「設定」→「Caluculated Fields Form」→設定用ページ

 

「settings」からフォーム画面を作って行きます。

できたフォーム画面は、この画面↑の右にあるShortcode  [CP_CALUCULATED_FIELDS id=”1″]をページ内に貼ればOK。

 

 

こちらが個別フォームの設定画面

フォーム全体の要素をここの画面で追加します。

要素をクリックすると、右プレビューの最下部に現れ、ドラッグで好きな位置に配置します。

 

 

input要素のテキスト要素、ドロップダウン要素、ラジオボタン要素など、簡単に増やせます。

Email要素は、二つ設置し、二つ目のEmail個別要素設定で　Equal to で「Email」（１つ目に設置したEmail要素）を選択する事で、確認用Emailとして機能します。

 

電話番号は、アメリカ用なので桁数が違い使えず。Single Line Textで代用。

Dateは、〜日後など設定ができたので便利。Show Dropdown Year and Monthにチェックを入れるとカレンダー選択が出ます。（但し英語）

Default DateとMin Dateに+7dとすれば、1週間後の日にちしか選べなくなります。

設置した要素をクリックすると、要素の個別設定画面になります。

 

 

要素の個別設定画面（計算結果要素）

 

 

ドロップダウン要素など、通常は商品名がValueにも来ますので、どうやって計算式に含めるのか、サポートに聞きましたら、最初に出現する数字を計算に使えるとの事でしたので、Valueの最初に計算で使いたい数字を半角で設置し、その後に続けて全角の商品名を設置しました。

送信した際に受け取るValueに、商品金額が同じでも、どの商品が選択されたかわかります。

 

 

その他

有償版の場合は、エラーメッセージ等、任意の日本語に変更できる入力欄があります。

ペイパル決済の設定などもできるようですが、使用しませんでした。

 

画像キャプチャが付属しいているのですが、そこに表示されるテキストが英語で、設定画面がありません。

そこでサポートに問い合わせましたところ、.poファイルなどの言語ファイルを編集するか、画像キャプチャの出力コードを直接編集してくださいとの事でしたので、直接その部分を編集しました。

 

ファイル名：cp_calculatedfieldsf_public_int.inc.php

該当箇所４カ所くらい

 

たとえば

alert(‘<?php _e(‘Please enter the captcha verification code.’); ?>’);

を alert(‘セキュリティコードをご入力ください。’);　にしたり

 

<?php _e(‘Security Code (lowercase letters)’); ?>の所は

<?php echo ‘上のセキュリティコードを入力してください。’; ?>みたいに。

 

echoを使用したのは、ダイレクトに打ち込んだら、どこかが違ったのかうまくいかなかったので。笑

 

 

サポート

今回、日本語にインストラクションを変更したいなどの要望があったので、数日サポートとやりとりしました。即日中に返信をいただき、丁寧でした。

 

その際、購入後のダウンロードサイトから再ダウンロードを促される事がありましたので、ブックマークは必須だと思います。

 

 

 

西東京ビジネス交流会に参加してきました

昨日、８月２８日（水）田無駅すぐの場所にある中国家庭料理店墨花居にて、西東京ビジネス交流会の第１０回ランチ会が開催され、参加してきました。

 

こちらの会は、ホームページサポート株式会社の利根川様が主催となり、３年前から西東京のビジネス支援として立ち上げた集まりで、現在は１００名を超える集まりとなっています。

 

その中から、実利に繋がるビジネスの交流も生まれています。

私の会への参加は３回目ですが、だんだんと皆様とお話しする機会も増え、より詳しくお互いのビジネスについて理解する事ができたように思います。

 

今回は、同じIT関連という事で西東京パソコンレスキューの横山様やサテライトネットワークの穴田様とお話しが盛り上がり、大変有意義な時間を過ごす事ができました。

 

ビジネスも基盤となるのは、人と人の繋がりです。やはり何度となくお会いし、お互い理解を深め、双方の益を考え誠実なおつきあいをさせていただく事が大切な事と感じました。

 

 

東京都の夏は特別に暑い？！

東京都でホームページ制作をしているオールホームページ株式会社です。

 

地方から出てきた友人は、東京の夏は特別に暑いのではないか？と言います。

 

もちろん今年、最高気温の４１度を記録したのは高知県四万十市なのですが、東京都の中心、２３区内、都心エリアの気温は自然のたくさんある、開けた土地柄と違い、なんともこもった熱が地表にとどまって、弱火で熱しているプライパンの表面のような感じがしてしまいます。

 

弊社は東京都下の西東京市にありますが、ホームページ制作の打ち合わせなどで都心に赴く事もしばしばです。新宿、渋谷方面、港区，芝あたりによく伺います。

コンクリートで埋め固められ、緑の見えないビルの建ち並ぶ中を歩くと、地面から立ち上る猛烈な熱を感じます。

 

年々、この暑さも増しているような気がします。このまま熱が上昇すると、首都機能の中で計算もしなかった不具合や故障などが出てくるような気がしてしまいます。

 

コンクリートの膨張を計算して、高速道路などはわざと空間をとってあり、その間をつなぐ鉄板があります。その鉄板がコンクリートの膨張のゆがみの許容に耐えられずボルトが折れ、下に落下したとのニュースがありました。まさしく、そのような想定外の出来事です。

 

起きてからでないと、なかなか認識できない都市部の脆弱性があちらこちらに存在するのかもしれません。