AMS スタッフブログ – 秋田マーケットサービスの社員の成長記録とちょっとしたTips。

2018ゴールデンウィークのお知らせ

日頃より大変お世話になっております。

2018年ゴールデンウィーク休業のお知らせです。

４月２８日（土）〜５月６日（日）となります。

期間中急用のお客様は、代表小野の携帯までご連絡いただきますようお願いいたします。

11月2日は休業となります。

久しぶりにスタッフブログを更新いたします。勝手ながらですが、弊社は11月2日(月曜日)は休業となります。

更新がものすごく久しぶりのスタッフブログとなってしまい申し訳ありません。。。

勝手ながらですが、弊社は11月2日(月曜日)は休業となります。
これによりスタッフは明日から11月3日(火曜日)まで４連休を取らせていただきます。

皆様にはご迷惑をおかけしますが、何卒ご了承の程宜しくお願い申し上げます。

We’ll Enjoy Several Vacations

【JavaScript】for 関数で２ずつ増やしたいのだが

for 関数で2ずつ増やしたくても増やせない場合は、体裁が悪くても別の変数を包んで対処する必要があります。

仮に【2から始めて、10で終わる】として、普通に考えるとこんな感じのプログラムをすると思います。

for( var i = 2; i <= 10; i = i + 2 ){
    //
    // なにか処理
    //
}

for( var i = 2; i <= 10; i = i + 2 ){

// なにか処理

}

しかし、プログラムが上手くいってくれない…そこでどうなってるかを console.log させてみました。すると・・・

for( var i = 2; i <= 10; i = i + 2 ){
    console.log(i);
}

// 結果
// 2
// 2
// 2
// 2
// 2

for( var i = 2; i <= 10; i = i + 2 ){

console.log(i);

}

// 結果

// 2

！？！？・・・カウントアップしてくれません。

暫定的な対処策

for 内で２ずつ増やすのではなく、また別の変数を for で回して（それは１ずつ増やして）対処します。

for( var h = 1; h <= 5; h++ ){
    var i = h * 2;
    console.log(i);
}

// 結果
// 2
// 4
// 6
// 8
// 10

for( var h = 1; h <= 5; h++ ){

var i = h * 2;

console.log(i);

}

// 結果

// 2

// 4

// 6

// 8

// 10

〆

どうしても理想通り行ってくれなかったら、(体裁が悪くても)考え方・やり方を変える必要があったりします。

事務所移転しました

事務所を、御所野の小野社長宅から、秋田市中通のオフィスビル内に移転しました。

本日２０１５年６月１６日より、事務所を御所野の小野社長宅から、秋田市中通のオフィスビル内に移転しました。

連絡先およびアクセス

住所: 〒 010-0001 秋田県秋田市中通4-17-12 一建秋田ビル2階
電車から: 秋田駅下車、徒歩およそ５分
TEL: 018-893-5992
FAX: 018-893-5993
メールアドレス: （メールアドレスは以前から変わっていないです）

新しい事務所でも宜しくお願いいたします！

【htaccess】存在するディレクトリ・ファイル名をリダイレクト除外する方法

ポイントとなるのは、RewriteRule を「何もしない」の意味の「-」(ハイフン)にすること。これで存在するフォルダ・ファイルをリダイレクトの対象から外すことができます。

ざっくり言うと

RewriteEngine On
RewriteBase /

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^(.*)$ - [NC,L]

RewriteRule ^redirect-to/(.*)$ /original/$1 [L]

RewriteEngine On

RewriteBase /

RewriteCond %{REQUEST_FILENAME} -f [OR]

RewriteCond %{REQUEST_FILENAME} -d

RewriteRule ^(.*)$ - [NC,L]

RewriteRule ^redirect-to/(.*)$ /original/$1 [L]

説明

ポイントとなるのは、

RewriteRule ^(.*)$ -

1	RewriteRule ^(.*)$ -

RewriteRule の移動先にあたるところをハイフンだけにすることによって、何もしない、つまりリダイレクトの除外にすることができます。

