【ネットワークはじめの一歩】パケットとは何か

ずいぶん前から、携帯電話やスマホの広告で「パケット割引」という言葉が使われるようになり、「パケット」という言葉は大分一般に浸透していると思うのですが、その言葉の意味を理解している人の数は、とても少ないのではないでしょうか。

 

私はWEB制作の業界で働いているのですがその意味を知らず、ネットワークについて勉強を始めたところ、当たり前のように「パケット」という言葉が本の序盤に登場し、自分が時代についていけていないことをヒシヒシと感じました。そして、遅ればせながらパケットについて調べることにしました。

 

結論

パケットとは、
”末端から末端まで(大本の送信元から最終的な宛先まで)運ばれるデータの単位のこと”(出展:IT用語辞典
である。

 

どういうことか知るためには、ネットワークの歴史を知る必要があります。

 

回線交換方式

昔はコンピューターのネットワークでも、データのやり取りは、電話と同じ「回線交換方式」という方法で行っていたそうです。

これは、データのやり取りをする相手に対し一つの回線を用意し、別の相手とデータのやり取りをする場合は別の回線に切り替える、という方法です。

 

a

 

しかし回線交換方式は、
・データのやり取りをする間、回線をつなぎっぱなしにする必要がある
・複数の端末(相手)とつなげることができない
という欠点があったため、コンピューターのネットワークには不向きなものでした。

 

パケット交換方式

そこで回線交換方式に取って代わったのが、「パケット交換方式」です。
パケット交換方式は、データを分割して送信し、宛先に届いた時点でデータを組み立てなおす、という通信手段です。
この、データを分割したときに使われる単位が「パケット」というわけです。

 

b

 

パケット交換方式には
・データの送受信を断続的に行うので、機器同士をつなぎっぱなしにする必要がない
・同時に複数の端末とデータのやり取りができる(メールの送受信やWEB閲覧を同時に行える)
というメリットがあります。

 

こうして、コンピューターのネットワークでは、パケット交換方式で通信することが一般的になりました(逆に、パケット交換方式はパケット単位でデータを分割して送信するため、分かれたデータの到着タイミングがずれることがあり、電話には不向きだそうです。)。

 

自分が普段作っているホームページのデータは、こんな風に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があると便利?

【目指せ脱・カメラ初心者】一眼練習、始めました。 ~カメラ紹介② Nikon D800~

こんにちは、デザイナのTです。

前回のNikon D750紹介に引き続き、今回はNikon D800についてご紹介したいと思います。

Nikon D800の特徴

img_00

D800は、3台の中で最も高い画素数を誇ります。その数なんと3630万画素

WEB用だけで使うにはもったいないくらいの細やかさです。

パンフレットやポスターにも使える写真を撮りたい!という時に非常に重宝しそうですね。

Nikon D800で撮ってみる

img_01

弊社のオフィス、朝の風景です。

晴れた日にはおおきな窓のカーテンから陽が差し込み、なかなか心地が良いです。

さて、奥に観葉植物が見えますが、お気づきでしょうか。

この観葉植物の上部の二股部分にあるモノが潜んでいるのです。

D750で撮った写真を拡大して見てみましょう。

img_02

…んん?

茶色いなにかであることは判別できそうですが、

なんだかボンヤリしてよく分かりませんね。

ではお次にD800で撮った写真。

img_03

ステゴサウルスちゃん(?)でした!はっきりしていて分かりやすい!

そう、D800の画素数があればここまで拡大してもはっきりしているのです。

WEB素材としても、撮影した写真の一部をトリミングして使用するといったことができそうです。

Nikon D800 まとめ

弊社では近頃はWEBだけでなく、病院用の告知ポスターやチラシなどの制作にも取り組んでいます。

印刷用の写真撮影に十分な画素数をもつNikon D800。

きめ細やかな写真を撮りたい時に重宝しそうですね。

次回は、Nikon D4sについてご紹介したいと思います。

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

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

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

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

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

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

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

img_sidr

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

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

管理しやすい!使いやすい!フォーム設計の重要なポイント

 
img_01
こんにちは。デザイナのTです。この方は千葉西総合病院の井上様です。
こちらの井上様にはるばる弊社までご足労いただき、
お問い合わせ・採用フォームのシステムについての講義をしていただきました。

 
img_02

システム部、病院チーム総出で会議室はぎゅうぎゅう。ちなみに社内飲み会の時もこんな感じです。

 
さて、弊社でもほとんどのWEBサイトにフォームを取り入れておりますが、
そもそもフォームを取り入れることのメリットって何でしょうか?

・お客さん(ユーザー)が時間、場所を選ばずすぐに質問ができるという手軽さ
・受け手(管理者)がそれらの質問をパソコンにデータとして保存しておける確かさ

例えばこういった点が挙げられると思います。

もちろん、ただデータを溜めるだけでは何も進みません。
ここで重要になるのが、データの「管理法」と「操作法」です。

 

「管理法」データの共有

img_03
例えば、ある担当者のパソコンのメーラーだけで管理していた場合。
担当者が変わり今までのやりとりのデータがなくなってしまうと、
また一から同じ返答をしてもらわないといけない、ということになってしまいます。
容量も悪い上にユーザーにとっても面倒です。
img_04
しかしこのやりとりの履歴が共有のサーバにあれば、
誰でもログを確認できるので前後の流れを把握できる、ということですね。

 
img_05
また井上様曰く、病院宛てにくる問い合わせは何度も質問されるものが多いそうです。
通常勤務で忙しい先生方をその都度つかまえて答えを尋ねていたらキリがないですよね。
こうした時も、「以前同じような質問を受けた」という履歴が残っていれば
その時の対応に習って対応することができます。
ムだなやりとりをせずに済むので、ストレスも軽減されますね!

 

「操作法」データの扱い

前述の通り、病院の先生方は基本的にお忙しいので、
いかにデータを取り扱いやすくして素早く対応できるかも重要なポイントです。
img_08
例えばひとつの問い合わせに対し、以後のやりとりをスレッドで管理できると行動の流れがわかりやすくなります。
特に複数人で管理する場合は、一見で流れを把握させることが大事ですよね。
img_06
また、問い合わせに対してアクションを行ったかどうか、
確認が必要な場合などにメモを残すといった機能をつけることで、サーバ内でのやりとりだけで状況を共有することができます。
更に問い合わせの文章中のキーワードに対する解説を辞書機能として登録しておけば、
何度も尋ねられる質問に対してもすぐに回答することができます。

 

ついついフォームそのものの使いやすさにばかり注視してしまいがちですが、
それらのデータを管理する「ウラ側」のシステムの使いやすさの重要性について、認識を改めることができた講義でした。

貴重なお時間、ありがとうございました!

【制作事例】HTML5によるアニメーションとゲーム

昨年11月にJAセレサ川崎様のHPリニューアルの制作をさせていただきました。
PC/スマートフォンに対応しています。

セレサアニメ

http://www.jaceresa.or.jp/
PC版のトップページのメインビジュアルは
川崎の臨海部〜都市〜里山を気球でめぐる楽しいアニメーションになっています。
ポイントは多重スクロールによる奥行き感と、それがきちんとループでつながっている点です。
気球も動かせます!

 

また、せっかくリニューアルするなら、利用者が楽しめるようなコンテンツを作りたい、というご要望があったので
同じイラストを利用して、オリジナルゲームの制作をご提案しました。

game02_ol
「旬の野菜をキャッチ!GO!GO!CERESA!」
http://www.jaceresa.or.jp/game/

飛んでくる野菜を時間内にできるだけ多くキャッチする!という単純なゲームですが、
季節によって高得点のアイテムが変わったり、ハイスコアランキングがあったりします。
スマホ版もあるので遊んでみてください。

 

何年か前だと、Flashで制作するところですが、
HTML/CANVAS/Javascriptでの制作となるとちょっと手間がかかります。
最近は逆に、ホームページ内でこういったコンテンツを見かける機会が減ったかもしれないですね。

【目指せ脱・カメラ初心者】一眼練習、始めました。 ~カメラ紹介① Nikon D750~

こんにちは、デザイナのTです。

年が明けて早くも1ヶ月が経ってしまいました。

遅ればせながら、今年もよろしくお願いいたします。

さて、弊社には現在3台のカメラがあります。

複数名で撮影行くことがあったり、同じ日に別の撮影がカブっていたりするので

様々な条件によって使い分けているようです。

そこで、複数回にわたり、これらのカメラを簡単にご紹介していきたいと思います。

ちなみにご紹介するカメラのラインナップはこちら。

  • Nikon D750
  • Nikon D800
  • Nikon D4s

今回は、Nikon D750についてのご紹介をします。

Nikon D750の特徴

img_00

こちらのD750は3台の中でも比較的扱いやすい万能なカメラで、

私のような初心者でも、「シャッター切っときゃなんとかなる(by 社長)」写真を撮ることができます。

D750はアタマの回転が良いので、オート設定でも周囲の状況をサッと認知して

うま~い具合に光量やバランスを調整してくれるんですね。なので初心者にも優しいのです。

img_01

そして注目すべきはこの可動式液晶モニター。

モニターを動かすことができるので、ファインダーを覗かなくとも俯瞰やあおりの写真を自由に撮ることができます。

img_02

こんなかんじで撮っています。

Nikon D750で撮ってみる

せっかくなので、この可動式液晶モニターを活かして俯瞰やあおりの写真を撮ってみたいと思います。

まずは俯瞰の写真から。

img_03

弊社オフィスの様子です。

ふみ台不要でこの目線!広角レンズとの相性もバツグンです。

そしてお次はあおりの写真。

img_04

題して「ルンバの目線」です。

そびえたつ空気清浄機が帰路を邪魔しているのでしょうか。

お陰でここ最近、ルンバが帰還前に力尽きている光景をよく目にします。

img_05

あともうすこし・・・

Nikon D750 まとめ

可動式液晶モニターによって、目線を変えた写真を簡単に撮ることができるNikon D750。

迫力のある写真を撮りたい時に重宝しそうですね。

次回は、Nikon D800についてご紹介したいと思います。

【制作事例】研修医募集メッセージ動画

 

筑波学園病院 研修医募集サイト

recruit_gakuen
http://recruit.gakuen-hospital.com

弊社で制作させていただきました。PC/スマートフォンに対応しています。

研修医の募集に特化した独立サイトを作りたい、というご要望で
インタビューと動画を中心としたサイトをご提案させていただきました。

 

メッセージ動画は、最後まで見てもらえるように2分以内に収めていますが、
撮影はロケハンも含めて3回(延べ3日間)、病院にお伺いしました。

医師の先生方は、お忙しい中、こちらの注文にも快く応えて下さり、
気持ちの伝わる、熱いメッセージをいただくことができました。

DSC_9836

 

内容はある程度事前に決めていただいていましたが、
原稿どおりではなく、みなさん自分の言葉でその都度話してくださいましたので、
現場で内容や言い回しをディレクションしつつ、
今のテイクがOKかどうかについても素早い判断が必要になります。
かなり集中力が必要でした…。

DSC_9903

 

インタビューページのテキストについては、
アンケート形式の原稿を元に再構成して作成しました。
写真撮影も、デザイン案をiPadで確認していただきながら
こちらのイメージを伝えるなどして、ご協力いただきました。

 

スタッフの皆さんが本当に明るくて協力的だったので
撮影はとても楽しかったです。

筑波学園病院様は、今後も弊社制作のサイトの公開が控えていますのでご期待ください。

さくらインターネット環境の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ファイルで機能が使いできるので、いろいろ機能を増やしたり、することもこれで可能になるとは思います。

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

 

 

 

【目指せ脱・カメラ初心者】一眼練習、始めました。 ~カメラにもクリーン・ケアを~

 

こんにちは。
もはやイニシャルにする必要性がない気がしつつあるデザイナのTです。
 

突然ですが、皆さんはこんな経験ないでしょうか。
 
モデルさんを前に軽快にシャッターをきり、
モニタチェックしつつ覚えたての設定をこらしながら精一杯のデキそうな感を演出しているさなかに、
 

「レンズ、汚れてるよ」
 

とモデルの方に指摘されるという何とも初歩的なミスを…
 

ありませんか?
私は、ありまぁす。
 

しかし、今回はそんな状況を救ってくれる助っ人がおりました。
それがこちらのレンズクリーナーさんです。
 
img_00
 
片方がフサフサとした毛で、もう片方がゴム質になっています。
付いている汚れによって使い分けをするのですが、
このクリーナーでクルクルっとレンズをなぞると、簡単に汚れが取れるのです。
年の瀬の大掃除シーズンである今、
デスク回りはもちろん、使用している機材のクリーニングも併せて行っておきたいものですね。
 
img_01
 

さて、今回の記事で2014年の更新は最後となります。
「脱・カメラ初心者」と題して始めた記事ですが、
今年はどれだけ”脱”せたのか…レベル5くらいにはなったでしょうか?
来年も精進してまいりますので、何卒よろしくおねがいいたします。