【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

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

 

 

2017年度から全国の大病院に実績の開示義務が求められます。

2016年2月4日の日本経済新聞の朝刊一面トップに気になる報道がありました。

厚生労働省は2017年度から全国の大病院に治療実績の公表を求めたようです。
年齢や進行度別の患者数の他、診療科や病院ごとの平均入院日数をホームページで発表しなければ病院が受け取る診療報酬を減らすとのこと。

 

PC

 

目的は?

  • 患者が病院の得意分野を比べて受診先を選びやすくするため
  • 病院の競争を促すことで医療の質の向上と効率化を促すため

対象病院は?

  • 公的医療保険から定額の報酬を受け取る病院(DPC病院)で大半は大学病院など重症患者が多い大病院。
  • 全国に約1,600箇所。

公表項目は?

  • 年代別の入院患者数
  • 5大がんのステージ別患者数
  • 診療科別・手術別の入院日数(術前・術後)
  • 診療科別の症例数
  • 脳梗塞のタイプ別患者数
  • 肺炎の重度別患者数
  • その他(血液せい肝臓機能障害など)

患者の誤解を回避する措置は?

  • 重症患者を積極的に受け入れる病院は入院日数が長くなりがちなため、実績に対する解説をつける。
  • 7項目の基準を統一し、透明性を出す。

厚生労働省は今年8月にも公表制度の枠組みを決めて、10月をめどに各病院に15年度分を発表してもらうようです。

そして公表しない病院の診療報酬は17年度から減らし、公表する病院の報酬増額に回すそうです。

新聞を読んで

日頃、病院のホームページを運営していて、患者は以外とホームページを見ていることを感じます。
保守を行っている病院のアクセス数を見ると、多いところで月に閲覧ページ数…約20万ページ、訪問数…約7万回という非常に大きな結果も残っています。(2015年8月)

現状でも患者が病院を選ぶ際にホームページを参考にしていることが伺えるので、実績を開示し、患者に病院の選択を促すようになれば、さらにホームページへの注目度が増すのではないでしょうか。

【制作事例】サイトのスマホ対応

東京西徳洲会病院様の看護部サイトがスマホ対応になりました!

【東京西徳洲会病院 看護部サイト】
http://www.tokyonishi-nurse.jp/

スクリーンショット 2016-01-21 14.37.13

ウェブフォントを使用して各デバイスから見やすいデザインに

元々は画像になっていた見出し部分をウェブフォントに置き換えることにより、
スマホからでも見やすいレイアウトになりました。
▼「最新鋭の医療機器を導入し〜」の部分がウェブフォント。
サイトの雰囲気に合うように、丸みのあるフォントを使用しています。

スクリーンショット 2016-01-21 14.37.28

ウェブフォントとは

通常ならCSSでフォント名を指定しますが、閲覧者の環境にそのフォントがインストールされていなければデフォルトフォントで表示されてしまいます。
そこで便利なのが、CSS3から使用できるようになったウェブフォントです。ウェブフォントは、ブラウザがフォントファイルをダウンロードして表示してくれるので、閲覧者の環境を問わずに好きなフォントを使用することができます。

今まで、フォントのデザインを気にして画像にしていた見出しやボタンも、デザイン性を保ったままhtmlにテキストとして記述できるため、何度も画像を作り直す必要がなくなり、制作工程を大幅に短縮することができます。

弊社ではFONTPLUS(フォントプラス)というサービスを利用して、日本語ウェブフォントを使用しています。
→FONTPLUS http://webfont.fontplus.jp

ウェブフォントを使用したサイト例

→茅ヶ崎徳洲会病院様 http://www.chigasakitokushukai.jp/

スクリーンショット 2016-01-21 15.10.27

→太田記念病院様 http://www.ota-hosp.or.jp/

スクリーンショット 2016-01-21 15.10.44

→寒川病院様 http://www.samukawabyouin.com/

スクリーンショット 2016-01-21 15.10.12

【制作事例】紀尾井町内科様 グラフィックデザイン

12月1日に、紀尾井町内科様の開院にあわせてホームページが公開されました。
今回は、弊社で制作させていただいた印刷物をご紹介いたします。

【紀尾井町内科様】
http://kioichonaika.jp/
web_img_kioicho

制作させていただいたものは、
・封筒2種
・折り込みチラシ
・3つ折りリーフレット
・名刺
・診察券
・病院カード
・名札
です!

gra_img_kioicho

和を基調とした美しい院内の雰囲気に合うように、紙質やフォントにもこだわりました。