また、RewriteCond で、Wordpress ではよく「存在するディレクトリ名・ファイル名であれば除外」という風にしていると思います。こんな風に。

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

1 2	RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d

しかし今回は、逆に存在していれば、という条件発動にしてリダイレクトの対象から外しています。

追記：Windows Server（IIS）の場合

Windows Server（IIS）の場合、受信規則を以下のように従って追加していきます。

URL の一致
- 要求された URL: パターンに一致する
- 使用: 正規表現
- パターン: ^(.*)$
条件
- 論理グループ化: いずれかと一致
- 条件 1: ファイルである
- 条件 2: ディレクトリである
- 条件間でキャプチャグループを追跡する: いいえ
サーバー変数: とくに設定しない
アクション
- アクションの種類: なし
- 後続の規則の処理を停止する: はい

祝日API作成中。

いま、色んなWebアプリを制作する上に必要になる祝日APIを作成中です。既に他のカレンダーAPIも出ていますが、弊社はこんなのも作ってるよと公開したくて作成中です。

いま、色んなWebアプリを制作する上に必要になる、祝日はいつかを取得するAPIを作成しています。

いや、Google Callendarの祝日API（公式ページがリンク切れ）や他に既に出ているカレンダーAPI（カレンダーサービス）を使えば良いじゃないと言われたらそれまでの話ですが・・・

今回自分で作って実際のプログラムで使うのはもちろん、AMSはこんなこともやってるよと公開・あわよくば配布したくて作成中です。

ライセンスは MIT License なので自由にご利用いただけます。

できること

データの取得範囲
一日単位で取得することや、月単位・年単位で取得する事が可能。
祝日
- 基本的な祝日はもちろんのこと、
- 昔の祝日名にも対応
  (例：4月29日の昭和の日は、かつて天皇誕生日・みどりの日だった、など。アクセスした年に対して対応した祝日名を返します)
- ハッピーマンデー制度（●月の第●月曜日の祝日）対応
- 春分の日・秋分の日対応
- 振替休日対応
- 国民の祝日対応（2つの祝日が飛び日になった場合）
- 皇室慶弔行事に伴う休日対応
- 2016年から対応する最新の祝日【山の日】対応
- 法律制定日にも対応
  (例：祝日制度が1948年7月20日に始まったのに対し、極論1900年にアクセスしても当時存在しない祝日が出てくる事はありません)
取得形式：XML、JSON対応
ソースコード公開：言語はPHP。
英語名対応
(例：敬老の日 → Respect for the Aged Day)

さらに対応予定のもの

JavaScript の言語でのソースコード公開
｢国民の休日｣(国民の祝日に関する法律)制定前の、紀元節・天長節などの祝日

APIができたら

GitHubや会社のホームページ（まだ準備中）に紹介ページ・ソースコードを掲載したいと思います。

ノートPCユーザーの身になってWebサイトを作らねば。

自分は普段27インチのディスプレイ＋外付けでWebサイトの開発をしているのですが、それだとノートパソコンで見たときにユーザビリティ(使い勝手)が悪いサイトになってしまいます。そこで、そのヒストリーと、ササッとブラウザの解像度を変更する方法を紹介します。

僕は普段、２７インチの液晶と、さらに２３インチの外付けディスプレイを繋げて作業しています。

その環境で作業すると、(勿論横もですが)縦がものすごく長い液晶に慣れてしまうので、ノートPCで見た場合を何も考えずに作ってしまうことがよくあります。

小野曰く、これをデザイナー病と言うらしいです。

実際にあったこと

着物ドレス絢爛の着せ替えシミュレーターで・・・

着せ替えの女性とデザインがほんの一部しか表示されません。デザインや素材を表示させようとすると・・・

スクロールが必要になってしまいます。
デザインや素材を選ぶ度にスクロールが必要になるという手間の掛かるページになってしまいました。

普段の大画面でしか見ていないとこんなことになってしまいます・・・

