Posts Tagged ‘web’

css-miami-desktop

どうもこんにちは!最近はとっても寒いですね。
しかも、新年からなんとなくイメチェンしたくて先輩のやってる美容室に行って
「なんか変わった感じにしてください」とお願いしたら、ものすごい刈上げをいただき、首元がスースーすごい!
第二次世界大戦時のドイツ男性みたいな髪型になりました。面白い!でも寒い!

近況報告はこのあたりにして・・・。

最近友人のホームページを製作中に、友人の提示するフォントをホームページ中に使って欲しいと言われました。
WEBフォントの事は大体知っていたので、「ああ、出来ると思うよ。出来る出来る。」と二つ返事で快諾したところまではよかったのですが。
もらったフォントはTTFファイルであるにも関わらず、ど~しても適用できない。
どこのリファレンスを見ても

@font-face{
  font-family:'testFont';
  src:url('FontFileName.ttf') format('truetype');
}

.test{
  font-family:testFont;
}

と書いたら適用できました!ワーイ!みたいな事が書いてあるのですが、自分のはそうはならない。
なんでー!!といろいろやりつつ結局ほぼ丸一日ハマってしまいました。(つらたん)

しかしとうとう、この問題を解決する事ができました。
問題はフォントファイルのタイプ、または状態にあったようです。

フォントファイルを変えて試してみようと思いたち、
こちらのサイトで変換しようとしてみたところ
this file is corruptedと(このファイルは腐ってる)言われてしまいました。
それで、こちらのサイトでTTFをWOFFに変換してみたところ、上手くいきました。

これを以って、

@font-face{
  font-family:'testFont';
  src:url('FontFileName.woff') format('woff');

.test{
  font-family:testFont;
}

と記述してみたところ、testクラスにフォントを適用することがようやく出来ました。
この状態でスマフォでサイトを確認してみると、フォントは適用されておらず(Sleipnir)、
改めてTTFをソースに追加しました。

@font-face{
    font-family:'testFont';
    src:url('FontFileName.woff') format('woff'), /* Modern Browsers */
    url('FontFileName.TTF')  format('truetype'); /* Safari, Android, iOS */
}

どうやら、.TTFファイルはiOSやAndroid、SafariでのWebfont適用を可能にし、
通常のモダンブラウザ(FF,Chrome)等で見るときは.WOFFという形式にしないといけないのではないのかな。と。

しかし僕の持っていたTTFフォントファイルはCorrupted認定されていた訳で、普通のTTFファイルなら問題なく表示出来ている物だったのかもしれません。

なにはともあれ、かくしてホームページに目的のフォントをスマフォ、PCのブラウザ両方に適用する事ができました。
この問題解決のいとぐちはこちらのWebparkさまから頂きました。
感謝いたします。

ここまで読んで頂いてありがとうございました。

では、また!

photo by: geirarne
3744953433_e3b523e24d_b

サーバーにウェブカメラを設置してみた。

使ったカメラだが、UVC(USB Video Device Class)に対応していればどれでも良い感じ。

ウェブカメラソフトは複数あるようだが、今回は「Motion」を使ってみた。

こいつは単体で動くのでWebサーバーとあわせて運用する必要がないのが素敵(?)

それと名前の通りモーションセンサー(動体検知)機能を備えており、監視カメラとして優秀かと。

という事でまずはインストール。ちなみにUbuntu環境です。


sudo apt-get install motion

でインストールが終わったらdaemonとして起動するために設定ファイルをいじる


sudo vim /etc/motion/motion.conf

で設定ファイルを開きdaemonの項目をonに書き換える。

その他コンフィグの説明

process_id_fileは一時ファイルの置き場所(適当でOK) デフォルトは/tmp/motion/motion.pid

width heightはwebcameraの解像度に合わせた設定をしないと表示しなくなるので注意

デフォルトはwidth:320 height:240 あんまり試行してないけどこの値の倍数なら大丈夫ぽい。

thresholdは動体検知の感度。

ffmpeg_video_codec は mpeg4にすると良い

locateは動体を検知した部分に枠を表示するかどうか

target_dir は動体検知が起動した際に確保した部分動画が保存されたりスナップショットが保存されたりする。

webcam_localhost はこれがONの場合同じネットワーク内からしかカメラの映像を見れないのでOFFにする事で外部に公開できる。

control_authentication 上の項目にあわせて、id:passという書式で記入しておくと管理画面にアクセスする際のIDとPASSを設定できる。

snapshot_interval はスナップショットを定時で撮る事ができる。単位は秒で0で機能をOFFにできる。

いちおう自分がいじってる設定は上に書いたくらい。

準備ができたら起動


sudo motion

これでブラウザのアドレス欄に

http://localhost:8081
でカメラの映像が見れる

http://localhost:8080
で設定画面に入れる。この時上のcontrol_authenticationで設定したIDとPASSを使用して入る

外部ネットワークからアクセスする際はlocalhostの部分をドメイン名に変更すればOK

最近はわざわざパソコンを使ったサーバーなんて立てなくても、ラズベリーパイをはじめとしたシングルボードコンピューターで、電源とWifi環境さえあれば簡単かつ柔軟に監視カメラシステムを設置できるようになりましたね。

そのあたり、国内ではRSコンポーネンツが最も買い求めやすいと思います。たまに◯万円以上の電子デバイスをお買い上げの方にラズベリーパイをプレゼントなんていう企画もしているみたいなので、電子工作をしている方などはこまめにチェックしてみると良いとおもいます。

Linuxが動くシングルボードコンピューターなら低消費電力で各種サーバーとして使えますので、うちではNASの自動バックアップサーバーとして活躍してくれています。
定時に圧縮ファイルを作成してバックアップするようにした。その注意点 » WisdomTrees

シングルボードコンピューターはぜひ一台、Linuxサーバー用として手に入れてみられることをおすすめします。

追記:2013/08/12
このページが更に参考になりそうだったのでメモ
http://teppei.hateblo.jp/entry/2013/08/10/114147