【ランチ会だより番外編】屋上BBQ★

こんにちは!ランチ会係です。
先週の金夜に開催されたBBQの様子をご報告します♪

毎年恒例の夏BBQ!去年はできなかったので久しぶりの開催でした!社長が張り切っていろいろ用意してくれました〜

DSC_3549

エプロンとグローブ装備で準備万全の社長★

DSC_3578

DSC_3570

一生懸命火起こしする社長とその様子を腕組んで眺める社員。。。

DSC_3581

西谷さんも火起こし参戦!!火力上がってきました

DSC_3601

「「「「お肉まだかなー」」」」の顔

DSC_3605

DSC_3607

いい感じに焼けました!!!わーい!!!(鉄板熱い!!!)

DSC_3616

DSC_3621

焼けたお肉をみんなに切り分けてくれるシェフ植村さん。
と、炊きたてのごはんを山盛りよそって走り去る食いしんぼう小谷さん(笑)

DSC_3596DSC_3635

DSC_3637

今回の目玉の淡路姫牛!!とろけるおいしさ!焼き加減も最高でした.+*☆

DSC_3645

次は締めの焼きそば!はりきって作ってくれる武士さん

DSC_3653

ビール片手に…

DSC_3643

DSC_3642

アグレッシブ!!(速すぎてブレブレ)

DSC_3675

具沢山のおいしい焼きそば完成☆

DSC_3676

IMG_6597

最後は大玉のスイカ割り!(なぜか社長持参の斧(!!)で)
佐藤さんが一発で綺麗に真っ二つにしてくれました!すごい!

DSC_3666

スイカも食べてお腹いっぱいでみんな大満足でした^o^
弊社はスタッフ全員シャイなのでテンション高めの写真は少ないですが(笑)普段仕事では関わりの少ないメンバーで話したり、映画やゲームトークで盛り上がったりと各々すごく楽しめました♪
また暖かくなったら開催したいですね!

医業等に係るウェブサイトの監視体制強化事業の開始について

厚生労働省は、不適切な表示やうそ、大げさな表現がなされている医療機関のホームページについて指摘があることをから、一般の方でも通報が出来るウェブサイト「医療機関ネットパトロール」を開始しました。

弊社ではサイト制作の際、ご提供頂いた原稿に目を通させていただいており、気になる表現などは病院様にお伝えする体制をとっております。

 

尚、これまで誇大表現や不適切な表示にあたるような内容はありませんでしたが、今後も引き続き病院様のお手伝いをしていきたいと考えております。

 

PC

【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: https://blog.medical-design.co.jp/
  Description: 投稿画面の「この投稿を先頭に固定表示」チェックボックスを非表示にします。
  Author: Medical Design
  Version: 1.0.0
  Author URI: https://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

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

 

 

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

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

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

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

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

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

[php]
function dashboard_widget_function() {
// 説明文を記入
echo ‘新着情報一覧にお知らせを表示する場合は、<a href="/wp-admin/edit.php">左メニューの【投稿 > 新規追加】</a>から行って下さい。<br>’;
echo ‘説明文テキスト説明文テキスト説明文テキスト説明文テキスト<br>’;
}

function add_dashboard_widgets() {
// 説明文の見出し名
wp_add_dashboard_widget(‘dashboard_widget’, ‘管理画面の使い方’, ‘dashboard_widget_function’);
}

add_action(‘wp_dashboard_setup’, ‘add_dashboard_widgets’ );
[/php]

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

ダッシュボード

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

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

システム部の鈴木です。

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

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

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

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

やりたいこと

map0

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

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

データベース

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

[sql]
CREATE TABLE IF NOT EXISTS `test` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`place` varchar(255) NOT NULL DEFAULT ”,
`lat` double NOT NULL DEFAULT ‘0’,
`lng` double NOT NULL DEFAULT ‘0’,
PRIMARY KEY (`id`),
KEY `lat` (`lat`,`lng`)
) ENGINE=InnoDB;
[/sql]

[sql]
INSERT INTO `test` (`id`, `place`, `lat`, `lng`) VALUES(1, ‘東京駅’, 35.68121, 139.765751);
INSERT INTO `test` (`id`, `place`, `lat`, `lng`) VALUES(2, ‘品川駅’, 35.62857, 139.738809);
INSERT INTO `test` (`id`, `place`, `lat`, `lng`) VALUES(3, ‘横浜駅’, 35.465365, 139.62209);
INSERT INTO `test` (`id`, `place`, `lat`, `lng`) VALUES(4, ‘二子玉川駅’, 35.611237, 139.626182);</pre>
<pre>
[/sql]

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

[sql]
+—-+————+———–+————+
| id | place | lat | lng |
+—-+————+———–+————+
| 1 | 東京駅 | 35.68121 | 139.765751 |
| 2 | 品川駅 | 35.62857 | 139.738809 |
| 3 | 横浜駅 | 35.465365 | 139.62209 |
| 4 | 二子玉川駅 | 35.611237 | 139.626182 |
+—-+————+———–+————+
[/sql]

ではこの中から半径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 らしいので、それを使えばこんな感じで出来るようです。

 

 

[sql]
SELECT id, place, lng, lat, (6378 * acos(cos(radians(35.668185)) * cos(radians(lat)) * cos(radians(lng) – radians(139.739487)) + sin(radians(35.668185)) * sin(radians(lat)))) AS distance
FROM test HAVING distance < 10 ORDER BY distance
[/sql]

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

[sql]
+—-+——–+————+———-+——————-+
| id | place | lng | lat | distance |
+—-+——–+————+———-+——————-+
| 1 | 東京駅 | 139.765751 | 35.68121 | 2.782586467919596 |
| 2 | 品川駅 | 139.738809 | 35.62857 | 4.410253359933821 |
+—-+——–+————+———-+——————-+
[/sql]

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

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色になりました。

結局のところ対処法は…

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