【Mac】ウィンドウを隅に寄せるツール「shift」

メディカルデザインの平野です。
Macユーザーの方で、作業中にブラウザやソフトのウィンドウが乱立し、
ウィンドウ管理に困ったことはないでしょうか。
ウィンドウを分割し、隅や片側に寄せてくれるツールが「shift」です。
ショートカットにより、
左右上下に1/2表示、1/4表示、センタリング、最大化、ウィンドウの縮小拡大等が行えるため、
ウィンドウの管理がスムーズに行えます。

 

170721_02

左右1/2分割

170721_01

4つ角1/4分割

 

スクリーンショット 2017-07-21 10.12.48

ショートカット設定画面

 

 

 

shiftのダウンロードはこちらから

Backlog のSVNを別サーバーに移す方法

sample

システム部の渡辺です。
業務で SVN を使ってまして、SVNリポジトリはだいたい Backlog を利用しています。

http://www.backlog.jp/

Backlog の容量節約のために、一部を自社で管理している SVNサーバーに移行したいなとなりまして、やってみたらそんなに難しくなかったのでその手順をメモ。

 

1. Backlog の リポジトリをローカルに複製する

http://www.backlog.jp/faq/service/subversion-1.html
Backlog 公式記事「Subversion のリポジトリのエクスポートサービスはありますか?」、
ここに複製用の スクリプトを書いてくれてますので、これを利用します。
記事内のスクリプトをローカルPCに テキストファイルとして保存します。
ファイル名は「backlog_svnsync.sh」としておきます。

まず、backlog_svnsync.sh に実行権限を与えまして

$ chmod +x ./backlog_svnsync.sh

次に backlog_svnsync.sh を実行します。ここで渡す引数によって、どのリポジトリを複製するか決めます。
必要になるのは「バックログのサブドメイン部分」と「リポジトリ名」で、
「バックログのサブドメイン部分」は、利用しているバックログのURL https://○○.backlog.jp/ の ○○ の部分のことです。
「リポジトリ名」は、複製したいバックログプロジェクトのプロジェクトキーのことです。
スクリプト実行時にその2つを引数として渡します。

$ ./backlog_svnsync.sh ${バックログのサブドメイン部分} ${リポジトリ名}

スクリプト実行して処理が終わりますと、目的のリポジトリの複製が、リポジトリ名のディレクトリ名で作成されています。

2. リポジトリ複製から svn の dump ファイルを作成する

svnadmin の dump で作成します。

$ svnadmin dump ${リポジトリのディレクトリ名} > ${出力するダンプファイル名}

3. dump ファイルから svnリポジトリを リストアする

2で dump したファイルを、移行したい svn サーバーに保存しまして、

$ svnadmin create ${新規リポジトリパス}
$ svnadmin load ${新規リポジトリパス} < ${2で出力したダンプファイル名}

完了です。

【PHP】無名関数で再帰呼び出しの落とし穴

こんにちは。 システム部のたかくです。業務でPHPに触りだしてから2ヶ月ほどになります。 デバッガがないのでステップ実行もない、変数の内容を拾うのにいちいち出力するの煩わしいなどと、 まだまだ開発環境そのものを見直したくて仕方ない時期です。

概要

さて、記事タイトルのお話になります。 “WordPressで、特定のスラッグを持つ最上位の固定ページから、最下位までの固定ページをリスト化する”という処理が必要になりました。 「wp_list_pages()があるじゃないか!」とも思いますが、ただリストが欲しいだけではありません。 適切な形でhtml出力するにあたって細かく制御する必要がありました。 ツリー型の構造を得たいなら再帰の出番です。 諸事情で新しく関数を書き足すことは避けたい状況でしたので、手続き的に書きたいなと思いました。 そうなると無名関数しかないよなーと思い、安易に手を出したら軽くハマってしまったのでその備忘録になります。 (PHPの無名関数は5.3からサポートされているようですよ)

最初に書いたもの