3つ折りリーフレットには、生成りで温かみのある和紙のような紙を使用しています。
印刷物に使われている写真も、すべて弊社で撮影いたしました。

DSC_2782

左から、名刺、病院カード、診察券。
診察券はプラスチックカードになっています。

DSC_2719

このように、WEBサイトの制作と並行してグラフィックデザインもお引き受けできます。
また、チラシの折り込みやポスティングに関してのご相談も承っております。
ポスターやお薬袋やカルテなどのデザインも可能です!

グラフィックデザインでお悩みでしたら、是非一度お気軽にご相談くださいませ。

市村先生よりコメントをいただきました

すべて安心してお任せすることができました。デザインに関して信頼していたのでノーストレスでした。
ありがとうございます。

制作実績

→グラフィックデザイン

→ロゴデザイン

【制作事例】看護部サイト

茨城県にある筑波学園病院様の看護部サイトをリニューアル制作させていただきました。

「筑波学園病院 看護部」
http://nurse.gakuen-hospital.com/

tsukubakangobu01

 

こちらの病院では従業員満足度が非常に高く、
一度は出産のために退職されたナースさんが子育てを終えてまた戻ってこられることもあるのだとか。
子育て支援や教育システムなどハード面の充実ももちろんですが、
スタッフ同士で支えあいながら働けるという人間関係の良さがスタッフの満足度につながっているようです。

そんな働きやすさをもっと効果的にアピールしよう!ということで
各所に工夫を凝らしました。

 

まず注目していただきたいのが、トップページで素敵な笑顔を見せてくれているナースさんの写真。
こちらは実際に筑波学園病院様で働いているナースさんたちを撮影させていただきました。

リロードするたびに違うナースさんが出てきます。
その数は全部でなんと12種類!
下の写真はその中の一部です。(あとはぜひサイトで確認してみてください・笑)

tsukubakangobu02

トップページを表示するたびに色々な笑顔のナースさんが出てくるので、
それだけでグッと生き生きとした印象になりますよね。
実は、これだけの枚数が出てくるのにはもう一つ理由があります。

 

ナースさんに限った話ではないのですが、
サイトにスタッフさんの写真を使いたいと思っても、
スタッフさんからOKがいただけずにモデルさんや素材集を使用するということはけっこうあるんです。

今回は特にトップページという目立つ場所ですので、
やはりそういう場所に写真が載ってしまうのはちょっと……という声もあり、
最初はモデルさんを使って撮影するという案も出ていました。

モデルさんでも、工夫すれば自然な写真を撮ることは可能です。
ただ今回はアピールポイントに「人間関係の良さ」があるということもあり、
ナースさんが支えあって働いている雰囲気をダイレクトに伝えるには、
やはり実際のナースさんを撮影させていただきたかったんです。

 

なのでここはちょっと工夫しまして、
「写真は部署ごとに2名または3名ずつ、
ブラウザを更新するたび画像が変わるので自分だけがずっとトップページに表示されることはありません」
ということで、なんとかOKをいただきました。

素材集やモデルさんでは出せない、
あたたかみと表情のあるトップページになっていると思います。

 

ナースさんたちには看護部紹介動画にもご出演いただいています。

ナレーションもナースさんたちが実際に喋ってくれています。

2分弱という短い動画ですが、
ナースさんたちがイキイキと楽しく働いている雰囲気が伝わってきますね!

実際のスタッフさんを起用した撮影は、
全員の日程を合わせるのが大変だったり、
思うような表情がなかなか撮れなかったりと難しい面もあります。

ですが、病院の「表情」がダイレクトに伝わるという点で、
特にリクルートを目的とする場合には効果が高いと思います。

 

コンテンツにもたくさんナースさんの笑顔写真を使わせていただきました。
スマートフォンでの閲覧にも対応しています。

看護部の魅力が存分に伝わるサイトになっていると思いますので、
ぜひご覧になってくださいね。

 

「筑波学園病院 看護部」
http://nurse.gakuen-hospital.com/

【制作事例】タレントさんを起用した対談コンテンツ(平野レミさん)

今日はメディカルデザインが企画から参加させていただいている
対談コンテンツをご紹介したいと思います。

「yuichiroyazaki.jp 免疫力をあなどるな!」
http://yuichiroyazaki.jp

yuichiroyazaki

 

樹状細胞ワクチンというがんワクチン技術を開発しているテラ株式会社の社長であり、
もともとは医師でもある矢崎雄一郎さんのブランディングサイトです。

健康・免疫力・がん治療などのキーワードに関心のある方をターゲットに、
免疫力を切り口として幅広くヘルスケアの話題を発信することを目的としています。

 

