頚椎損傷で四肢麻痺の僕がパソコン操作をするのに「SmartNav 4AT」を使う理由
顔などに反射シールを貼るだけでマウスのカーソル操作が自由に行える 頭、顔（もしくはその他の部位）に、反射シールを貼り付けて、動かすことで、パソコン操作ができます。 カーソル移動は、シールを張り付けた部位を小さく動かすだけで、上下左右マウスのポインターを動かすことができます。 僕の場合は、左手前にSmartNavを置いているので、左あごの下にシールを貼っています。 materials – skin [Lee Perry-Smith] こうすることで、顎を上下左右小さく動かすだけでマウスカーソルを自由自在に動かせます。 僕の場合は、PCモニターの上にカブレステープで固定して使っています。 このように、SmartNavを置いて、顔などにシールを貼るだけで簡単に使い始めることができます。 手が全く動かせなくても完全なマウス操作が可能 僕の場合は、多少左ひじを曲げることぐらいはできるので、クリック動
目の動きだけでパソコンを操作しようと「Tobii Eye Tracker 4C」を買ってみた。初期設定方法など。
SmartNavは、顔などに反射シールを貼ることで、とても繊細にマウスカーソルの動きを制御できるようになります。設定次第ではクリックも自動で行うことができ、完全ハンズフリーでパソコン操作を行うことが出来るようになる補助デバイスとなっています。 そんな優れたSmartNavなんですが、もう10年近く使ってきて、1つだけ不満点が。 それは、「使用前、反射シールを顔等に貼る必要がある」ということです。これが毎回のことなので地味に面倒くさいです。反射シールがなくなったら、買い足して適当な大きさにカットする必要もありますし。 そういった中、先日「視線で入力することが出来るTobii Eye Trackerとか興味ありませんか？」とフォーラムに書き込みがありました。
新しくなったWordPressローカル環境、InstantWPのインストール方法と使い方。
InstantWPのセットアップ手順 まずはじめに、InstantWP利用するのに必要な主な手順は以下になります。 InstantWPのダウンロード＆解凍 InstantWPの移動 InstantWPの起動 InstantWPの日本語化 以下では、Windows環境でInstantWPをインストールする方法を、手順を追って紹介したいと思います。 InstantWPのダウンロード＆解凍 まずは、InstantWPからダウンロードを行います。 僕はWindows環境で利用するので「Download InstantWP for Windows」ボタンを選択しました。 「IWP-v5.3.3-Win.zip」といった名前のzipファイルがダウンロードされます。 上記ZIPファイルを「InstantWPを設置したいフォルダ」で解凍（展開）します。 解凍したあと、移動してもOK。 InstantWPの
WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた
それで、「そんなにいいのかな？」と半信半疑でインストールして、使ってみた瞬間、惚れました。 プログラミングをする人にとって、Sublime Textは、「恋に落ちるエディター」とよく言われていますけど、WEB開発者にとってBliskは「恋に落ちるブラウザ」といっても過言はないのではないかと思います。 以下では、そう思うに至った理由について述べたいと思います。 この記事は、2016年7月9日に書いたものです。2016年11月1日にversion 1.0.125.166が出たことにより、機能の一部が有償プランに加入しないと利用できなくなりました。ですので、無料で利用する場合は、30分で機能制限がかかったりするようになったのでご了承ください。 Blisk（ブリスク）とは Bliskは、WEB制作者がサイトの動作確認をする上で、便利な機能がデフォルトで備わっているWEBブラウザです。 現在は、Wi
PHPでCSSやJavaScriptを縮小化するWordPressカスタマイズ方法
WEBサイトのCSSや、JavaScriptは、高速化の観点から、縮小化（余計な改行や スペース、コメントを取り除く）した方が良いとされています。 PageSpeed Insightsで、よく注意されるアレです。 ただ僕の場合、リソースを縮小化してしまうと、開発者ツールでデバッグがしづらいですし、不具合の原因にもなり得るため、あまり使用してきませんでした。高速化や、SEO的効果といっても、対応する面倒さ以上の効果もあまり感じないですし。 けれど、最近AMPなるものも出てきました。 これに対応させるには、CSSの総容量を50KBまでに抑える必要があります。今までは、CSSの総容量とかには、あまり気を遣う必要がなかったので、縮小化などは「まぁいいや」程度に思っていました。けれども、総容量に制限のあるAMPでは、なるべく多くのスタイルを書くとなると、縮小化は必要になってくるかもしれません（50K
アドセンスで新しく出た広告ユニット「関連コンテンツユニット」の設定方法
先日、Googleアドセンスの管理画面に以下のようなメッセージが出ていました。 関連コンテンツ ユニットに広告を表示することで、収益増加を図ることができます。広告のスタイルは、おすすめ記事のコンテンツやデザインに合わせてカスタマイズされます。 とりあえず、こういったものは使ってみないとよくわからないので、早速試してみました。 関連コンテンツユニットとは 「関連コンテンツユニット」は、サイト閲覧ユーザーに関連コンテンツを表示する機能のことです。 よくブログなどに表示されている「関連記事」みたいな機能のGoogleアドセンス版みたいな感じでしょうか。 「関連コンテンツユニット」を設置すると、そのページに関連した、おすすめのコンテンツがいくつか表示されます。そして、おすすめコンテンツの一部が広告に置き換えられます。 この「関連コンテンツユニット」の素晴らしい点は、従来のアドセンス広告数上限の以下
Instant WordPressで超簡単にワードプレスローカル環境を構築する方法
当記事はInstant WordPress v4.3.1時点のものです。僕が確認した時点のv5.3以降では、インターフェースが新しくなり、以下のインストール手順は異なるものになってしまったのでご了承ください。 新しいInstant WordPressの利用方法は、InstantWPのインストール方法と使い方を参照してください。 今回は、Windowsに、これ以上無いくらいに簡単にWordpressローカル環境を構築する方法の紹介です。 僕は2台のWindowsパソコンを持っています。そのうち1台は、Bitnami for XAMPPを使ってローカル環境を構築しました。これが結構めんどくさかった。Bitnamiを使った方法もあるのですが、Instant WordPressを使用すれば、それよりもさらに手順を短縮できます。 僕は2台目のパソコンは、Instant WordPressでローカル環
関数や変数のネーミングに悩んだら「codic」に日本語名を入力するとある程度解決するかも
codicとは codicは、日頃、変数名や関数名に頭を悩ませるプログラマのためのネーミング辞書です。 以前は、プログラマ向けの単語辞書といった感じだったのですが、Ver.3からは、「日本語を入力すると、ふさわしい名前を勝手に生成してくれる」という仕様になりました。 例えば関数名を作るのに、「従業員数を取得する」と入力するだけで「get_employee_count」という名前を勝手に生成してくれます。 これだけでも、かなり便利なんですが、codicにはその他にも、プログラミングのための便利な機能が満載だったので、その使い方などを紹介したいと思います。 codicの使い方 codicの主な機能は、日本語を入力すると、勝手にネーミングを生成してくれると言うことです。 ただ、ちょっとした使い方次第で、より便利に利用できるので、その使い方などの紹介です。 基本機能 まずは、基本的な機能、「日本語
無料で説明図を作るならドローツール「draw.io」に敵うものはないかも
で、図説ドローツールとしては、CacooやGliffyを紹介しました。 けれども、「draw.io」というのを使ってみたら、完全に無料で利用できるうえに、日本語にも対応、さらには機能も豊富という何拍子も揃った素晴らしいドローツールだったので紹介です。 photo by David Goehring draw.ioとは draw.ioは、WEB上で無料で使えるフローチャート作成ツールです。 インストールなどは必要なく、ブラウザからログインも不要で手軽に利用することができます。 通常、こういったドローツールは、「作業シート何枚まで無料であとは有料」などというサービスも多いのですが、draw.ioは完全無料で利用することができます。 やれることが豊富 このツールを利用するだけで、以下のような図を手軽に作成することができます。 チャートなんかも。 こんな回路図なんかも。 もちろんこんなフローも。
Chrome拡張「Scraper」でWEBページ情報を手軽にスクレイピングしてデータ化する方法
Scraperとは Scraperは、WEBページ上の規則性のあるデータを手軽に取得することができるChrome拡張です。 例えば、テーブルデータや、Aリンクデータ、のような特定のHTML要素に入っている情報を、片っ端から取得してテーブルデータ化することができます。 また、その取得したデータをワンクリックでGoogleスプレッドシートに保存することができます。 テーブルデータのスクレイピングは以下の動画を見た方が分かりやすいかも。 以下では、その使い道などをいくつか考えてみました。 テーブルデータの取得 最もオーソドックスな使い方と言えば、動画にも出てきたテーブルデータの取得です。 例えば、信長の野望の以下のような武将データテーブルがあったとします。 これを、以下のように選択して、Chromeの右クリックメニューから「Scrape similar（似たものをスクレイプ）」を選択します。 す
SEO分析ツール「Ahrefs」の被リンク調査能力がスゴい
Ahrefsとは Ahrefsとは、シンガポールとウクライナの企業が運営するSEO分析ツールです。 現在、4ヶ国語に対応しており、完全ではないものの日本語にも対応しています。 Ahrefsは、世界中の数兆にも及ぶサイト情報を保有しており、またそのデータを2週間ごとに全て更新しているそうです。その圧倒的なデータ力で、他のSEO分析ツールでは行えないような、細かな被リンク分析を行うことができます。 また、その豊富なデータに裏付けされた、独自のAhrefs「ドメインランク」と、「URLランク」というランク値（100点満点）を公開しています。Mozでいうところの、「ドメインオーソリティー」と「ページオーソリティー」みたいなものです。 使ってみる Ahrefsを使うといっても、簡単で、調査対象のURL（ドメイン）を入力して、「SEARCH LINKS」ボタンを押すだけです。 初めて利用する場合は、1
ソースコード検索エンジン「NerdyData」で世界1.4億のサイトから実用コードが探せる
NerdyDataというソースコード検索エンジンを最近知りました。 通常の検索エンジンは、タグを取り除いたページ内のコンテンツが検索結果に表示されます。けれど、NerdyDataは、サイトにある生コードを検索することができます。 これを、使うことにより、コードの具体的な利用例なども見ることができ、便利だったので紹介です。 photo by Ruiwen Chua NerdyDataとは NerdyDataは、世界中の1億4000万サイト以上のソースコードの中から、HTML、CSS、JavaScriptのコードを直接検索できる、ソースコード検索エンジンです。 Nerdyという単語は、あまり聞き慣れなかったので「どういった意味だろう？」と調べてみたら以下のような意味でした。 オタクっぽい Ａ系, エー系, 秋葉系, アキバ系 おそらく、いい意味でPCオタク向けのデータが詰まった、ギーク御用達の
プログラミングで変数名や関数名のネーミングに迷ったときに便利なカンニングペーパーまとめ
僕は、プログラムをする上で変数や関数に良い名前を付けるのはとても重要と考えています。 というのも、良い名前を付ければ、それだけでそのコードがしたいことの説明になり、コメントと同等の働きをすることもあるからです。 自分がちゃんとそれをできているのかはさておき、僕は普段から、できれば読みやすくて分かりやすい名前を付けたいと思っています。他の人も読むコードであれば、できればプログラムでよく使われるような単語を利用して書いた方がより分かりやすいです。 ただ、よい名前を考えるのって、ちょっと面倒くさいんですよね。僕はこれまで、英語の辞書を利用して、考えたりしていたのですが、「何か、プログラムでよく使われる単語をまとめたものはないか？」と探したら、ドンピシャのものがいくつかあったので、それらをまとめて以下で紹介します。 photo by Michael Coté codic codic – デベロッパ
機能はSkitch超え！画像に美しい注釈を加えられる「Screenpresso」がスゴい
これに出てくるソフトは、ほとんどが、以前から使っていたり、知っていたりするものがほとんどなんですが、このとき調べていて、「Screenpresso（スクリーンプレッソ）」というソフトを初めて知りました。 それ以来、いろいろ試しに使っているのですが、Skitchにはないいろいろな表現が可能で、一目で気に入ってしまいました。Sublime Textは、「恋に落ちるエディター」といわれていますが、Screenpressoは「恋に落ちる注釈ソフト」といっていいほど、心を打ち抜かれました。 ということで、今回は、Screenpressoという画像注釈ソフトの紹介です。 Screenpressoとは Screenpressoとは、Skitch並みに手軽に使え、その上、Skitch以上に表現力のある画像注釈ソフトです。基本的にほとんどの機能を無料で使えます。 様々なスクリーンショットを撮る機能があるのは
100種類以上のマウスホバーエフェクトを手軽に使えるCSSライブラリ「Hover.css」が便利。WordPressでも簡単利用。
Hover.cssとは Hover.cssとは、手軽にホバーエフェクトを利用できるようになるCSSライブラリです。 すべて、CSSで動作するので、AタグなどのHTML要素のクラス指定部分にクラス名を記述するだけで、100種類以上の様々なマウスホバーエフェクトを手軽に使えるようになります。 利用するときは、こんなタグで利用できます。 Font Awesomeのアイコンフォントを利用したことがある方なら、Font Awesomeを利用するように、クラスを指定するだけで使うことができるので、簡単に利用できます。 Hover.cssの主な利用手順 Hover.cssを利用するのに必要な主な手順は、以下の3手順です。 Hover.cssのダウンロード＆設置 Hover.cssを呼び出す Hover.css用のタグを記入する 利用するファイルも、hover.css（縮小版はhover-min.css）
WordPressにCSSをコピペし「LINEぽい吹き出し」を作って会話を入力する方法
主な手順 主な作成手順は、こんな感じです。 CSSをstyle.cssなどに貼り付ける CSSのclassを用いて文章を書く CSSさえ貼り付けてしまえば、あとは「吹き出しクラスを適用したpタグ」などで、書き込むだけです。それほど手間もかからないと思います。 作成方法 作成方法は以下です。 style.cssに貼り付ける 以下のCSSをstyle.cssにコピペします。 /******************************* * 左からの吹き出し ********************************/ .left_balloon { position: relative; background: #fff; border: 1px solid #777; margin: 10px; padding: 10px; border-radius: 15px; margin-
自分のWordPressサイトにGoogleキーワードサジェストツールを設置する方法
主な手順 キーワードツールをWordpressに設置するには、主に以下の3手順が必要です。 page.phpを複製しpage-suggest.phpのように名前をつける page-suggest.phpをページテンプレートとして使用するために編集 ツール用の固定ページを作成する こんな感じで、少しWordpressテンプレートをカスタマイズしたことがある方なら、特に苦もなく設置できると思います。 ファイルの作成 まずは、お使いのテーマのpage.phpテンプレートファイルをコピーし複製します。複製する場所は、テーマフォルダ内であれば、サブフォルダ内でもOKです。もちろん、テーマフォルダ直下でも構いません。 その複製したファイルにpage-suggest.php等の名前を付けてください。名前は、どのような名前にしても良いので好きな名前をつけてください。（以降では、page-suggest.p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
自作のWEBアイコンフォントの作り方（無料ツールのみでfeedlyフォントを作る）
これを無断使用しちゃっていいの？ブログのアイキャッチ探しがはかどる高クオリティーCC0写真サイトまとめ
[WordPress]SEO的にもちょびーっとだけ有利なリッチスニペットを用いたパンくずリストの作り方![[WordPress]SEO的にもちょびーっとだけ有利なリッチスニペットを用いたパンくずリストの作り方](https://cdn-ak-scissors.b.st-hatena.com/image/square/c1dfd218d8d3d9f071cd169796fb69a2975744cb/height=288;version=1;width=512/https%3A%2F%2Fnelog.jp%2Fwp-content%2Fuploads%2F2015%2F12%2F18ef6d0cfa83.jpg)