$family = function ($children) use (&$contents) {
    if (count($children) == 0) {
        return;
    } else {
        foreach ($children as $child) {
            // 前処理
            $nextChildren = get_children(array(
                'post_parent' => $child->ID,
                'post_type' => 'page',
            ));
            $family($nextChildren);
            // 後処理
        }
    }
};

$family($firstChildren);

(見づらいですが) 出力したいhtmlテキストの形式が若干特殊なため、最初に該当ページの最上位ページを拾ってからその直下のページだけを$firstChildrenとして取得しています。 それを無名関数に投げて再帰的に呼び出し、前処理と後処理の中で$contentsにhtmlテキストを格納していく、というものです。 変数のキャプチャの仕様はいろんな言語で違うため、真っ先に調べてuseを使うんだなーとぼんやり理解しました。 無名関数も関数の1つであるからか変数のスコープが外側と異なるため、$contentsには参照を渡さなければ処理が値に反映されません。 しかし、これで動いてくれることを期待しましたが見事に実行を停止してしまいます。

なぜなのか

無名関数の中と外ではまったく別のスコープであると予想します。 $familyという変数に無名関数を渡して、その中で$family()を再帰的に呼び出しています。 この無名関数は$familyという変数があることをまったく知りません。 スコープの外の存在は$contentsのように丁寧に教えてやらなければ見つけてくれないのです。 これが原因でした。

せいかい

$family = function ($children) use (&$family, &$contents) {
    if (count($children) == 0) {
        return;
    } else {
        foreach ($children as $child) {
            // 前処理
            $nextChildren = get_children(array(
                'post_parent' => $child->ID,
                'post_type' => 'page',
            ));
            $family($nextChildren);
            // 後処理
        }
    }
};

$family($firstChildren);

ちゃんと無名関数を渡す変数もuseでキャプチャしてあげましょう。 無名関数の中で自分を表すキーワード(クラスで言うthis)なんかが書ければ、 無名関数を渡される変数名が関数の定義の中の変数名に縛られないので、自由度が増すのですが… ありませんか?

【CSS】困ったときの「Can I use…」

こんにちわ。システム部のコタニです。

前職では、html/cssのコーディングをメインで行っていたため、
日々の業務ではなれない記述や黒い画面(ターミナルのことです)に
四苦八苦していますが、どうにか頑張っています。
ここでは覚えたことや、気をつけなければいけないことをまとめていければと思います。

さて、コーディングを行うにあたって、いっつも悩まされるIE(Internet Explorer)も
今年4月に最新版以外のサポートが切れ、喜んでいたのもつかの間、
案件によってはまだまだ対応されている方も多いかと思います。

そうなると、気になるのがブラウザごとのスタイルの対応状況。
できるだけ気をつけて制作はしていますが、なかなか全ての不具合をつぶし切れず、
一体なにが原因なのか、ググってもなかなかわからず、途方にくれてしまいそうな時、
ぼくは「Can I use…」を見るようにしています。

Can I use…

caniuse_01
https://caniuse.com/

古いブラウザのみではなく、モダンブラウザでも不具合が多発することがあります。
単純にベンダープレフィックの問題だったり、そもそも使えなかったりしますので、
いったん落ち着く意味も兼ねて、まずは確認です。

また、Sublime TextやAtomなどでパッケージが用意されているみたいなので、
ぜひ使ってみてはいかがでしょう?

(ぼくはこの記事を書いている時に初めて知りました。)

caniuse_02

※Atomでの見え方です。

WordPressの投稿画面で「この投稿を先頭に固定表示」チェックボックスを非表示

だいぶ間が空いてしまいました。
ちょっと余裕出てきたシステム?の渋谷です。

WordPressの知識を増やすためにWordpressのプラグイン作ろうか、ってことで一つ簡単に作ってみることにしました。
ネタ不足にならないようにシリーズでお届けできたらなぁと考えてます。

プラグインが実務上使えることは前提ですが、あくまで勉強のためなのでよそのプラグインと機能が被ったりするのは気にしないことにします。

