ばらまき型メールに注意 Message from "RNP0026738E40D2" 傾向と対策
注文連絡を添付ファイル付きメールで受け取ったことはありますか？このようなこと業務においては日常茶飯事でありますね。
では、注文連絡をしてきた会社は実在する会社でしょうか。Webで調べてみましょう。お、ちゃんとしたした会社のようだ。今まで聞いたことが無かったが注文してきてくれてありがたい。そう思って添付ファイルを開く。これは非常に危険な行為です。しかし、このような行動をとる方は多いのではないでしょうか。
ばらまき型メールに要注意
なぜ危険なのか。これは実在する会社から発信したことを装って宛先にメールされた可能性があるからです。題目にも本文にも不審な点はないからと言って事前連絡も無しに送られてきた添付ファイルを開いてはいけません。
開くとどうなるの
添付ファイルを開くと仕掛けられていたマクロが起動しウイルスをインターネットからダウンロードし実行いわゆる感染をさせます。または、添付ファイルを開きマクロを有効にするをクリックするとウイルスに感染してしまいます。
「マクロを無効にする」の設定をしていると感染までにワンステップあります。しかし、「マクロを常時有効にする」設定をしている方は要注意です。添付ファイルを開いた瞬間にマクロが起動して感染してしまうからです。
ちなみにマクロの説明をマイクロソフトは次のようにしています。
マクロとは何か、だれが作成するのか、どのようなセキュリティ リスクがあるか
マクロは頻繁に行うタスクを自動化し、キー入力やマウス操作の時間を短縮します。マクロの多くは、ソフトウェア開発者が Visual Basic for Applications (VBA) を使って作成します。ただし、マクロの中には、セキュリティ上の問題を引き起こす可能性があるものもあります。悪意のあるユーザー (ハッカーとも呼ばれます) がファイルに有害なマクロを組み込んで、コンピューターや組織のネットワークをウイルスに感染させることも考えられます。
引用：Office ドキュメントのマクロを有効または無効にする - Office サポート
要はプログラムってことですね。ファイルに組み込むことが出来ます。
どんな種類の添付ファイルに注意すべきか
では、メールに添付されてくるファイルとは実際にどのようなファイルなのでしょうか。これは、マクロを実行させることが出来るファイルです。マクロを実行できるファイルは次のとおりです。マイクロソフト系のファイルですね。かなりの種類があります。
・Microsoft Excel
・Microsoft Word
・Microsoft Outlook
・Microsoft PowerPoint
・Microsoft Access
・Microsoft Visio
どんな内容のメールに注意すべきか
それでは、メールの内容はどのようなものがあるのでしょうか。代表的なタイトルを紹介します。次のようなタイトルでメールが来たら警戒しましょう。
・【実在の組織名】ご注文ありがとうございました－添付ファイルを必ずご確認ください
・Message from "RNP0026738E40D2"
・タンケンー請求書(小)の件です。
・請求書
・ファックス受信完了: Fax Received
・（実在の組織名）様宛請求書をお送りします
対策
マクロの設定の見直し
まずはマクロの設定を見直しましょう。マクロの設定は4とおりあります。見てみましょう。
１．警告を表示せずにすべてのマクロを無効にする
オススメ度△：安全ですが少々使いづらいのではないでしょうか。
２．警告を表示してすべてのマクロを無効にする
オススメ度△：こちらも同様に安全ですが少々使いづらいのではないでしょうか。
３．デジタル署名されたマクロを除き、すべてのマクロを無効にする
オススメ度〇：デフォルトでの設定です。この設定のままにするのがオススメです。
４．すべてのマクロを有効にする
オススメ度×：ダメです。ファイルを開いた瞬間に勝手にマクロが実行されてしまいます。
電話で確認
さて、マクロの設定はしました。他に対策できることはあるでしょうか。少々アナログになりますが、発信元に実際に電話でもしてみて確認するのが確実でしょう。信頼できる場合でない限り、ファイルを開いてマクロを有効にするための「コンテンツの有効化」ボタンを押下しないことが重要です。
ネットワーク接続のない環境で開いてみる
それでも確認できない場合。ウイルス感染の影響がない環境で添付ファイルを開いてみるのも一つの手です。有線LANまたは無線LANから切り離してファイルを開いてみましょう。これはあまりオススメしません。もしこれで感染してしまった場合、OS再インストールして復旧というのがセオリーになります。ですので、大変ですよね。
もし開いてしまったら
LANケーブルを抜きましょう。無線LANの場合は機能OFFにしてネットワークを切断してください。その後、確認のためにセキュリティソフトで端末をスキャンしてみましょう。余裕があれば、通信ログを確認してみてもいいかもしれません。
いかがでしたしょうか。あなたのところにも不審なメールが来た事がありますか？ちょっとしたことを知っているだけ安全に過ごすことが出来ますね。
気づかぬうちにターゲットに！不正アクセス対象を絞る手法とその対策
情報資産に損害を与える攻撃者。彼らはどのようにして攻撃対象を選択するのでしょうか。それは次のような手法を用います。
不正アクセスを行う対象を絞る手法
・ポートスキャン
・アドレススキャン
・バナー・チェック
・スタックフィンガープリンティング
これらは不正アクセスのためにあるわけではありません。しかし、不正アクセスに利用されてしまっているというのが現状です。攻撃者はこれらのツールを駆使して脆弱性を探します。詳しく見ていきましょう。
・ポートスキャン
その名のとおりポートをスキャンします。すべてのポートをスキャンして通信に利用可能なポートを探します。空いてるポートとか不正利用可能なポートを探せるんですね。ただこれはあらかじめアドレスがわかってないと出来ないことですよね。ウィキペディアで概要を見てみましょう。
ポートとは、インターネットで現在普遍的に使われている通信プロトコルであるTCPおよびUDPに用いられる、0～65535までの番号が振られた仮想的な情報の送受信口である。 通信の目的によって、利用されるポートは決まっている。
例えば、ウェブサイトの閲覧では、パソコンとサーバはPort80で情報をやりとりしている。また、POP3で電子メールを受信する際にはPort110が用いられ、SMTPによるメールの送信にはPort25とが用いられている。
一方で、用いられていないポート番号もあるし、ソフトウェア開発者が勝手気ままに使っているポートも存在している。そのポートで送受信を行うプログラムに欠陥があるために、コンピュータセキュリティ上の危険性をはらんでいるポートも存在する。
これら多種多様なポートが通信可能な状態にあるかどうかを外部から調べるのが、いわゆる「ポートスキャン」と呼ばれる操作である。
引用：ポートスキャン - Wikipedia
このポートスキャンのツールとして有名なものにNmapがあります。このツールは映画でハッキングのシーンなどにも用いられるほど一般的なものらしいです。私は使用したことはありません。
・アドレススキャン
ポートスキャンと似ています。ポートがアドレスに変わっただけです。あちこちにpingを打ちまくり返答のあったアドレスを狙います。打ちまくるにも限度があるので、ある程度アドレスがわかっているときに使用するそうです。
・スタックフィンガープリンティング
ポートスキャンの際に、サーバーのOSを推測することです。サーバが返答してくれる情報には「サーバのOS情報」が含まれます。この「サーバのOS情報」を利用して特定サーバーの穴を見つけていきます。
・バナー・チェック
この場合のバナーとは、サーバー上で利用されている「アプリケーションの名称」および「バージョン番号」のことを言います。ポートスキャンの際に、サーバーが返答してくれる情報にはこの「アプリケーションの名称」および「バージョン番号」が含まれます。
この二つの情報をチェックすることを「バナー・チェック」と言います。こうして「バナー・チェック」で情報を知られてしまうと、バージョン特有のセキュリティホールなどがある場合にピンポイントで突かれてしまうことが考えられます。
応答メッセージを見る簡単な方法としてWindows標準搭載のコマンドがあります。
telnet host_name port_no
上記のtelnetコマンドをコマンドプロンプトに入力してみてください。host_nameはホスト名。port_noはポート番号をそれぞれ入力してください。
どう対策したらいいか
不正アクセスを行う対象を絞る方法として４つほどあげました。これらの手法でターゲットにされないように、みなさん対策はされていましたでしょうか。対策って何をすればいいのかわからない、そういった方もいたことでしょう。そこで、どう対策すればいいかを簡単に確認できるツールをご紹介します。
セキュリティ・スキャナ
セキュリティ・スキャナと呼ばれるツールはたくさんあります。これらのツールは多少の違いはあれど本質的な目的は同じものです。本質的な目的とは脆弱性のチェックおよび保護です。もちろん、今まであげてきた「不正アクセスの対象になるおそれがあるか」の観点も含めて脆弱性をチェックまたは保護してくれます。
それでは、セキュリティ・スキャナの中で今回は3つほどオススメのツールを紹介します。
・Microsoft Security Essentials
Googleアナリティクスを確認する限り、読者にはWindowsユーザーが多いようです。ですので、まずはWindows用のセキュリティ・スキャナをあげました。このツールはWindows7、Vista用のものです。8系、10は使用できませんのであしからず。大丈夫、8系、10の方には他のツールがありますよ。
・Windows Defender
8系、10用のセキュリティ・スキャナはこちらです。こちらは標準搭載されていますのでインストールの必要はありません。マカフィーを入れると共存出来ないので自動で停止します。というかマカフィーに止められます。どちらが良いかはその人次第といったところでしょうか。私はWindows Defenderの方が動作が軽くて好きです。
・skipfish
こちらはWEBアプリケーションに特化したセキュリティ・スキャナです。Windowsはもちろんのこと、Mac、Linux系でも動作します。すごいですね。開発したのはGoogleでオープンソースになっていますので無料で使用することができます。
いかがでしたでしょうか。セキュリティ対策なんて何をしたらいいかサッパリわからない。そんな方でもこの記事を見れば何となくわかったのではないでしょうか。何となくわかったら実際に試してみると良いかと思います。ちょうどコマンドやツールも紹介しましたのでインストールしてみてください。実際に試してみるとガンガン身に付いていきますよ。
Windows10 新機能・評判は？使いやすいしアップグレードすべき！
昨年の2015年7月29日から1年間限定でWindows10への無償アップグレードが出来ます。しかし、2016年5月の段階でこのWindows10のシェアは15％程度のようです。これは日本全国のWindowsユーザー内でのシェアです。
普及しないのはなぜ
シェアトップはWindows7で未だに50％程度あるようです。Windows10の15％程度のシェアというのは第二位です。次いでWindows8系のOSがきています。無償アップデートの開始からすでに10か月程度経過していますがなぜWindows10は普及しないのでしょうか。
さらに無償アップデートが終了する2015年7月30日以降はWindows10へアップデートするのに結構なお金がかかります。Windows10「Home」エディションを入手するのに119ドル、Windows10「Pro」バージョンの場合は199ドルが必要になるのです。
しかもWindows10へのアップデートは非常に簡単です。放っておけばWindows10になっていることでしょう。なぜならばMicrosoftがWindows Updateの「自動更新」で配布をしているからです。こういったことから、現状でWindows10でないWindowsユーザーは意図的にWindows10への移行を拒否していることが伺えます。
完全にマルウェア扱い
なぜなのかインターネットで調査してみました。すると完全にマルウェア扱いされているようです。（マルウェアとは悪意のあるソフトウェアという意味です。）これはMicrosoftが自動更新による配布をしたのが主な原因のようです。実際にマルウェア扱いされている事例をご紹介します。
どちらに転んでもアップデート
なんでも、無償配布終了2か月前となった現在では次のようなポップが出るそうです。
MicrosoftではWindows10へのアップグレードをお勧めしています。
「今すぐアップグレード」 「ダウンロードを開始し、後でアップグレード」
かぎかっこで記載した部分はボタンになります。これでアップグレードするより他はないという状況がいかにもマルウェアっぽくはあります。
NGO団体が声明
また、NGO団体が自動更新によるアップデートが行われそうになったことで安全が脅かされたと発表しています。
なんでもアフリカでは通信インフラが整備されていないので衛星通信を使用している。そのため、通信料金が非常に高価になるとのこと。今回は自動更新に気付き途中で中止したのでことなきを得た。しかしもし、ダウンロードが完了していれば通信料は8万7000ドルに上っていたという試算もあるんだそうです。
さらに、武装した密猟者に応戦している最中に更新が始まったら非常に危険だとのことです。衛星通信で通信料金高いなら元から自動更新切っておけばいいのにと思ってしまいます。が、リスクの大きさとして主張せずにはいられなかったのかもしれませんね。
実際はどうなのか
さて、そんなマルウェア扱いされているWindows10ですが実際の機能はどうなのでしょうか。Microsoftのまわしものではありませんが公式サイトから新機能をご紹介します。
使いやすさはそのままに、さらにパワーアップ
スタート メニュー
重要な機能やデータにすばやくアクセスできます。
高速起動
Hyperboot と InstantGo によって起動と再開を高速化します。
アプリのピン留め
お気に入りのアプリをタスク バーにピン留めできます。
カスタマイズ
好みに合わせて、さまざまな方法でカスタマイズできます。
セキュリティの強化
強固なセキュリティを搭載しています。互換性にも優れ、お手持ちの周辺機器を活用できます。
あなたに合わせて、もっと自然に
Cortana
さまざまな支援をしてくれる、あなただけのデジタル アシスタントです。
Windows Hello
PC のカメラによる顔認証や、指紋認証により安全にログインでき、パスワードが不要になります。
OneDrive を標準搭載
クラウドにドキュメントや写真を保存して、エクスプローラーから直接簡単にアクセスできます。
目的に合わせてデバイスを使い分けられる
Continuum (コンティニュアム)
デスクトップ モードとタブレット モードをすばやく簡単に切り替えることができます。
ゲームに最適
Xbox アプリを標準搭載し、美しいグラフィックスで人気のゲームをお楽しみいただけます。
いつでも最新の機能
自動更新により、常に最新の機能とセキュリティをご利用いただけます。
やりたい事を、すばやく、効率よく
Microsoft Edge
Web 上でより多くのことが行える、新しいブラウザーです。
マルチタスク
仮想デスクトップの作成や、開いているアプリを一覧で表示することできます。
Windows ストア
充実したアプリやゲームに加えて、新たに音楽、映画、テレビ番組もラインナップされました。
なにやら沢山の機能が追加されたようですね。
まとめ
私はすでにWindows10へ移行しました。使いごこちは良好です。何が使いやすいかって、Windows7のころの操作感に戻ったのが良いですね。8系を使用していてタイルのみのトップページが非常に使いづらいと感じていたので。
また、Windows7のときに透き通っていたデザインがフラットなデザインになりました。これはこれで安心感があって私は良いと思います。しかも透き通したりするデザインチックな部分がないからか動作が軽いです。
ということで、Windows10 めっちゃ使いやすいのでオススメですよ。
- 作者:タトラエディット
- 出版社/メーカー: ソーテック社
- 発売日: 2015/07/29
- メディア: 単行本
【解説】情報セキュリティの基本 ３大要素 / ６大要素 / ７大要素
情報セキュリティとは情報資産を正常に維持することです。情報資産を適切に安心して使用できるようにこの「情報セキュリティ」は考えられました。では、正常に維持できる・安心して使用できるという状況はどのような状況なのでしょうか。
それは、次の３つの要素を満たしている状況です。
情報セキュリティの３大要素
１．機密性（Confidentiality）
２．完全性（Integrity）
３．可用性（Availability）
これらの定義は、1989年に国際的な機構によって制定されました。情報資産を安心して使用できるような状態にするには、この要素を維持管理していくことが必要になります。
詳しく見ていきましょう。
１．機密性（Confidentiality）
アクセスを許可されたものだけが情報資産にアクセスできるようになっているということです。これには情報資産へのアクセス権限を制御する必要があります。機密性が保たれていないと、情報が漏えいしたりします。例：アクセス制御、パスワード認証、暗号化、入退室管理
２．完全性（Integrity）
情報資産が変化せずに完全に保たれていることです。要は情報資産を改ざんされたりすることがないということです。完全性が保たれていないと、情報としての信頼性を欠くことになります。情報資産が第三者に改ざんされることや、虚偽のデータを作成されたりすることが考えられます。例：デジタル署名、メッセージダイジェストによる改ざん防止
３．可用性（Availability）
情報資産にアクセスしたいときにアクセスできる状態のことです。可用性が保たれていないと、Webサービスなどが通常通りに使用できなかったりします。例：ネットワークやシステムの二重化、ホットスタンバイ、UPS、RAID、負荷分散装置、クラスタリング構成
いかがでしたでしょうか。セキュリティの基本が制定されたのが1989年、割と最近ですよね。そして時は流れITも進化していく過程で、これでは足りないと詳しい方々は思ったのでしょう。1996年、国際的な機構は上記要素にさらに３つの要素を加えました。
情報セキュリティの６大要素
４．真正性 (authenticity)
５．責任追跡性 (accountability)
６．信頼性 (reliability)
詳しく見ていきましょう。
４．真正性 (authenticity)
利用者やシステムの振る舞いが明確であること。なりすましでないことを証明できること。偽情報でないことを証明できること。例：デジタル署名、パスワード認証
５．責任追跡性 (accountability)
利用者やシステムの振る舞いが説明できること。利用者やシステムの責任を説明できること。例：アクセスログの記録、デジタル署名による否認防止
６．信頼性 (reliability)
システムやプロセスが矛盾なく動作すること、一貫して動作すること。例：ネットワークやシステムの二重化、さーなばルーム環境による安定稼働、負荷に耐えられる設計
意図した動作及び結果に一致する特性
そして、さらに2006年に一つの要素が加わりました。
情報セキュリティの７大要素
７．否認防止 (non-repudiation)
ある活動又は事象が起きたことを、後になって否認されないように証明すること。
以上が2016年までに制定されている情報セキュリティの要素です。インターネット上での情報資産管理はもはや当たり前の時代となりました。それに伴い、これらの情報セキュリティに関する知識は誰しもが必要とされる時代です。専門外だからと敬遠せずに一緒に学んでいきましょう！
転職が怖い人必見【思想の転換】最終面接におっさんナンパしにいく
明日は転職の最終面接だ。最終面接はこれまでの転職活動で二回目だ。前回の最終面接では受けた企業が大企業ということもあってテンパってヘンテコリンな回答を重ね見事に不採用となってしまった。今回はその反省を生かして、少なくともヘンテコリンな回答はしないように心掛ける。
転職面接が怖い
しかし、ヘンテコリンな回答をしないようにしようという、ある意味で受動的な考え方だととても不安になる。なぜならば、相手の出方を伺って回答しなければならないからだ。相手が人間である以上、何を言ってくるかわからない。転職面接の場合、大体何を聞かれるかの予想はつくがそれでも不安だ。
そこで、能動的に面接に参加すれば相手に左右されずに安心できるのではないかと思った。そうだ、ナンパだと思おう。おっさんをナンパしに行くんだ。私の大得意なナンパだ。ナンパは受動的には始まらない。絶対的な積極性から行動することで初めてスタートラインに立てるのだ。そして、相手にどれだけの納得感を積み重ねさせるか、それが性こ成功への大きなポイントとなる。
転職面接はナンパだ
そう考えると、転職活動はナンパに実によく似ている。企業は能動的な人物を欲しがる。しかし、なぜだろうか企業はナンパが得意な人を良しとしない。私は新人研修のときにナンパしまくってたら会社に怒られた経験がある。企業が世間体を考えてのことだろうが、これは是正されるべきだ。
ナンパが得意ということは積極性・論理的思考・協調性などを合わせ持っているということが考えられる。さらにナンパを重ねるという行為は、この積極性・論理的思考・協調性を鍛えるということに相当する。これは新人研修以上に役立つ研修なのではないだろうか。
世間体が悪いという喜ばしくないことの一点のみで、この研修をやめさせてしまうのは非常にもったいない行為だ。なぜ企業はナンパというこの研修を良しとしないのか。いや、それは企業の建前なのかもしれない。建前というのは日本で長く活躍するには非常に重要なファクターなのだ。
日本で長く続く企業は実に賢い。建前を持って能動的に活動出来ているということだ。転職活動で求められるものも、この建前を持って能動的に活動できるかなのだろう。要は、賢さを持ったナンパ師だ。一流のナンパ師は、ナンパされたことを自覚させないという。そういった意味で、新人のころの私は二流のナンパ師だったのだろう。相手にナンパだと悟られていたのだから。
まとめ
会社はナンパしまくったことを怒ったのではなく、未熟なナンパを怒っていたのだ。ここまで理解するのに長い月日がかかってしまった。今さら遅いけど、ありがとう会社。一流のナンパ師になれるよう、頑張るよ。まずは明日の最終面接でおっさんナンパしてくるよ。
はてなブログ「プロフィール写真」を大きくする方法！各段に見やすい
はてなブログの「プロフィール写真」。これ小さくて感じません？
この記事では簡単に「プロフィール写真」を大きく表示する方法をご紹介します。（※表示速度の確認のため現在表示させていません。2016.06.01～）
簡単に「プロフィール写真」を大きくするために、はてなブログの「プロフィール画像アップロード機能」は使いません。こちらを使って大きくするのは難しい（面倒）です。独自に画像をアップロードしてしまいます。完成図としては次のようになります。
完成図
こんな感じが私はちょうどいいサイズかと思います。（※なお、画像サイズはご自由に決められますのでご安心を。）
設定方法
それでは設定方法に入っていきましょう。簡単３ステップです。
１．フォトライフに画像をアップする。
日記を書くときと同じ要領でフォトライフに写真を投稿してください。なお、フォトライフに関する問題にはご注意ください。
somegoro.hatenablog.com
２．アップした画像のアドレスをコピーする。
編集画面に表示された画像を左クリックして、画像アドレスをコピーしてください。
３．HTML、CSSに次のとおりに記載する。
HTML
<a href="/about"> <img src="http://cdn-ak.f.st-hatena.com/images/fotolife/s/somegoro/20160514/20160514004033.png" alt="id:somegoro" class="profile-user-icon"> </a>
このときに２点注意事項があります。
１．httpアドレスは先ほどコピーしたご自分のアドレスにしてください。
２．IDはご自分のIDにしてください。
CSS
#box2 img { max-width: 35%;/* ←お好きな大きさにご調整ください */ max-height: 35%; }
これで完成です。
簡単に「プロフィール写真」を大きく出来ましたね。
自動で画像をリサイズ！投稿画像をレスポンシブデザインにする方法！
はてなブログに画像を投稿すると、その画像は「アダプティブデザイン」となりますよね。アダプティブデザインとは静的デザインのことです。いわゆるレスポンシブでないということですね。ブラウザを縮めると画像がはみ出てしまいます。
せっかくはてなブログをレスポンシブデザインに作り変えても、画像がはみ出していたら気になりますね。そこで投稿した画像もレスポンシブに出来るのか調査してみましたところ、簡単にレスポンシブに設定できましたので、ご紹介いたします。
投稿画像をレスポンシブにする方法
まずは「ビフォー」「アフター」をご覧ください。
ビフォー
しっかりと画像がはみ出ています。
アフター
綺麗におさまりました。
いかがでしたでしょうか。しっかりとはみ出していた画像も、このように綺麗に画像がおさまります。この設定方法では、投稿した画像が横にはみ出ている場合に、自動で画面に合わせて「調整した画像」を表示してくれます。
設定方法
それでは設定方法をご紹介します。簡単３ステップです。
１．「ダッシュボード」から「デザイン」→「カスタマイズ」を選択してください。
２．そして「{}デザインCSS」に次のように記載してください。位置はどこでも構いません。
#wrapper img { max-width: 100%; }
３．書き終えたら、「変更を保存する」ボタンを押下してください。
これで完了です。画像が綺麗におさまるようになります。ちなみに、次のようなやり方もあるようなので試してみました。しかし結果として設定できませんでした。
#wrapper img { object-fit: contain; }
この方法は「CSS3」から新しく追加されたものなので、おそらく「はてなブログ」は「CSS3」に対応していないのでしょう。レンタルサーバーなどをご利用の方は試してみると良いかもしれません。
それでは今回の記事はこの辺で。
はてなブログ「読者になる」ボタンを作る方法！シンプルで軽くする！
はてなブログでは「読者になる」ボタンがありますね。機能としては非常に便利ですが、ボタンとしては小さくて押しにくくないでしょうか。
しかも、これは読者数を読み込んでいるからかと思いますが重いですよね。サイトが「重い」ことの影響は次の記事で書きました。
somegoro.hatenablog.com
さて、この「読者になる」について、機能としては利用したいけれども「重い」ことだったり「小さい」ことについては解決したいですよね。そこで今回は「読者になる」ボタンを自作してしまいます。それではまず、この作業でどのようなボタンが作成できるのか見てみましょう。
自作「読者になる」ボタン（通常状態）
自作「読者になる」ボタン（マウスが上にあるとき）
実物
では、作業に入っていきます。
HTMLに次の文を書きましょう。
<div class="content-inner-follow-buttons" > <a class="hatena" href="http://blog.hatena.ne.jp/somegoro/somegoro.hatenablog.com/subscribe" onclick="window.open('http://blog.hatena.ne.jp/somegoro/somegoro.hatenablog.com/subscribe', '', 'width=500,height=400'); return false;"> <i class="blogicon-hatenablog lg"></i> <span class="inner-text">読者になる</span> </a> </div>
上記HTMLの２行目はご自分のIDとURLに書き換えてください。詳細は次の図に記載しています。（クリックすると画像が大きくなります）
CSSに次の文を書きましょう。
.content-inner-follow-buttons{ width: 100%; text-align: center; letter-spacing: -.40em; } .content-inner-follow-buttons .follow-title { letter-spacing: normal; width:100%; } .content-inner-follow-buttons a { display: inline-block; letter-spacing: normal; position: relative; width: 60%; font-size: 18px; text-align: center; text-decoration: none; padding:20px 0; margin:3px; overflow: hidden; z-index:2; } .content-inner-follow-buttons .inner-text { font-size:16px; padding-left:5px; } .content-inner-follow-buttons .hatena { color: #38393C; border: 1px solid #38393C; background: #ffffff; } .content-inner-follow-buttons a:hover { color:#fff; transition: all .3s; } .content-inner-follow-buttons a:after { position:absolute; content:''; width:100%; height:100%; top:-100%; left:0; z-index:-1; transition: 0.2s; } .content-inner-follow-buttons .hatena:hover:after { top:0; background:#38393C; }
これで「読者になる」ボタンの完成です。
今回はこの辺で。
【基本編】あなたはjavascriptを使えますか？実際に書いて覚えよう！
javascriptに対してどのようなイメージを持っているでしょうか。
気軽に使える。なんでも出来る。邪魔者だからブラウザで使用できないようにしている。などなど、の意見が多いようです。（個人的感想が多分に含まれています！）
確かにプログラマでなくとも気軽に簡単に書けます。なんと言っても開発環境を準備しなくていいからです。ブラウザとテキストエディタさえあれば開発できてしまいます。
javaやCなどはコンパイラでコンパイルしないと動きません。機械語に翻訳する必要があるのです。これらの形式をコンパイラ方式なんて言ったりします。対して、javascriptはコンパイルの必要がありません。
このようにそのまま動く形式をインタープリタ方式と言います。そしてjavascriptのようにそのまま動作する言語をスクリプト言語と言います。スクリプト言語はjavascriptの他には、VBscriptなどがあります。
今回はそんなjavascriptの基本を抑えながら実際に書くところまで解説します。
javascriptを書く場所
ではまず、javascriptってどこに書くの？から始めましょう。javascriptの書く場所は基本的には２とおりあります。
１．HTMLの中に書く
２．ファイルに書いてHTMLに読み込ませる
javascriptはどんな風に書くの
では、具体的にどんな風に書くのか見ていきましょう。先ほどの番号を踏襲して記載します。
１．HTMLの中に書く
HTMLファイルの中でscriptタグを使用できますね。scriptタグのTYPE属性をjavascriptに指定します。その中にjavascriptを書き込みます。こんな感じです。
<script type="text/javascript"> javascriptのソースコード </script>
ポップアップ画面を表示させたい場合には次のように書きます。
<script type="text/javascript"> alert("ポップアップテスト"); </script>
出来ましたね。それでは次にいきましょう。
２．ファイルに書いてHTMLに読み込ませる
test.jsというファイル名でjavascriptファイルを作ったとします。test.jsの中身はalert("ポップアップテスト");です。
そしてHTMLファイルに次のように書いて読み込みます。
<script type="text/javascript" src="test.js"></script>
この際、src= の部分にはjavascriptファイルのURLを記載します。HTMLとjsファイルが同じ階層にあれば上記の書き方で構いません。違う階層にある場合は、../などを使用して場所を指定してあげないといけません。
さて、どうだったでしょうか。HTMLファイルに直接書くのも、読み込むのも結局はscriptタグのtype属性にjavascriptを指定するんですね。
以上。「javascriptの基本～実際に書いてみよう」でした。さらに学びたい方はこちらの本が学びやすいかと思います。
確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)
- 作者: 狩野祐東
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2015/10/30
- メディア: Kindle版
- この商品を含むブログを見る
【まとめ】情報セキュリティについての記事！資格や試験の対策にも！
ブログを開設して約３週間。その間に３０記事ほど書きました。Googleアナリティクスで確認すると、情報セキュリティに関する記事がよく読まれているようです。
インターネットの広がりと共に、犯罪も増えてきましたからね。情報セキュリティに対して、社会の関心も高まってきたのでしょう。
このように昨今注目される情報セキュリティ。今回の記事では、その情報セキュリティに関する記事を読みやすいようにまとめてみます。
カテゴリから見ても良いのですが、記事に対して「コメント」や「体系付け」をしたかったのでまとめています。記事を更新したら随時、この【まとめ】も更新していきます。
これは予防です。社内SEなどの方は読んでおくと良いかもしれません。
これは実際の対処。
最近音声でウィルスの警告をしてくる詐欺が流行しているようです。
おかしいな。と思ったら、まずLANを抜きましょう。
【虫歯対策】オススメ商品３つ！乳酸菌で口内環境改善！フッ素に注意
先日、虫歯についての記事を書きました。（【歯科疾患実体調査】虫歯は感染症 ）今回はその続きです。前回の記事から虫歯は感染症ということが確認できましたね。
フッ素が要注意ならどう対策したらいいのか。そこのところを今回の記事で書いていきます。
善玉菌で虫歯対策
善玉菌そのものを増やして虫歯をやっつけよう！ というわけです。善玉菌には色々種類があるようですが、その中でも今回はメジャーどころである乳酸菌をターゲットとします。
乳酸菌を配合した商品は実にたくさんあります。その中でも、口コミでの評判が高く実際に私が使ってみたい！と思った商品を紹介します。
では、商品種別ごとに紹介していきましょう。今回は３つ紹介していきます。
１．マウスウォッシュ
お口を清潔にするマウスウォッシュ。乳酸菌の一種で虫歯菌や歯周病菌を抑制し、口腔内の環境を健康に保つL8020菌配合。毎日の歯磨き後に。ノンアルコール・ソフトミントタイプ。
定番中の定番ですね。マウスウォッシュ。お手軽ですね。歯磨き時にフッ素で滅された口内に乳酸菌を補充という感じでしょうか。液体だと口の中のすみずみまで届いている感じがしますね。ノンアルコールとのことでお酒に弱い方にも安心です。
２．タブレット
ライオン Systema オーラルヘルスタブレット 90粒 1箱
口内環境にアプローチ【乳酸菌含有食品】
プロバイオティクスの発送から生まれた乳酸菌【T12711】タブレットで、息さわやかに! プロバイオティクスはからだに好影響を与える生菌や微生物のことです。1gに生きた乳酸菌【T12711】を3億個配合。
こちらは多少めずらしいタブレット。マウスウォッシュは吐かなければいけませんが、こちらは飴玉のようになめてればいいので外出時には使いやすいでしょうね。なんだかたくさん乳酸菌を入れてくれてるみたいだし試してみたい。
３．粉末
こちら調査中なのですが、粉末タイプの歯磨き用乳酸菌があるようです。
名前は「ブリアン」といって、子供用のようですね。この製法がおもしろくて、虫歯になりにくい人の唾液から乳酸菌を抽出して作ったんだとか。そんなの商品化できるの？って思いましたが、実際にあるんですからおもしろいですね。実に試してみたいです。
いかがでしたでしょうか。虫歯対策って色々な情報が錯綜してますよね。Googleさんあたりが情報をまとめて【虫歯対策 決定版】みたいなの作ってくれると良いですね。
あなたのサイトは重い！HTMLのファイル読み込み時間を確認する方法
先日の記事でHTMLファイルではjsファイルを読み込むことが出来ると記載しました。
読むこむと重くなるんじゃないの？と疑問に思われた方もいるかもしれません。今回はその読み込む速度はどんなものなのかということを確認していきます。
この確認方法を身に着ければ、今後ユーザー目線でのWebサイト作りが出来ることになるでしょう。日本人はWebサイトに関してはせっかちだとGoogleさんも言ってましたからね。読み込みに時間がかかると、そのサイトを見ないで帰っちゃう傾向が強いんだそうです。
HTMLがファイル読み込みする際の速度を確認する方法
では、さっそく確認方法を解説していきます。簡単３ステップです。
１．HTMLファイルを開く
計測したいHTMLファイルをChromeで開いてください。今回の確認にはChrome（クローム）を使用します。
２．デベロッパーツールを開く
デベロッパーツールを開いてください。開き方の詳細はこちらの記事にあります→簡単・正確に、サイドバーのサイズを変更する方法
３．Networkタブを選択
デベロッパーツールを開いたらNetworkタブを選択してください。選択したらF5で更新です。
するとTimeの項目に読み込み時間が表示されたことでしょう。下の図は first.js、second.js、third.js をHTMLファイルが読み込んだときのものです。それぞれ１Mbyte、２Mbyte、３Mbyteとして作成しておきました。
ちなみに、１Mbyte ぴったりのファイルを作りたいとか言うときにはコマンドプロンプトを使って作成すると便利です。
コマンドプロンプトで次のようにして作成してみてください。
fsutil file createnew ＜ファイル名＞ ＜サイズ＞
ファイル名は自由に指定できます。サイズは１０進数でbyte単位です。（１Mbyteのときは２の１０乗。２Mbyteのときは２の２０乗。３Mbyteのときは２の３０乗。）
【歯科疾患実体調査】虫歯は感染症！フッ素の効果はどんなものか？
今回は虫歯についてのお話です。
みなさん、虫歯はありますか？厚生労働省では歯科疾患の実体調査として次のような報告をしています。
平成23年歯科疾患実態調査 結果の概要について（発表）
この調査は、わが国の歯科保健状況を把握し、今後の歯科保健医療対策の推進に必要な基礎資料を得ることを目的に、昭和32年より6年ごとに実施している。平成23年11月に実施した、第10回の調査結果の概要が、別紙のとおりまとまったので発表する。
この調査の結果から、8020達成者（80歳で20本以上の歯を有する者の割合）は38.3％であり、平成17年の調査結果24.1％から増加している。（8020達成者は、75歳以上80歳未満、80歳以上85歳未満の数値から推計）
なお、この調査は、全国を対象として、平成23年国民生活基礎調査により設定された単位区から無作為に抽出した300単位区内の世帯及び当該世帯の満1歳以上の世帯員を調査客体としており、今回の被調査者数は4,253人（男1,812人、女2,441人）であった。
国民全体を見れば良い傾向にあるようですね。特に、高齢になるほど２０本の歯を持つ割合の増加が顕著に見られます。
フッ素について
このように、年齢を重ねても自分の歯を持つことが出来るようになった要因として虫歯予防の広がりがあります。とりわけ、虫歯予防にと叫ばれて久しいフッ素の存在です。皆さん聞かれたことがあるでしょう。
しかし、調べてみると実際にはそう単純なものではないようです。フッ素のメリットは世間に広く浸透しています。しかし、デメリットは浸透していませんね。そこで、フッ素のメリット・デメリットをご紹介します。
メリット
・殺菌力が強い。それにより虫歯菌（ミュータンス菌）を殺すことが出来る。
・歯質を強化できる。ただし歯磨き粉に入ってる程度では効果は期待できない。
デメリット
・善玉菌も殺してしまう。（善玉菌は虫歯菌をやっつけてくれる。）
・人体への毒性が強い。摂取しすぎると急性中毒になることも。
だから、歯科医の中には歯磨き粉を推奨していない人が一定数いるのですね。その中にはフッ素非推奨派だけでなく研磨剤非推奨派や化学物質非推奨派が含まれるのでしょうけど。
いかがでしたでしょうか。こうして菌レベルで考えると虫歯は本当に感染症なんだということが分かりますね。現在では虫歯菌を完全に除去する方法はありません。ですので、不治の病ということになりますね。
虫歯は気軽に考えてしまいがちです。それは治らないからなのかもしれませんね。虫歯の根本的治療が一日も早く出来るようになると良いですね。
↑こちらは歯科医も薦める歯磨き粉です。
あなたはHTTP通信の説明が出来ますか？同期・非同期の仕組みを解説！
ブラウザとサーバの非同期通信って何？
この疑問はAjaxについて調べていて派生したものだ。転職面接でHTTP通信が得意と話しておきながら仕組みについての理解があやふやになっていたのだ。詳細は先日の日記を見ていただきたい。
そこで、この記事ではHTTP通信の仕組みについて解説する。
HTTP通信の仕組み
仕組みについて、おおざっぱなところから攻めていく。今回は次の２点について調査し解説する。
１．そもそも「ブラウザ」と「サーバ」はどんな通信してるのか
２．「非同期通信」について
では、さっそく一つ目の疑問を解説していこう。
「ブラウザ」と「サーバ」はどんな通信してるのか
サーバにHTMLファイル・javascriptファイル・CSSファイル・XMLファイルを置いてある。ブラウザはもらったデータを表示するだけだ。このデータの受け渡しの際に規約がある。
では二つ目の疑問の解説にいこう。
非同期通信について
これには同期通信の説明が必要だ。同期通信はこんな感じだ。絵にするとわかりやすかろう。
ブラウザとサーバの動き方がリンクしているのが見て取れる。まさしく同期している。処理としてはわかりやすい。決定などの確定ボタンを押せばがHTTP通信が始まる仕組みだ。しかし、いつもこの処理だと使い勝手が悪い。これには操作できない期間があるからだ。
続いて非同期通信だ。
確定ボタンを押さなくてもHTTP通信が始まったりする。それでも困ることはない。なぜならHTTP通信期間中でもブラウザを操作できるからだ。ちなみにサーバが処理している最中にも追加で処理を要求できる。
以上。おおざっぱなHTTP通信の解説でした。
今さらAjaxを解説！私は転職面接で聞かれて回答できませんでした。
インターネット関係の業務を主とする企業の転職面接で「得意な領域はどこですか？」と聞かれました。私は「HTTP通信の部分が得意です。」と答えました。
しかし、続く「Ajaxとかやったことあるの？」という質問には「よく聞きますが、やったことはありません」としか答えられませんでした。
やったことあるような気がするな～と思っていたのですが、詳しく回答できないと判断してやったことがないと回答したのです。このことが帰りの電車中ずっと頭を離れませんでした。
では実際にはどうだったのか。すっかり忘れているので調べてみました。
Ajaxとは
まずAjaxって何なのか。wikipediaにはこうある。
ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法である。XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。
なるほど。わからん。ダイナミックHTMLって何？
ダイナミックHTMLとは
調べてみると、ダイナミックHTMLってのは動的な処理をするHTMLのことのようだ。要は最近のWebページは大体がダイナミックHTMLです。スクロールするとページトップへ行くボタンがフェードインしてきたりするでしょ。アップル製品のWebページはON/OFFの切り替わるでしょ。そうやって動的に作られたHTMLページがダイナミックHTMLです。
では次の疑問。非同期通信って「どこ」と「どこ」の非同期通信のこと？
Ajaxの非同期通信とは
調べてみると、「ブラウザ」と「サーバー」との非同期通信のことのようだ。サーバーはWebサーバーのことだよね。Tomcatとかの。詳しくはこちらをどうぞ→HTTP通信の仕組みを解説。非同期通信とは何か。
少々雑かもしれないが絵として表すとわかりやすかろう。
ふむふむ。今のところは大丈夫そうだ。さらに詳細をみていく。
DHTMLが登場した当初は、ページの動的な装飾にのみ有用と考えられていた。しかし、Web技術者の実験的なコーディングの結果、JavaScript上で非同期通信を記述することで、業務や実用に耐える優秀なインターフェースを備えたアプリケーションをHTML+CSS+JavaScriptで作成可能であることが徐々に判明して行った。
従来のWebアプリケーションでは、サーバにリクエストを送信後、レスポンスを新たにウェブページとして受け取ることで画面遷移が発生していたが、Ajaxにより画面遷移を伴わない動的なWebアプリケーションの製作が実現可能になる。 例えばWeb検索に応用することで、従来は入力確定後に行っていた検索を、ユーザがキー入力をする間にバックグラウンドで行うことによってリアルタイムに検索結果を表示していく（インクリメンタルサーチ）といったことが可能になる。
なるほど。
GMailの検索ボックスとかは決定ボタンを押さなくても結果が表示されるもんね。あれは確かに便利だ。知らない間にAjaxの恩恵に預かっていたんだ。
Ajaxについて、「何者なのか」そして「理屈」は理解することが出来ました。さて、肝心の私が開発したことあるかですが、
バリバリあります！！
ていうかこれjQueryですね。jQueryではこんな処理多発しますよ。Ajax使ったことないのにHTTP通信が得意とかさぞかし技術レベル低いと思われたことでしょう。さらに私の場合jQeryも得意ですといってあったらからなおさらのことでしょうなー。
こちらも調べてみると、そもそもjQeryはAjaxのフレームワークだったんですね～。何も知らずに使っていました。
ということで、次回の転職面接で聞かれた際には十分な回答が出来るかと思います。
それではAjaxについての記事でした。
実装レベルの詳細については次の記事が明るいです。
