日頃より大変お世話になっております。
2018年ゴールデンウィーク休業のお知らせです。
4月28日(土)〜5月6日(日)となります。
期間中急用のお客様は、代表小野の携帯までご連絡いただきますようお願いいたします。
秋田マーケットサービスの社員の成長記録とちょっとしたTips。
日頃より大変お世話になっております。
2018年ゴールデンウィーク休業のお知らせです。
4月28日(土)〜5月6日(日)となります。
期間中急用のお客様は、代表小野の携帯までご連絡いただきますようお願いいたします。
久しぶりにスタッフブログを更新いたします。勝手ながらですが、弊社は11月2日(月曜日)は休業となります。
更新がものすごく久しぶりのスタッフブログとなってしまい申し訳ありません。。。
勝手ながらですが、弊社は11月2日(月曜日)は休業となります。
これによりスタッフは明日から11月3日(火曜日)まで4連休を取らせていただきます。
皆様にはご迷惑をおかけしますが、何卒ご了承の程宜しくお願い申し上げます。
for 関数で2ずつ増やしたくても増やせない場合は、体裁が悪くても別の変数を包んで対処する必要があります。
仮に【2から始めて、10で終わる】として、普通に考えるとこんな感じのプログラムをすると思います。
1 2 3 4 5 |
for( var i = 2; i <= 10; i = i + 2 ){ // // なにか処理 // } |
しかし、プログラムが上手くいってくれない…そこでどうなってるかを console.log
させてみました。すると・・・
1 2 3 4 5 6 7 8 9 10 |
for( var i = 2; i <= 10; i = i + 2 ){ console.log(i); } // 結果 // 2 // 2 // 2 // 2 // 2 |
!?!?・・・カウントアップしてくれません。
for 内で2ずつ増やすのではなく、また別の変数を for で回して(それは1ずつ増やして)対処します。
1 2 3 4 5 6 7 8 9 10 11 |
for( var h = 1; h <= 5; h++ ){ var i = h * 2; console.log(i); } // 結果 // 2 // 4 // 6 // 8 // 10 |
どうしても理想通り行ってくれなかったら、(体裁が悪くても)考え方・やり方を変える必要があったりします。
事務所を、御所野の小野社長宅から、秋田市中通のオフィスビル内に移転しました。
ポイントとなるのは、RewriteRule を「何もしない」の意味の「-」(ハイフン)にすること。これで存在するフォルダ・ファイルをリダイレクトの対象から外すことができます。
1 2 3 4 5 6 7 8 |
RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^(.*)$ - [NC,L] RewriteRule ^redirect-to/(.*)$ /original/$1 [L] |
ポイントとなるのは、
1 |
RewriteRule ^(.*)$ - |
RewriteRule の移動先にあたるところをハイフンだけにすることによって、何もしない、つまりリダイレクトの除外にすることができます。
また、RewriteCond で、Wordpress ではよく「存在するディレクトリ名・ファイル名であれば除外」という風にしていると思います。こんな風に。
1 2 |
RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d |
しかし今回は、逆に存在していれば、という条件発動にしてリダイレクトの対象から外しています。
Windows Server(IIS)の場合、受信規則を以下のように従って追加していきます。
いま、色んなWebアプリを制作する上に必要になる祝日APIを作成中です。既に他のカレンダーAPIも出ていますが、弊社はこんなのも作ってるよと公開したくて作成中です。
いま、色んなWebアプリを制作する上に必要になる、祝日はいつかを取得するAPIを作成しています。
いや、Google Callendarの祝日API(公式ページがリンク切れ)や他に既に出ているカレンダーAPI(カレンダーサービス)を使えば良いじゃないと言われたらそれまでの話ですが・・・
今回自分で作って実際のプログラムで使うのはもちろん、AMSはこんなこともやってるよと公開・あわよくば配布したくて作成中です。
ライセンスは MIT License なので自由にご利用いただけます。
GitHubや会社のホームページ(まだ準備中)に紹介ページ・ソースコードを掲載したいと思います。
自分は普段27インチのディスプレイ+外付けでWebサイトの開発をしているのですが、それだとノートパソコンで見たときにユーザビリティ(使い勝手)が悪いサイトになってしまいます。そこで、そのヒストリーと、ササッとブラウザの解像度を変更する方法を紹介します。
僕は普段、27インチの液晶と、さらに23インチの外付けディスプレイを繋げて作業しています。
その環境で作業すると、(勿論横もですが)縦がものすごく長い液晶に慣れてしまうので、ノートPCで見た場合を何も考えずに作ってしまうことがよくあります。
小野曰く、これをデザイナー病と言うらしいです。
着物ドレス絢爛の着せ替えシミュレーターで・・・
着せ替えの女性とデザインがほんの一部しか表示されません。デザインや素材を表示させようとすると・・・
スクロールが必要になってしまいます。
デザインや素材を選ぶ度にスクロールが必要になるという手間の掛かるページになってしまいました。
普段の大画面でしか見ていないとこんなことになってしまいます・・・
※今ではスクロールが極力不要になるように直しています。
ノートパソコンを開いてチェックするのもいいのですが、デスクトップ上でブラウザ幅を固定できたらいいなーと思って。おまじないのこのコードをアドレスバーに入れます。
1 |
javascript:window.resizeTo(1280, 720); |
あ、あれ・・・いかないですか・・・
(むかしIEで開発してたときによく重宝していたコードです)
Safariの開発メニューから、スマートフィールド検索からのJavaScriptを許可します。
そして今度こそ!
固定できたー!
あとはこの大きさでウェブページをチェックしていくだけです。
あるいはさっきのおまじないをお気に入り登録してもいいかも知れませんね。
ブログ執筆時は上手く行きましたが、実は実作業段階ではうまくいきませんでした(^^;)
そこで、resizeMyBrowserというWebツールを使っていました。
プリセットでいろんな大きさのモードが登録されているほか、カスタムサイズを追加することもできます。
本来は、おなじまいで何も起こらず真っ白になり、真っ先にこれを紹介したかったのですがw
いろんなユーザーが居ることを忘れないこと。自分のパソコン・端末の解像度基準だけで考えたりしないこと。です。
気がついたら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)に更新されてました。
まず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のままか…けど安定してるってことはいいことです。
【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
なるブログとならないブログの違い、だとしたらなるブログが何が原因なのか、何がトリガーになっているのか。…解明できていない状態です。
やはり本文がだらーっと出てしまいます。。。
(そのまま放置だとかっこわるいので、今では修正済みです)
Jetpackで自動投稿するのをやめて、1記事1記事、手動で投稿していく。
時系列で説明するとこんな方法です。
その後出てくるテキスト欄に記事タイトルが書かれている事を確認してから公開してください。
予約投稿の場合も同様です。
c. の方法によって一旦暫定的に解決できますが・・・何が原因なのかはわかりませんが、改善を願うばかりです。
[poll id=”1″]
[poll id=”2″]
[poll id=”3″]
[poll id=”4″]
[poll id=”5″]
CSS3のセレクタを利用することによって、デフォルトのチェックボックス・ラジオボタンではなく、色付きのカスタマイズデザインに変更することができます。
通常、チェックボックス・ラジオボタンといえば、
もちろんこのようなものでも悪くないのですが・・・
・・・つまり、このような形にしたり、チェックに色を付けたり、そのチェックの枠の色を変えたりすることができます(グレーながらも僅かに青がかるようにしています。)
Internet Explorer 9以上など、ある程度新しいブラウザーで使うことができます。(IE8未満は非対応なので、メディアクエリーとセレクタで抑制しています)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
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); } } |
1 2 3 4 5 6 7 8 9 10 |
<!-- チェックボックス --> <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="●●">
の使い方!
labelタグを使う人は、labelタグの中にinputタグを包み込んで、文字をクリック(スマホだったらタップ)しても反応するようにする…という使い方をしていると思います。
しかし、今回のは
という方法を採っています。
宿泊施設・予約システム(ホームページひな形付き)
弊社では宿泊施設・予約システムをはじめ、様々なWebアプリケーションを開発しています。
サーバーサイドの機能が満載なのはもちろんのことですが、HTML5・CSS(今回ご紹介したような内容も含みます)・jQueryなどといったフロントエンド部分も、パソコンに不慣れな方でも直感的に操作できるようにしています。
また、予約システムだけではなくホームページテンプレートも付属しています。このホームページ1つでだけで宿泊予約が出来ますし(外注システム不要)、システムでプラン情報や価格などを設定すると、即座にホームページにも反映されるようになっています。
また、タブレットやスマートフォンなどといったマルチデバイスにも対応しております。