※今ではスクロールが極力不要になるように直しています。

さて、ブラウザ幅を固定しようか・・・

ノートパソコンを開いてチェックするのもいいのですが、デスクトップ上でブラウザ幅を固定できたらいいなーと思って。おまじないのこのコードをアドレスバーに入れます。

javascript:window.resizeTo(1280, 720);

1	javascript:window.resizeTo(1280, 720);

あ、あれ・・・いかないですか・・・
(むかしIEで開発してたときによく重宝していたコードです)
Safariの開発メニューから、スマートフィールド検索からのJavaScriptを許可します。

そして今度こそ！

固定できたー！
あとはこの大きさでウェブページをチェックしていくだけです。
あるいはさっきのおまじないをお気に入り登録してもいいかも知れませんね。

ほかにも…【resizeMyBrowser】

ブログ執筆時は上手く行きましたが、実は実作業段階ではうまくいきませんでした(^^;)

そこで、resizeMyBrowserというWebツールを使っていました。

プリセットでいろんな大きさのモードが登録されているほか、カスタムサイズを追加することもできます。

本来は、おなじまいで何も起こらず真っ白になり、真っ先にこれを紹介したかったのですがｗ

〆

いろんなユーザーが居ることを忘れないこと。自分のパソコン・端末の解像度基準だけで考えたりしないこと。です。

気がついたらjQueryが若干バージョンアップしていました。

気がついたらjQuery 1.11.3 (2.1.4) にマイナーアップされていました。主な修正内容は、Safari 7.1以降に起こる重大なバグと、iOS 8.2以降で起こるごく希なバグの修正みたいです。

Webサイトを作っている方はご存じだと思いますが、jQueryはJavaScriptプログラムを書くのをかなりラクにしてくれる＆全世界で有名なためプラグインが多数あり更にラクになるという、超万能なフレームワークです。

そのフレームワークがずっと更新されないなーと想い、お客様のサイトを作るときは jQuery 1.11.1 (2.1.1) を使っていました。
そして久しぶりにjQuery.comにアクセスしてみると・・・、
jQuery 1.11.3 (2.1.4)に更新されてました。

2段階に分けてバグの修正が行われた模様です

まず1段階目に jQuery 1.11.2 (2.1.3) のリリース。
ここでは Safari 7.1、8.0 で起こるクエリーセレクターのバグが発生していたみたいです。
（すみません、詳しいことは分からないです。英語の公式ドキュメントにはかなりの説明(経緯も含むのかな?)が含まれていますが・・・）。

そして2段階目に jQuery 1.11.3 (2.1.4) のリリース。
ここでは iOS 8.2、8.3 のモバイルブラウザーで、ごく希に変数・変数からの文字数取得に関するバグが発生していたみたいです。（詳しくはjQueryのGitHub Issuesから）

取り敢えずアップデート

これまでお客様のサイトで、jQueryのフレームワークが原因によるバグは発生してませんが、万が一に備えて最新版にアップデートしたほうがいいですよね。

プライオリティーは高くはないものの、順次アップデートしていきます。

2015年5月29日追記：遅くなりましたが、各種サイトのアップデートが終わりました。

追記

jQuery UIも2015年3月11日に 1.11.4になっていました。
jQuery Mobileは1.4.5のままか…けど安定してるってことはいいことです。

【Jetpackで共有】全文書かれてしまう・・・

【6月8日更新】このブログを含み、Wordpressで書いた記事はJetpackで共有しているのですが、なんとほぼほぼ全文共有されてしまうというケースに遭遇しています。。。

2015.06.08追記：スペースマーケットさんがこの問題の暫定的な対応方法を掲載していますのでそちらをご覧下さい。また、この記事もこれに合わせて修正しています。

【WordPress】JetpackでFacebookパブリサイズ共有を行った際に記事全文が共有されてしまう問題への暫定対応 | スペースマーケットブログ

WordPressで書いた記事をFacebookなどで共有するとき、てっとり早く共有出来るのが、Wordpress謹製の【Jetpack】。