矢崎社長は「免疫力をあなどるな!(リンク)」という本も書かれていて、
フレンドリーでお話もとってもわかりやすいのですが、
「医師」とか、「経営者」という肩書がついてしまうとどうしてもとっつきにくいイメージになってしまいます。

そこで、タレントさんや料理家の方などターゲット層に親しまれている方との
対談コンテンツにすることで、「やわらかく、わかりやすく」免疫力やがんについての
お話を発信できればというのがこの対談の目的です。

 

この対談コンテンツ、
メディカルデザインが対談相手の選定から対談テーマの企画、お相手へのアポイント、
当日のセッティングや撮影、
最終的にはテープ起こし・ライティング・ページ制作まで一貫して担当させていただいてます。

先日は、料理愛好家でシャンソン歌手の平野レミさんとの対談でした。

 

当日はカメラ映えを考えて、
テーブルの位置、イスの角度など細かいレイアウトまで撮影スタッフ本人がセッティングします。

対談内容に関しても、矢崎社長には事前に想定質問集などの資料をお渡しして、
イメージをふくらませていただきます。

 

img04-1
こちらの写真の、レミさんの後ろにぼんやり写っているモニターには、
実はレミさんのオフィシャルサイトが表示されています。

撮影をする際に、背景のないものばかりよりもちらっと背景が入るものが
あったほうがメリハリがつくということもありますが、
レミさんが入室されたときに「あら、私のサイトだわ」と思っていただけるかな?
という狙いもありました。

 

小さなことですが、お話していただく方にリラックスしてもらう工夫です。
この対談、レミさんの元気の秘密についてお聞きしよう!というテーマで
生活習慣や食生活についていろいろお聞きする予定だったのですが、
逆に矢崎社長がレミさんの質問攻めにあってしまいました(笑)

レミさんは細かいことは気にしない、自由でダイナミックな印象がありましたが、
ご家族の健康についてひとつひとつ真剣に質問するレミさんは、
良い意味で「普通の奥さんであり、お母さん」でした。

 

そういうわけで、少し予定とは違ってしまいましたが、
免疫力アップレシピは予定どおりたくさん教えていただいて、
かつレミさんのリアルな心配事を伺うことができまして、
なかなか味のある対談記事に仕上げることができました。

予定どおりにいかないところがこういう企画の面白いところですね。

 

この日は、ついうっかり口をすべらせてしまったレミさんが
「こんなの載せたら大変よね!ちょっとこれ内緒ね!」と
お茶目にフォローするハプニングもありました(笑)

(内緒なので、内容は書けません。ごめんなさい!)

対談では美味しい免疫力アップレシピもたくさん紹介していますので、ぜひご覧ください。

 

特別対談 料理愛好家・シャンソン歌手 平野レミさん
「パワーの秘密は夫にあり?”ゴックンして幸せ”で免疫力も美味しくアップ」

yuichiroyazaki_taidan
今まで平野レミさんを含め3名の方との対談に同席させていただきましたが、
みなさんひと目でわかるほどエネルギッシュなオーラがあります。

そして、そんなエネルギッシュな方々から口をそろえて
「お若い!」「ツヤツヤですね!」と褒められる矢崎社長もスゴイ……。

 

そんなエネルギーがぶつかりあう対談現場はポジティブな空気でいっぱいで、
このパワーを皆さんにお分けしたい!という気持ちで一同コンテンツを作っています。

対談が終わったあとは、なんだかスタッフもツヤツヤしています(笑)
これからももっともっと盛り上げていきたい企画ですね。

 

こちらの対談のような内容でしたら社内スタッフでテープ起こし・ライティングが可能ですし、
より専門的な内容の場合はその分野の専門ライターさんも手配しています。
タレントさんや各ジャンルの専門家の方へのアポイントも承っています。

「こんなこと、webの会社に頼んでもいいのかなぁ」ということでも
意外とさっくりお引き受けできることが多々ありますので、まずはご相談くださいね。

【制作事例】動物病院サイト・外来担当表CMS

千葉県内に3つの動物病院を展開する、
スマイルどうぶつ病院さんのWebサイトをリニューアル制作させていただきました。

スマイルどうぶつ病院
http://smile-vet.jp
web_img_smile-vet

3院で異なる病院情報をわかりやすくまとめられるようにと考えてフッターをデザインしました。
Webサイトのカラーに合わせてGoogle Mapのカスタマイズも行っています。
web_img_smile-vet2

制作後は、メディカルデザインで更新のサポートをさせていただくことはもちろん、
ブログや外来担当表など、院内から簡単に更新可能なCMSの導入も行っています。

