2017年8月

CSS

CSSだけで動かしてみよう!メッセージアプリのようなチャットUI

作るもの 今回は、JavaScriptやjQueryは使用せず、CSSのみでLINEやSkypeのようなメッセージが自動的に動くものを作ってみたいと思います。 最終形態はこちらです。 デモページはこちら(http://sample.creativeflake.com/blog/chatui.html) 事前準備 今回使用するCSSは動作のためのキーフレーム @keyframes そして、CSSで変数を利用する var() の2つがポイントとなります。 CSS Variablesのブラウザ対応状況 後者の変数ですが、CSSで利用するにはまだ開発中の機能であり、どのブラウザでも使えるとは限りません。 また開発に伴い、構文と挙動について、仕様変更の可能性もありますので、導入の際は注意してください。 CSS Variablesの、主要各ブラウザは下記のとおり、緑の箇所のバージョンが対応しています。 (2017年8月時点) FirefoxやSafari、Chrome等のPCブラウザ、スマホブラウザでもiOS Safari、Android対応しています。 *現時点でIEは非対応、Edgeも非推奨なので、使用する際は要注意です。 参考: http://caniuse.com/ HTMLを作っていこう HTMLには、枠とメッセージを組み込みます。

特に気にすることなく、枠とメッセージ本文を書いていけばOKです。 ここで、それぞれのメッセージには、ID名をつけてあげましょう。 クラス名のmsg-receiveとmsg-sendは、スタイルシート用の色分けです。 CSSを書いてみよう 下記がCSS全文です。 長いですが、解説はCSSの下のとおりです。

ルート :root と変数 1行目 :root 疑似要素は、タグと同じことを意味しています。 タグよりも上位(親、外側)の要素です。 2行目〜9行目 –(ハイフン2つ)は変数を表します。 たとえば、–msg-content-height: 510px; は変数名「msg-content-height」は510pxだということを、 変数名「msg-spacing」は30pxだということを表しています。 変数の名称は一般には、好きな名前をつけることができます。 ここでは、rootに対してそれぞれの変数を定義しているので、このWebページ内の任意の場所で、宣言した変数を呼び出すことができるようになりました。 アニメーションの基本設定 12行目〜40行目 *クラス名 msg-send と クラス名 msg-receive の装飾に関する部分は省略します。 […]

セキュリティ

【マルウェア図鑑】アップデートで姿を変える変化系アプリBankBot

Android端末を狙ったマルウェアは多く存在し、知らない間にダウンロード・インストールされ、被害に遭っていたということも少なくなくなりました。 今回は、「ちゃんとした」正規のアプリだったのに、知らぬ間に情報を盗み取る悪意のあるアプリへと変化するケースを紹介したいと思います。 BankBot(バンクボット) 種類 : トロイの木馬 標的 : 主にAndroid BankBotの仕組み 「BankBot(バンクボット)」は、インターネットバンキング(ネットバンク)をターゲットとしたトロイの木馬です。 主にGoogle Play経由で配信される正規のAndroidアプリとして配信され、アプリの内容はビデオストリーミングアプリやゲームアプリなど、何の問題もなさそうなアプリとして配信されています。 問題はこの次のステップで、これらのアプリをアップデートさせるタイミングで、BankBotのマルウェアモジュールを組み込みます。 ここでアプリがトロイの木馬にとなり、インストールされたスマートフォンなどの端末から、個人情報やパスワードなどを盗み取ります。 さらに攻撃者はこの個人情報を利用し、ネットバンクにアクセスして不正送金などを行います。 BankBotが怖いのは、「正規のアプリ」だから このような仕組みで配布されるアプリは20種類以上から確認されています。 Google Playの正規のマーケットを通じて配布されることで、ユーザーは警戒することなくアプリをダウンロードしてしまう恐れがあります。 「盗み」と「送金」は別々に行われる! また、トロイの木馬と化したアプリを通じて情報を盗み取ることと、ネットバンクへの不正アクセスを別々の操作で行うことで、ユーザーに怪しまれることや気付かれることもなく、不正送金が行われてしまうという仕組みです。 従来のマルウェアは元からマルウェアモジュールを含むアプリとして、Google Playにアップロードしていましたが、Googleによるセキュリティの強化により、アップロードができなくなった背景があることで、まずは無害の正規のアプリとしてマーケットへアップロードし、更新のタイミングでマルウェアを組み込む手続きをとるようになった。 ダウンロードするときに気をつけたい点と対策 現在大半のアプリはGoogle Playから削除されているもの、一部のアプリが残っているとみられるため、アプリダウンロードの際はレビューや配布元を確認する等で注意したい。

ハードウェア

手遊び対策にぴったりなFIDGET TOYを買って使ってみました

最近話題のFIDGET TOY FIDGET TOY(フィジェット トイ)は、手持ち無沙汰なときや、落ち着かなくてソワソワするとき、ストレスでイライラしたとき、手遊び代わりにいじって遊ぶおもちゃです、 海外では数年前から流行り始め、日本でもここ最近はフィジェットスピナーなんかも人気ですよね。 フィジェットスピナーは円盤状の形をした、ひたすらぐるぐる回るのを眺めるアレです。 さまざまなお店でも取り扱うようになり、巷でも見かけることが多くなりました。 今回は中国製パクリを購入 前々から気になってはいたのですが、本家の製品はたしか10ドル以上した気がします。 1年前くらいにクラウドファンディングのサイトで見かけたときは、10ドル……つまり1000円以上で、高いなという感想でした。 そこでさすが中国、あっという間に形そっくりなものを作成してしまったので、今回はAliexpressさんで約1ドルで購入しました。 しかも送料込み。 おおよそ1週間ほどでメール便にて到着。 箱はボッコボコでしたが、中身は問題ないのでOK。 (だいたい、中国からのお買い物はこんなもんです。) 指先サイズでかなりコンパクト 大きさはポケットにも入るサイズなので、どこにでも持っていくことができます。 写真には撮ってませんでしたが、ストラップが付属していて、スマホやバッグにも付けられたり、 手首にかけて使うと落下防止にもなりそうです。 6面すべて遊べる! このおもちゃの特徴は6面すべてで遊べるので、その時の気分によって、どの面で遊ぶか選べるのがいいところ。 附属の説明書と感想。 Breath すべすべした面。 機能はとにかく「すべすべして気持ちいい!!」 この手触り感で、イライラしてたこともどうでもよくなりそう。 Roll よくあるロッカーのダイヤルと、よくわからないけど回るもの。 金属の回るやつのは結構楽しい。 Spin ぐるぐる回してDJ気分。 中国品だからか、スムーズに回転しないの難点だった。。 Click 個人的に1番のおすすめ。 とにかく押し心地が最高。 エンドレスにカチカチできるので、シャーペンの芯をカチカチやるのが好きな人はきっとハマると思う。 Glide いわゆるジョイスティック。 プレステのコントローラーとかについているあれです。 こちらも滑りが悪めでした。 Flip 電気のスイッチのあれ!! オンオフを無限にできるって最高。 そもそもの目的は発達障害や自閉症の指遊びだった 今や大人が楽しくストレス発散できるFIDGET TOYですが、この本家開発者のサイトでは、 発達障害や自閉症の方のそわそわした感じや、落ち着かない感じの対策として開発されたものだったと書いてあった。 そういった方は少ないかもしれないけど、実際自分も何かの考えに集中すると落ち着かなくなることが多く、 長いこと対策を考えてきたこともあった。 こんな小さなキューブがストレスや不安を吸収してくれるなんて考えると、たいしたものです。

Python

【無料テキスト公開】Pythonプログラミング研修 第1回

概要 今回学習する内容は以下のとおりです。 言語紹介 コマンド 変数と型 String Pythonの紹介 バージョン Python  - 12/1989 Python 2 – 10/2000 2.6 / 2.7 Python 3 – 12/2008 互換性がない 特徴 読みやすい { } ; ではなく スペース と タブ 関数型、構造型、オブジェクト指向、など インタープリター言語 (例えば:perl, php など) Pythonこんな事ができる Script Notebook アプリケーション モバイルアプリ (android/iOS) Webサーバー / CGI (uWSGI) アプリケーションの例 Scriptの例 Notebookの例 アプリケーションの例 Python コマンド インタープリター言語 =プログラムの上に走る言語 Windowsの場合 […]