しかし、そのJetpackでほぼほぼ全文共有されてしまうというケースに今頭を悩めています。。。

本来はこうなるはず

※イメージ画像です。

しかしこうなってしまいます

読む気ならないですよね。。。これだと見てくれる人がいない。。。

昨日今日起きた事ではないらしい

既に頭を抱えている先人の方々がいらっしゃいます。

【WP】Jetpackのパブリサイズ共有でFacebookウォールに全文投稿されてしまう
http://bey.jp/?p=3396

Webクリエイター日向凛さん:
げげげ jetpackのパブリサイズ共有でSNS連携したら、Facebook Googleプラスともに記事全文が投稿されてる。おまけにGoogleプラスの投稿は「限定公開」になってるし…残念。
https://twitter.com/rin_aqua/status/540692443872493568

なるブログとならないブログの違い、だとしたらなるブログが何が原因なのか、何がトリガーになっているのか。…解明できていない状態です。

・・・そういえば、この記事を投稿してみるとどうなるのでしょうか。

A.やはりなってしまう。

やはり本文がだらーっと出てしまいます。。。
(そのまま放置だとかっこわるいので、今では修正済みです)

この問題を解決させるためには？

a. Jetpackを使うのをやめる。

Jetpackで自動投稿するのをやめて、１記事１記事、手動で投稿していく。

b. WordPressを騙して使う。

時系列で説明するとこんな方法です。

予め投稿したい本文(画像・装飾含)をテキストモードで全文、メモ帳などにコピー
万が一変に共有されてもいいように、最低限の文章・画像だけでひとまず投稿(公開)
その後すぐに、予めコピーしておいた本文をテキストモードでペーストし、差し替え

c. 投稿直前、ブログ投稿画面の右サイドバー「パブリサイズ共有」内の「詳細を編集」をクリック

その後出てくるテキスト欄に記事タイトルが書かれている事を確認してから公開してください。
予約投稿の場合も同様です。

c. の方法によって一旦暫定的に解決できますが・・・何が原因なのかはわかりませんが、改善を願うばかりです。

[poll id=”1″]

[poll id=”2″]

[poll id=”3″]

[poll id=”4″]

[poll id=”5″]

【CSS3】チェックボックス・ラジオボタンに色を付けてみる。

CSS3のセレクタを利用することによって、デフォルトのチェックボックス・ラジオボタンではなく、色付きのカスタマイズデザインに変更することができます。

通常、チェックボックス・ラジオボタンといえば、

こんな感じだったり、

こんな感じだったりすると思います。

もちろんこのようなものでも悪くないのですが・・・

こんな感じのものはどうですか

checkbox
radio1 radio2

・・・つまり、このような形にしたり、チェックに色を付けたり、そのチェックの枠の色を変えたりすることができます（グレーながらも僅かに青がかるようにしています。）

Internet Explorer 9以上など、ある程度新しいブラウザーで使うことができます。(IE8未満は非対応なので、メディアクエリーとセレクタで抑制しています)

やり方

CSS

input[type=radio],
input[type=checkbox] {
    display: inline-block;
    margin-right: 6px;
}
input[type=radio] + label,
input[type=checkbox] + label {
    position: relative;
    display: inline-block;
    margin-right: 12px;
    line-height: 1.5px;
    cursor: pointer;
}
 