スマイルどうぶつ病院さんのサイトでは、ブログはWordpressを導入し
外来担当表はご要望に合わせてオリジナルのものを作成いたしました。
web_img_smile-vet3

オリジナルのCMSについては、外来担当表のほか、休診情報ページや医療講演ページなど、
ご希望に合わせて作成可能です。過去のブログでもご紹介しています!
>>>どんなCMSがあると便利?

【制作事例】ペッサリー情報サイト

 
ふだん病院や、クリニックなどのホームページを作らせてもらうことが多い弊社ですが、
今回は少し珍しい事例で、医療器具(ペッサリー)の情報サイトを制作しました。

「知ろう!ペッサリーのこと」
http://pessary-info.jp
img_pessary

PC/スマートフォンに対応しています
 

ペッサリーと言うと一般的には避妊具のイメージがあるかもしれませんが、
現在の主な使われ方は、子宮脱などの骨盤臓器脱の治療です。

患者さまはもちろん、医療関係者にも
ペッサリー(およびリングペッサリー)について正しい知識と理解をもってもらえるよう
情報発信をしていきたい、という目的で
企画の初期段階からお話をいただき、
弊社で、わかりやすいサイトタイトルやドメイン名も提案させていただきました。
 

掲載されている情報はまだ多いとはいえませんが、
サイト公開後も、少しずつ追加更新しています。
スマートフォン版では
Sidr.jsというプラグインを利用して、
横からスライドしてくるメニューを作成しました。

img_sidr

Sidr.js は特に難しい設定もないので、
CSSをちょこっと上書きした程度で、基本的にはそのままで使用できました。

最新版(v1.2.1)は、Androidで「子要素の最初のリンクURLに勝手に遷移してしまう」
というバグがあるようで、
少し古いバージョン(v1.1.1)を使っています。
 

さくらインターネット環境のPHPからSSH2でアクセスするには

システム部の中村です。

遅くなりましたが、新年明けましておめでとうございます。

先日、実家で父がやっている内装屋の社員旅行があり、みんなでスカイツリーの久々に登ってきましたが、その時、赤坂方面見てみると、しっかり弊社が入っているアークヒルズフロントタワーが映ってました。

スカイツリーから六本木

いやー最近のカメラは性能上がる一方ですね

 

さてお得意様の案件で、

さくらのインターネットのライトプラン(レンタルプラン)で、PHPからSSHで他のサーバーに入り、各アカウントのディレクトリー容量等を定期的に調べないといけない案件の際、さくらインターネットでPHPからSSH接続する方法を記載します。

さくらインターネットさんのレンタルプランではPHPからSSH2関係のコマンドが使えないようになっています。

※ 要は phpinfoでSSHの項目が無い コンパイルされていないわけですね。

できないなら、php.iniで ssh2.so を 読み込めばいいじゃないか!

というわけで、

まずは、soファイル(共有ライブラリのファイル形式)を作ります。

tada,

SSH2のライブラリーをコンパイルするには、

libssh2 を準備しないといけません。

普通であれば、ソースをダウンロードして、”./configure  make make install”すればいいのですが、レンタルサーバー環境なのでもちろん /usr/sbinにアクセスできずコンパイル失敗となります。

なので、自分の領域にコンパイルします。

wget libssh2をダウンロード

tar で解凍

cd libssh2-1.4.3
./configure –prefix=/home/<USERNAME>/www/admin/libssh2/install
make
make install

これで、成功するはずです!

そのあと、同じ要領で、

wget ssh2をダウンロード

tar で解凍

cd ssh2-0.12

追記: phpize と打ち込みconfigure できるようにしてください。

./configure –prefix=/home/<USERNAME>/www/admin/libssh2/install/ –with-ssh2=/home/<USERNAME>/www/admin/libssh2/install/

make

make install  <=これは失敗します。コピー先がどうしても、/usr/sbin になるため

この段階で

ssh2.so が作られるので、

cp ssh2.so /home/<USERNAME>/www/admin/module/

のように適当な場所にコピーをして

PHPを動かす場所にphp.iniを設置し

error_reporting 8191
extension_dir=/home/<USERNAME>/www/admin/module/
extension = ssh2.so

としてやります。

すると、

phpinfo ssh

phpinfoで確認すると、SSHが動作することが確認できます。

soファイルで機能が使いできるので、いろいろ機能を増やしたり、することもこれで可能になるとは思います。

コンパイルできないレンタルサーバーでこれならかなり使い勝手がよくなるかな・・・