「この投稿を先頭に固定表示」チェックボックス

stucky

 

いつの間にかについていた機能の「この投稿を先頭に固定表示」…。
WPのバージョンを上げたら表示されるようになって、「この投稿を先頭に固定表示」を押しても先頭に表示されないとクライアントに言われてしまうという機能です。

新規サイトでは対応してしまってもいい機能なんですが、以前からあるサイトでは対応に時間がかかるのでチェックボックスを非表示にすることで問題が起きないようにしました。

作業的には非表示にするjavascriptをアップしてfunction.phpにそのjsファイルを読み込む機能を付け足すだけになります。

ただし、非WP管理サイトが山ほどある場合、いちいちfunction.phpに書いて…jsアップしてとやっているとfunction.phpを別なサイトにアップするリスクがあるので、function.phpに書いていた内容をプラグインにしてみました。

<?php
/**
 * @package Remove Sticky Checkbox
 * @version 1.0.0
 */
/*
  Plugin Name: Remove Sticky Checkbox
  Plugin URI: http://blog.medical-design.co.jp/
  Description: 投稿画面の「この投稿を先頭に固定表示」チェックボックスを非表示にします。
  Author: Medical Design
  Version: 1.0.0
  Author URI: http://www.medical-design.co.jp/
  Text Domain: remove-sticky-checkbox
*/

