祝日API作成中。

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

callendar-api-making-img

いま、色んな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サイトの開発をしているのですが、それだとノートパソコンで見たときにユーザビリティ(使い勝手)が悪いサイトになってしまいます。そこで、そのヒストリーと、ササッとブラウザの解像度を変更する方法を紹介します。

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

usually-workspace

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

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

実際にあったこと

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

kisekae-simulator-1

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

kisekae-simulator-2

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

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

kisekae-simulator-3

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

kisekae-simulator-4

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

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

smartfield-javascript-doesnt-allowed

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

そして今度こそ!

1280-by-720-safari-retina

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

ほかにも…【resizeMyBrowser】

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

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

resizeMyBrowder.com

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

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

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

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

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

jQuery -- Write less, do more.

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 UI2015年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で自動投稿するのをやめて、1記事1記事、手動で投稿していく。

b. WordPressを騙して使う。

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

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

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

jetpack-before-publisizesharedetail

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

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

プログラマ・WEBデザイナーのみなさんへアンケートです。是非ご協力を!

[poll id=”1″]

[poll id=”2″]

[poll id=”3″]

[poll id=”4″]

[poll id=”5″]

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

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

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

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

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


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

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

やり方

CSS

HTML

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

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

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

しかし、今回のは

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

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

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

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

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

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

minshuku_admin_top

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

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

minshuku_multidevice

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

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


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

【WordPress】カスタムフィールドテンプレートのテーマ内foreach処理

先日、Wordpressのテンプレート内にカスタムフィールドテンプレートを用いて項目を表示するという案件がありましたが、テーマのアップグレードで消してしまいました…。備忘録がてらにコードを書いてみました。

繰り返しイメージ画像

Photo Repeat by Thomas Hawk.

先日、Wordpressのテンプレート「Twenty Fifteen」内にカスタムフィールドテンプレートを用いて項目を表示する、という案件がありました。

しかし、以前にそのコーディングをしたのですが、Wordpress のテーマをアップグレードしてしまい、その作業を無駄にしていまいました・・・

教訓!

親テンプレートは弄るな。子テンプレートを作れ。

(ただし、自作テーマの場合はこの限りではない)

ということで、今回の作業を備忘録していきます。

カスタムフィールドテンプレートのforeach処理

今回は「Twenty Fifteen」内に書くので、対象のPHPは「content.php」になります。

そして今回はさらに、このようにしたいと思っています。

  • レスポンシブしやすくするため、定義形式(DT-DL-DD)
  • もしもカテゴリーがrecruitだったらに限定
  • 該当項目が空白だったら、その項目は非表示
  • 複数行にも対応(しなくても良いところもありますが、纏めて対応)

・・・ずばりコーディングするとこうなります。

位置関係を言うと、div.entry-contentが来て、the_content・wp_link_pagesの処理が終わったあとの次です。

子テーマを作れ

今回泣く事になってしまった原因です。

取り敢えず、下記サイトを参照してサクっと作ってきました。

wordpress子テーマの作り方!style.css・各テンプレートファイル・function.php の設定手順 | ゆとり世代のブログ運営論
http://viral-community.com/wordpress/wp-child-theme-5818/

また作る事もあるかも知れないので、今回の style.css も備忘録がてらに貼っておきます。

Templateのところはディレクトリ名なので、テンプレート名 Twenty Fifteen と入れない様に注意が必要です。ここでも沼にはまってしまいました・・・。

WordPress のバーを少し透かしてみた

少し前の話になりますが、Wordpress の管理画面のバーを少し色透明にしてみました。

Wordpress Bar - Transparent

少し前のお話しになりますが・・・

WordPress 3.9 以降ですと、Wordpress のバーはフラットデザインの黒いバーになります。

今回お客様の WordPress のテーマを作るにあたり、ちょっとした遊び心でバーの色をちょっと透明にしてみました。

CSS

解説

  • Q. なぜ 783px 以上のメディアクエリーがあるのか?
    タブレット以下になると、Wordpress のバーは上部固定ではなくなってしまいます。そうなると半透明である理由がなくなってしまうので、783px 以上限定にしています。
    ただ position: fixed; を掛ければまたいい話なんですけどね・・・
  • あの長い 7 〜 13 行目のCSSは?
    上部バーから展開するプルダウンにも適用させるための CSS です。上部バーよりも若干明るく・薄くしています。

WordPress のデバッグプラグイン。

Wordpress 内で具体的にどういう処理がされているかを「Query Monitor」プラグインで調べることができます。

例えば、Windows を使っている人は「タスク マネージャ」、

QueryMonitor0

Mac OS X を使ってる人は「アクティビティモニタ」を使ったり、見たことは何回かあると思います。

QueryMonitor1

パソコンが重いときは何が原因なんだろう…とこれで調べることがよくありました。

それの WordPress 版

そして、Wordpress でも、具体的にどういう処理がされて、どういうプラグイン・処理が悪さをしているかの判断に助かるプラグインを…、他の人(いや、会社?)のブログから初めて知りました。

WordPressのデバッグプラグイン「Query Monitor」をサイト制作・カスタマイズに役立てよう
http://liginc.co.jp/web/wp/plug-in/151347

自分も入れてみた

入れてみたら早速、ページ生成時間・メモリ・DBクエリの実行時間・実行したクエリ数の4つが表示されました。
0.67s は早いのか遅いのか・・・参考までに CPI サーバーで12個プラグインを有効にしています(恐らく個数だけの問題じゃないと思うが)。

QueryMonitor2

早速軽度のエラーが

Notice エラーが1つ、Deprecated エラーが1つ出てきました・・・。いずれも軽度なエラーなのですが、何なのでしょうか。調べてみます。

QueryMonitor3