@media (min-width: 1px) {
    input[type=radio],
    input[type=checkbox] {
        display: none;
        margin: 0;
    }
    input[type=radio] + label,
    input[type=checkbox] + label {
        padding: 0 0 0 24px;
    }
    input[type=radio] + label::before,
    input[type=checkbox] + label::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
		-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        width: 18px;
        height: 18px;
        margin-top: -9px;
        background-color: white;
    }
    input[type=radio] + label::before {
        border: 2px solid #c2ced2;
        border-radius: 30px;
    }
    input[type=checkbox] + label::before {
        border: 2px solid #c2ced2;
    }
    input[type=radio]:checked + label::after,
    input[type=checkbox]:checked + label::after {
        content: "";
        position: absolute;
        top: 50%;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
    }
    input[type=radio]:checked + label::after {
        left: 5px;
        width: 8px;
        height: 8px;
        margin-top: -4px; 
        background: #19c5ff;
        border-radius: 8px;
    }
    input[type=checkbox]:checked + label::after {
        left: 3px;
        width: 16px;
        height: 8px;
        margin-top: -8px;
        border-left: 3px solid #12b4eb;
        border-bottom: 3px solid #12b4eb;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}

input[type=radio],

input[type=checkbox] {

display: inline-block;

margin-right: 6px;

}

input[type=radio] + label,

input[type=checkbox] + label {

position: relative;

display: inline-block;

margin-right: 12px;

line-height: 1.5px;

cursor: pointer;

}

@media (min-width: 1px) {

input[type=radio],

input[type=checkbox] {

display: none;

margin: 0;

}

input[type=radio] + label,

input[type=checkbox] + label {

padding: 0 0 0 24px;

}

input[type=radio] + label::before,

input[type=checkbox] + label::before {

content: "";

position: absolute;

top: 50%;

left: 0;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

display: block;

width: 18px;

height: 18px;

margin-top: -9px;

background-color: white;

}

input[type=radio] + label::before {

border: 2px solid #c2ced2;

border-radius: 30px;

}

input[type=checkbox] + label::before {

border: 2px solid #c2ced2;

}

input[type=radio]:checked + label::after,

input[type=checkbox]:checked + label::after {

content: "";

position: absolute;

top: 50%;

-moz-box-sizing: border-box;

box-sizing: border-box;

display: block;

}

input[type=radio]:checked + label::after {

left: 5px;

width: 8px;

height: 8px;

margin-top: -4px;

background: #19c5ff;

border-radius: 8px;

}

input[type=checkbox]:checked + label::after {

left: 3px;

width: 16px;

height: 8px;

margin-top: -8px;

border-left: 3px solid #12b4eb;

border-bottom: 3px solid #12b4eb;

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

}

HTML

<!-- チェックボックス -->
<input type="checkbox" name="sample1" id="test1" />
<label for="test1">checkbox</label>


<!-- ラジオボタン -->
<input type="checkbox" name="sample2" name="aaa" id="test2" />
<label for="test2">radio1</label>
<input type="checkbox" name="sample2" name="bbb" id="test3" />
<label for="test3">radio2</label>

<label for="test1">checkbox</label>

<label for="test2">radio1</label>

<label for="test3">radio2</label>

このテクニックの注意ポイント

<label for="●●"> の使い方！

labelタグを使う人は、labelタグの中にinputタグを包み込んで、文字をクリック(スマホだったらタップ)しても反応するようにする…という使い方をしていると思います。

しかし、今回のは

input に固有のIDを付けて、label for〜でリンク付ける
元々の input 要素は非表示にし、
代わりに CSS3 でまったく別の形で描画する

という方法を採っています。

秋田マーケットサービス有限会社はWEBデザイン、プログラマーを募集中です。

秋田マーケットサービス有限会社採用情報

弊社では、様々なWebアプリケーションを開発しています

宿泊施設・予約システム（ホームページひな形付き）

弊社では宿泊施設・予約システムをはじめ、様々なWebアプリケーションを開発しています。

サーバーサイドの機能が満載なのはもちろんのことですが、HTML5・CSS（今回ご紹介したような内容も含みます）・jQueryなどといったフロントエンド部分も、パソコンに不慣れな方でも直感的に操作できるようにしています。

また、予約システムだけではなくホームページテンプレートも付属しています。このホームページ１つでだけで宿泊予約が出来ますし(外注システム不要)、システムでプラン情報や価格などを設定すると、即座にホームページにも反映されるようになっています。

また、タブレットやスマートフォンなどといったマルチデバイスにも対応しております。

このシステムの詳細情報はこちらのバナーからご覧ください。