function remove_sticky_checkbox() {
    echo ‘<script>if(typeof jQuery != “undefined”){jQuery(function(){jQuery(“#sticky-span”).remove();})}</script>’.”\n”;
}
add_action( ‘admin_head’, ‘remove_sticky_checkbox’ );
?>

この内容を書いたphpファイルをフォルダごとプラグインフォルダに突っ込んで回って有効化するだけです。

このプラグインの数少ないポイントはadmin_headで動かしていることでしょうか。
どのタイミングでプラグインを動かすかはプラグイン API/アクションフック一覧に書いてあるのですが、

admin_print_scripts
  管理画面各ページの <head> 要素に JavaScript を追加するために実行する。

最初これで動かしたらjqueryが読み込まれる前、headの前の方に書かれてしまって動きませんでした。
実際に管理画面にプラグインを放り込むとこんな感じ。

stucky2

投稿画面でチェックボックスが消えてくれたことを確認。

stucky3

今回作ったプラグインファイルはこちら

 

 

【jQuery】 slick カルーセルスライダーを使ってみる

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-10-14-50


%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-10-12-46

システム部の渡辺です。

設定が楽で使い回せるスライダーを探してました。

レスポンシブ対応が細かくできて、
自前で何かを書き足さなくてもすむスライダーの候補として
slick.js はけっこういいです。

slick 公式

サンプル

よく使うスライダーの代表例のサンプルを作成してみました。

レスポンシブ対応

最近の案件はほぼレスポンシブなので、
PC、タブレット、スマホの設定を、わかりやすく簡単に設定できるかがポイントだと思いますが、例えば「768px 以下になった時には2列に変更」などといった指定を複数できる setting が用意されてあり、重宝しそうです。


$('.slick-3').slick({
  responsive: [
    {
      breakpoint: 959,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
      }
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
      }
    },
    {
      breakpoint: 470,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      }
    }
  ]
});

その他

タブ切り替え機能を、用意されている setting ですぐできます。( asNavFor )

スライドさせる列に、div などではなく、いきなり img 要素を指定すると、妙な動きがある気がするので、 div の方がよさそう。どうせだから .slick-slide というデフォクラス名つけておくとロード時の崩れ防止になる様子。

【WordPress】ダッシュボード上で注意書き等のアナウンスを表示する。

夏真っ盛りですね!システム部のヒライです。

システムが絡むウェブサイトを納品する場合、クライアントに対し使い方の説明を行いますよね。 口頭で説明後に説明書なんかをお渡しするケースがほとんどだと思います。

複雑な機能の説明は時間をとって行うべきではありますが、 基本的な使い方や、よくある質問のようなスタンダードな情報を何度も説明すると結構時間を食ってしまいますよね。

そんな時、WordPressを使っていれば、簡単に管理画面上で使い方説明を表示することが可能です。

管理画面ログイン後に表示される「ダッシュボード」上に使い方を乗せてみましょう。 functions.phpへ以下を書き込みます。

<br />
function dashboard_widget_function() {<br />
	// 説明文を記入<br />
	echo &#8216;新着情報一覧にお知らせを表示する場合は、&lt;a href=&quot;/wp-admin/edit.php&quot;&gt;左メニューの【投稿 > 新規追加】&lt;/a&gt;から行って下さい。&lt;br&gt;';<br />
	echo &#8216;説明文テキスト説明文テキスト説明文テキスト説明文テキスト&lt;br&gt;';<br />
}</p>
<p>function add_dashboard_widgets() {<br />
	// 説明文の見出し名<br />
	wp_add_dashboard_widget(&#8216;dashboard_widget&#8217;, &#8216;管理画面の使い方&#8217;, &#8216;dashboard_widget_function&#8217;);<br />
}</p>
<p>add_action(&#8216;wp_dashboard_setup&#8217;, &#8216;add_dashboard_widgets&#8217; );<br />

ダッシュボードを見てみる。

ダッシュボード

使い方が表示されましたね! 以上のようにダッシュボード上に表示しておくことで、クライアント様への使い方説明の時間を短縮できるのではないでしょうか。

現在地から半径○メートル以内の○○を抽出するSQL

システム部の鈴木です。

ポケモンGOの日本リリースからはや2週間、皆様は引き続き楽しまれてますでしょうか?

自分は既に飽き出しておりギャラドスへの進化を見る事無く、
わざわざ買った携帯バッテリーを使う事も無く引退が危ぶまれております。

さて、ポケモンGOでまた脚光を浴びた「位置ゲー」ですが、
ポケモンGOの場合は現在地点にプレーヤーのキャラがいて
周囲の○メートルくらいにあるポケストップではアイテムがもらえたりしますよね?

こういった「現在地から半径○メートル以内にある○○を探す」系の事をやるときの
データをどうやって探すのか?ってのをやってみたいと思います。

やりたいこと

map0

弊社のあるアークヒルズフロントタワーを中心としたとき、
色々ある座標データまでの直線距離を計算し、それが○メートルに収まるかどうか?
ということがやりたいことです。

そして今回は、様々な座標が登録されたMySQLのDBから一気に該当する座標を取りたいと思います。

データベース

今回は例としてこのようなテーブルを作成しました。

<br />
CREATE TABLE IF NOT EXISTS `test` (<br />
  `id` int(11) NOT NULL AUTO_INCREMENT,<br />
  `place` varchar(255) NOT NULL DEFAULT &#8221;,<br />
  `lat` double NOT NULL DEFAULT &#8216;0&#8217;,<br />
  `lng` double NOT NULL DEFAULT &#8216;0&#8217;,<br />
  PRIMARY KEY (`id`),<br />
  KEY `lat` (`lat`,`lng`)<br />
) ENGINE=InnoDB;<br />

<br />
INSERT INTO `test` (`id`, `place`, `lat`, `lng`) VALUES(1, &#8216;東京駅&#8217;, 35.68121, 139.765751);<br />
INSERT INTO `test` (`id`, `place`, `lat`, `lng`) VALUES(2, &#8216;品川駅&#8217;, 35.62857, 139.738809);<br />
INSERT INTO `test` (`id`, `place`, `lat`, `lng`) VALUES(3, &#8216;横浜駅&#8217;, 35.465365, 139.62209);<br />
INSERT INTO `test` (`id`, `place`, `lat`, `lng`) VALUES(4, &#8216;二子玉川駅&#8217;, 35.611237, 139.626182);&lt;/pre&gt;<br />
&lt;pre&gt;<br />

以下のような感じのテーブルから、弊社から半径10km以内にある駅を探してみたいと思います。

<br />
+&#8212;-+&#8212;&#8212;&#8212;&#8212;+&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;&#8212;&#8212;+<br />
| id | place      | lat       | lng        |<br />
+&#8212;-+&#8212;&#8212;&#8212;&#8212;+&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;&#8212;&#8212;+<br />
|  1 | 東京駅     |  35.68121 | 139.765751 |<br />
|  2 | 品川駅     |  35.62857 | 139.738809 |<br />
|  3 | 横浜駅     | 35.465365 |  139.62209 |<br />
|  4 | 二子玉川駅 | 35.611237 | 139.626182 |<br />
+&#8212;-+&#8212;&#8212;&#8212;&#8212;+&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;&#8212;&#8212;+<br />

ではこの中から半径10kmに収まる座標を取りだすにはどうすればよいでしょうか?

中学で習ったアレを使います

2地点間の距離を出すには3平方の定理を使いましょう

map02

3平方の定理は aの二乗+bの二乗 = cの二乗 というものです。
この公式は文系出身の自分でも中学の時に聞いた覚えがあります。

現在地であるアークヒルズの座標を lat = x1, lng = y1 (35.668185, 139.739487 )
そして目標となるATTビルの座標を lat = x2, lng = y2

とすると、緯度の差が x1 – x2 = a
経度の差が y1 – y2 = b
ということです。

上の図の例だと、例えば赤い線の半径に収まる座標がどれかを探したいわけですが
要は斜辺の長さがその半径の長さに収まっているかどうかが分かればよいという事ですね。

さらに地球の丸みを考慮して正確に距離を出すためには
弧度法のラジアン(弧度)に変換し、3平方の定理に当てはめればよさそうです。
そして地球の一週の距離は約 6378km らしいので、それを使えばこんな感じで出来るようです。

 

 

<br />
SELECT id, place, lng, lat, (6378 * acos(cos(radians(35.668185)) * cos(radians(lat)) * cos(radians(lng) &#8211; radians(139.739487)) + sin(radians(35.668185)) * sin(radians(lat)))) AS distance<br />
FROM test HAVING distance &lt; 10 ORDER BY distance<br />

このSQLを実行した結果がこちらです。

<br />
+&#8212;-+&#8212;&#8212;&#8211;+&#8212;&#8212;&#8212;&#8212;+&#8212;&#8212;&#8212;-+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-+<br />
| id | place  | lng        | lat      | distance          |<br />
+&#8212;-+&#8212;&#8212;&#8211;+&#8212;&#8212;&#8212;&#8212;+&#8212;&#8212;&#8212;-+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-+<br />
|  1 | 東京駅 | 139.765751 | 35.68121 | 2.782586467919596 |<br />
|  2 | 品川駅 | 139.738809 | 35.62857 | 4.410253359933821 |<br />
+&#8212;-+&#8212;&#8212;&#8211;+&#8212;&#8212;&#8212;&#8212;+&#8212;&#8212;&#8212;-+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-+<br />

見事に近い順で絞り込むことに成功しました。
直線距離なので実際の道路で進んだ距離とは異なりますが、便利に使えそうですね。

IEの画像縮小がきれいに表示されない理由

システム部渋谷です。

このごろはレスポンシブデザインでのWeb制作が当たり前のようになってきました。
レスポンシブデザインでは閲覧環境に合わせて見え方を変える都合上、大きな画像を用意してそれをブラウザ上で縮小させて表示することになります。

「レスポンシブで縮小した画像がIEだけ汚い…」

古いIEが消えてだいぶましな描画がされるようになったほのぼのIEだったのですが、またしても問題に!

berry

この画像を各ブラウザで縮小してみてみると…

hikaku

あたかもニアレストネイバーで縮小したかのような汚さなのですが……。
(縮小したものをニアレストネイバーで2倍に拡大しています)

各ブラウザの画像補完について

どういう処理をしているのかを調べるために、画像を縮小拡大になんのアルゴリズムを使ってるのか見てみました。

kakudai

上の画像は、小さい画像を大きく表示させた場合どう表示されるかを表したものです。
8×8の小さな画像を256×256に引き延ばしています。
上段はPhotoshopで作った参考画像で、下段は各ブラウザでの表示結果。

もしかしたら画像によって、または縮小と拡大によって切り替えているかもしれませんが、
IE11:バイリニア
Edge:バイリニア
Chrome:バイキュービック
Firefox:バイリニア
という結果でした。
バイリニア以上を各ブラウザがデフォルトとして使ってることは確定のようなのでそんな汚くならないと思うんだけどなぁ…と。

今度は別な画像を使っての縮小テスト。
しましまな横512の画像を横63に縮小表示させています。
割り切れない微妙な数字にするのがポイント。

shukushou

IEとEdgeだけ妙な縞になってます。

バイリニアでは求める位置のピクセルと周囲の1ピクセルを線形的に補完するため、半分以下の大きさに縮小する場合一度半分の大きさにして、そこから再帰的に小さくしていかないときれいな画像になりません。
(無視して捨てられるピクセルがたくさん出てくる)

元の画像が大きければ大きいほどニアレストネイバーに表示結果が近づいていくことになります。
そのぶん処理は軽くなりますが。

上記結果からの推測になるのですが、おそらくIEは処理を軽くするために意図的に2回目以降の縮小処理を省いているのではないでしょうか?

……あくまで推測ですが。

ChromeとFirefoxでは画像が半分まではしましま、半分以下はどのサイズでもグレー1色になりました。

結局のところ対処法は…

元の画像の半分の大きさになるまではきれいに縮小されるので、半分以下の大きさにならないように気を付ける必要がありそうです。

クリッカブルマップがrwdImageMapsで消える|動かなくなる場合がある件

こんにちは、システムの渋谷です。
画像の一部分の領域からリンクを張る、クリッカブルマップという便利な機能があるのですが、レスポンシブで画像のサイズが変わってもリンクの領域は自動的に変わらないため、ブラウザのサイズ変更に応じてリンクの領域をjavascriptで変えてあげる必要があります。

その作業を簡単に行ってくれるResponsive Image Maps jQuery Pluginという著名なjQuery Pluginがあるので、通常これを使ってクリッカブルマップのレスポンシブ対応を実現しています。

使い方も簡単で、「jquery.rwdImageMaps.min.js」を読み込んで

$(‘img[usemap]’).rwdImageMaps();

とするだけでOK!
まったく簡単だ!

と思ってたら、なぜかクリッカブルマップが正常に動いていない案件が……

やせいの バグが とびだしてきた!

症状としては、

  • タブを使って複数のクリッカブルマップを切り替える仕様
  • クリッカブルマップを切り替えるとリンク領域が消えている
  • ブラウザサイズを変更するとなぜか復活する

いろいろ適当にいじってみても正常に動作しないので、泣きながら(というほどでもないですが)ソースを読んでみました。

画像ロード時にimg要素の大きさを取得して、それをもとにレスポンシブで変更された画像の大きさでのリンク領域の計算を行っているようです。

つまり…タブで切り替える仕様などで、rwdImageMaps()実行時にクリッカブルマップが非表示の状態になっていると画像の幅と高さが「0」とされてしまうので、リンク領域も出なくなってしまう、と。

それで解決方法は?

これを解決するには、画像を表示するタイミングでサイズを取得してあげるようにすればいいのですが、プラグインの中身に手を入れると管理が面倒になるので今回は「ブラウザサイズを変更するとなぜか復活する」点に注目して、タブの切り替え時にresizeイベントを発火させることで解決することができました。

コードとしては、タブ切り替え時のslideDown等の関数のコールバックに

function(){$(window).resize();}

を指定してあげればいいだけです。

rwdImageMaps自体が結構長い間メンテナンスされておらず、最新のjQueryで廃止された関数を使っていたりするのでいろいろ書き換えたいところがあるんですけどね。