JavaScriptを使わずCSSのみでフォームのSELECTタグを装飾する方法です。
以前に、jQueryのプラグインを利用してSELECTタグを装飾する方法を紹介しました。
フォームセレクトを装飾するjQueryベースプラグイン「customSelect」
それまでは、フォームのCSSのみでの装飾は困難だったので、スクリプトを利用する必要がありました。
しかし、最近ではモダンブラウザのCSS3対応が進み、現在ではほとんどの環境で、スタイルのみで好みのデザインへ変更することができるようになりました。
これがデフォルトのフォームSELETタグの表示です。
Windows 10でInternet Explorer 11を起動する方法です。
今頃ですが、私、Windows10デビューをしました。
仕事柄、古いOSやブラウザの対応に追われる日々なので、アップデートには慎重になっていました。
とうとうWindows 10をメインに使う日がやってきたのですが、恥ずかしながらそれまでIE11とEdgeは同じものだと思っていました。別物なんですね。。
それはそうと、Windows10をセットアップ直後、Edgeはデフォルトでアイコンがタスクバーに存在しますが、IE11がどうも見当たらない。
Googleのサービス「PageSpeed Insights」の解析結果で「修正が必要：スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という項目があります。
レンダリング中にJavaScriptを読み込むことで、画面表示に遅延が生じているという警告のようです。
（CSSについては別途考えます）
そこで、HTML5から追加された属性「async」と「defer」を使って、スクリプトの読み込みを非同期にし、画面表示の高速化を図ってみたいと思います。
HTMLのソースは上から順に解析されます。
ソース上部に大量のJavaScriptを読み込んだ場合、その読み込みに時間がかかる分だけ画面の表示が遅くなります。
少し前までは、JavaScriptはhead部分ではなく、bodyの閉じタグの直前で読み込むことが奨励されていました。
読み込み順を変更することで、レンダリングへの影響を抑えようということですが、この方法では結局、トータルの読み込み時間としては改善していないんですね。
レンタルサーバの「エックスサーバー（XSERVER）」でSSH接続し、FuelPHPのoilコマンドを実行する方法です。
ある日、エックスサーバー上でFuelPHPをベースとしたWebアプリを構築しようと思い、oilコマンドでmigrateを実行しようとしたらうまくいかずエラーになってしまいました。
その際に調べた解決方法をメモとして残しておきます。
まずは、Windowsからputtyを使ってエックスサーバーに接続し、phpコマンドを実行してみました。phpコマンドのパスは、オフィシャルのリファレンスより「/usr/bin/php5.6」とのこと。
プログラム言語・コマンドパス | レンタルサーバー【エックスサーバー】
$ /usr/bin/php5.6 -v PHP 5.6.22 (cgi-fcgi) (built: Jun 22 2016 03:15:28) Copyright (c) 1997-2016 The PHP Group Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies
問題なく動作しているようです。
ある日突然、Excelがダブルクリックで開けなくなりました。
正確にはExcelのアプリケーション自体は起動しますが、保存したファイルが開きません。
Excelのメニュー「開く」や、Excel本体にファイルをドラッグすれば開くことができます。
WordとPowerPointは問題なくダブルクリック一発で開きます。
常に、ダブルクリック1 STEPで開かず、操作に2 STEP必要なことは、意外とストレスになるものです。
私の環境は以下のとおりです。
| OS | Windows 7 Professional 64bit |
|---|---|
| Office | Microsoft Office 365 Business – ja-jp |
いろいろと調べたところ、Office 2010がインストールされたままの状態で、Office 365をインストールし、その後Office 2010をアンインストールすると、問題が発生するようです。
解決方法としてはOffice 365を修復します。
「コントロールパネル」から「プログラム」⇒「プログラムと機能」を開き、「プログラムのアンインストールまたは変更」の一覧から「Microsoft Office 365 Business – ja-jp」を選択した状態で「変更」をクリックし、「クイック修復」を実行します。
修復には5分程度かかります。
修復完了後、無事、Excelをダブルクリック1発で開くようになりました。
PHPの画像認証ライブラリにはいくつかありますが、今回はその中でも割とメジャーな「Securimage」の使い方を調べてみます。
Securimage PHP Captcha | Free Captcha Script
画像認証は、Web画面からログインしたり、新規情報登録をする場合に、パスワードなど文字による認証だけでなく、画像により認証するしくみです。
認証画面では悪意あるプログラムなどから、総当り的に認証を試みる攻撃を受けることがあります。具体的には、認証が通るまで機械的にパスワードを打ち続けるなどです。
これらの攻撃からサイトを守るために、動的に生成された画像からコードを読み取ったり、画像をドラック＆ドロップで移動させたりといったしくみで、ワンランク上のセキュリティ対策を実現します。
「Securimage」は文字列を画像として自動生成するタイプの画像認証ライブラリで、その文字列を見て入力しないと認証をパスしないしくみを実現します。
上の公式サイト、または、GitHubのサイトより、ソースをダウンロードします。現時点での最新のバージョンは3.6.4です。
GitHub – dapphp/securimage: PHP CAPTCHA Script
ソースを解答し、フォルダごとサーバにアップロードします。
ここでは「/secureimage/」にアップロードしたと仮定します。
次に、画像認証を利用したい画面に、以下のようにして画像を表示させます。
SNSの恩恵を得るために、シェアボタンなどを設定することが当たり前になりましたが、それらSNSボタンをオリジナル画像などで設置するコードをまとめます。
以前は、TwitterのツイートボタンやFacebookのいいねボタンなどを中心に、押された回数を示すカウントをサイトのステータスとして表示するのが定番でした。
IE6など一部古いブラウザではうまく表示されなかったり、レイアウトが崩れたりと、四苦八苦したのをおぼえています。。。
時代は移り、最近では押された回数よりも、いかにしてSNSで共有してもらい、そこからのアクセス流入を期待する方向へと移行してるように思われます。つまり、「いいねの回数」といった指標より、どれだけ「シェア」の効果が得られるかが重要になってきています。
実際に多くのサイトでも、カウントを表示するための公式のボタンは使用されなくなり、サイトのデザインに馴染むようなオリジナルのボタンを設置しているのを見かけます。
また、一時期話題になったmixiボタンを見かけなる一方で、LINEボタンやLinkedInボタンを機会が増えるなど、とにかくSNSボタンのトレンドの移り変わりが激しいです。
ボタンを設置するサイトを運用する側からすれば、その都度、どのように設定すれば効果が期待できるのか、その動向を探るのが作業負荷となっています。
そこで、随時、最新の設置方法などをまとめて、更新していきたいと思います。
いまさらですが、Googleタグマネージャーを導入してみたいと思います。
これまではページ解析という意味では、アクセス数ぐらいしかみていませんでした。
しかし、ある程度見ていただける方、利用していただける方が増えてきたのもあり、その方々のためにも、少しでもよいコンテンツにしていけたらと思い、もう一歩踏み込んだアクセス解析をしてみようと考えました。
それこそ一般的なGoogle Analyticsのトラッキングコードを埋め込む運用だけでしたが、Googleタグマネージャーを活用すれば、イベントトラッキングの運用や、その他クッキーなどを利用した細かい解析もできるということで、とりあえずここでは導入だけしてみようと思います。
ここでは、既にGoogleアカウントを持っていることを前提とします。
ブラウザでGoogleにログインしている状態で、以下のページにアクセスします。
Google Tag Manager
初期状態だとアカウント作成画面が表示されます。
「アカウント名」は会社名、個人名や団体名、「コンテナの設定」はサイトドメインを入力して作成します。
jQueryプラグイン「RWD Image Maps」を利用すれば、簡単にイメージマップリンクをレスポンシブ対応させることができます。
例えば、以下のように100×100のサイズの画像「sample.jpg」に対してイメージマップを用意します。
<img src="sample.jpg" usemap="#sample" alt="サンプル" > <map name="sample"> <area href="sample1.html" shape="rect" alt="四角形のリンク" coords="10,10,30,30"> <area href="sample2.html" shape="circle" alt="円形のリンク" coords="50,50,10"> <area href="sample3.html" shape="poly" alt="多角形のリンク" coords="60,60,80,80,70,90"> </map>
画像に対して、四角形のリンク、円形のリンク、多角形のリンクの3つのエリアを設定しています。
通常だと、これをレスポンシブ対応のサイトに設置し、画面の大きさに応じて画像サイズを拡縮した場合、イメージマップのリンクエリアがズレてしまいます。
このような場合に、以下のプラグインを導入することで、簡単にイメージマップをレスポンシブ対応することができます。
GitHub – stowball/jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin
WiMAXのモバイル端末「Speed Wi-Fi NEXT WX01」を利用しているのですが、最近、バッテリー（リチウムイオン電池）が膨張してきたので、買い換えました。
ある日、出張だったので、WiMAXを携帯しようと思って手に取ってみると、なんだか違和感。。厚みがあります。
Speed Wi-Fi NEXT WiMAX 2＋ WX01 ディープブルー NAD31SLU
|
本体が膨らんで背面のカバーが少し浮いており、一部隙間ができています。背面カバーを外してみると「ポコン」とバッテリーが跳ねるように外れました。
バッテリーをよく見ると、明らかに厚み1.3倍程度に膨らんでいます。