サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
衆院選
blog.h2o-space.com
Chromeには、マルチユーザー機能が搭載されていて、複数のアカウントを紐付けて利用することができます。筆者はこの機能、うまく活用していなかったのですが、ふと、サイト制作でクライアントごとにユーザーを作ったら、非常に便利だったのでその方法を紹介しましょう。 Chromeユーザーの作り方 まずは、ユーザーの作り方です。Chromeを起動すると、右上にユーザー名が表示されているので、これをクリックします。 「ユーザーを管理」メニューをクリックして、「ユーザーを追加」をクリックしましょう。 ユーザー名とアイコンを入力したら完成です。右上のユーザー一覧から切り替えることができるようになります。 マルチユーザーでできる事 ユーザーを切り替えると、Chromeで行った設定をリセットすることができます。ブックマークも空っぽですし、Googleアカウントと紐付けることもできます。拡張機能もすべてなくなりま
近年盛り上がりを見せている「クラウド開発ツール」。Webブラウザ上でエディターやファイル管理などを使いながら、サーバー上で直接開発できるツールです。 これまで筆者は「Cloud 9」を使っていたのですが、最近これを解約して「Codeanywhere」に乗り換えました。その理由と、Codeanywhereの魅力を紹介していきましょう。 Codeanywhereの基本機能 Codeanywhereの基本的な部分は、他のクラウド開発ツールと変わりません。最初に、イメージを作成するためのベースを選んで、 しばらく待つと、メイン画面が起動します。ファイル管理とエディターが利用でき、編集して「Run」すればそのままプレビューサーバーで動作を確認することができます。 ターミナルも利用でき、yumコマンドなどを使って各種ソフトをアップデートしたり追加のライブラリをインストールも可能。また、SSHなどを通じ
Node.jsで利用するバージョンを切り替えられる「NVM」を Windowsに導入します。 セットアップ 以下の Githubページから、最新版の「nvm-setup.zip」をダウンロードして、解凍し、セットアッププログラムを起動します。 Releases · coreybutler/nvm-windows コマンドプロンプトの利用 コマンドプロンプトを起動したら、インストールを確認しましょう。 nvm ヘルプが出ればインストール完了です。 最新バージョンの Node.jsをインストール 最新バージョンのインストールには、次のコマンドを使います。 nvm install latest 過去のバージョンのインストール 過去のバージョンをインストールするには、以下のページでバージョン番号を確認して、それを指定してインストールします。 Previous Releases | Node.js
Windows 10（Anniversary Update済み）の環境で、Vagrantの構築を行なっていたのですが、途中で Windowsが落ちる。いわゆるブルースクリーンになって、QRコードが表示されてしまいました。 VirtualBoxのバージョンを落としたり、あれこれ手を尽くしてみたのですが、不意に得た情報で「Hyper-V」とぶつかっていることが原因でした。 Hyper-Vは、Microsoft謹製の仮想環境ソフトで、Windowsも 7以降くらいからは標準でインストールされています。しかし、仮想環境ソフト同士は相性が悪く、ここに VirtualBoxをインストールするとぶつかってしまうようです。 Hyper-Vを無効にする方法は次の通り。 スタートボタンの右クリックなどから「プログラムと機能」を起動 左側のメニューの「Windowsの機能の有効化または無効化」を選択 Hyper
TypeScriptは、発表当時に少し触ってみたものの、実用にはならないかなと様子見をしていました。しかし、ここ最近、実務で導入されている例が多くなってきたり、ECMA Script 6の勧告に伴って、話題に上がることが多くなったりで、遅ればせながら改めて学習を開始しました。 ということで、まずは導入の方法を紹介してみます。ムービーはこちら。 ここでは、Windows 10への導入方法を紹介しますが、基本的にはコマンドラインソフトなので、OS Xなどでもほぼ同様の手順です。 Node.jsをインストール TypeScriptは、npmコマンドでインストールする事ができます。そのため、まずは Node.jsをインストールしておきましょう。Windowsの場合は、サイトからセットアッププログラムをダウンロードしてインストールするのが簡単です。 Node.js TypeScriptをインストール
EIZOの 4Kディスプレイ『EV3237』を愛用しています。 画質もキレイでディスプレイサイズも大きく、非常に満足しているのですが、不満な点が1つだけ。 このディスプレイ、入力系統が複数あるのですが、ある入力系統から入力がなくなると、自動的に他のポートを探して入力があるポートに切り替えてしまうのです。 これを解決したく、サポートセンターに連絡したところ、丁寧に教えていただきました。 まずそもそも、なぜこの機能が困るかと言えば、PCを再起動するとき。再起動すると、一時的にディスプレイが消えます。とはいえ、すぐに復帰するのですが、ディスプレイがこの時に勝手に他の入力を探しに行ってしまいます。 さらに悪いことに、その時の他の入力ポートから入力があると、そこに落ち着いてしまい、再起動が終わった方のPCはわざわざ切り替えないといけないという、非常に面倒な状態でした。 解決方法 こちら、マニュアルな
【23:14追記】WordPress HTTPSのプラグインの紹介を追記しました。 Googleが、WebサイトのHTTPS接続を推奨すると発表しました。 Google ウェブマスター向け公式ブログ: HTTPS をランキング シグナルに使用します すでに証明書を取得していて、問い合わせ画面などだけをSSL対応にしているなら、全ページをSSL化にしてしまっても良いでしょう。 WordPressで運営しているWebサイトの場合、「設定→一般」の「WordPressアドレス」と「サイトアドレス」をそれぞれ変更すれば、HTTPS接続にする事ができます。 ただ、これだけだと直に「http://」というアドレスでログインしたユーザーなどには、そのまま非SSLの状態で表示されてしまうため、次のプラグインなども合わせて利用すると良いでしょう。 WordPress › WordPress HTTPS (S
WordPressでのサイト開発で面倒なのが、ローカルで開発したサイトをサーバー上にアップロード（デプロイ）する時。テーマファイルのアップロードだけなら簡単ですが、設定を変えたときや固定ページなどを絡めた場合は、簡単にはサーバーと同期をする事ができません。 そんなデプロイ作業に、WordMoveというツールが超便利でした。 welaika/wordmove 筆者の場合は、VCCWに同梱されていたWordMoveを利用したので、こちらで解説します。 VCCW – A WordPress development environment. VCCWをセットアップ まずは、VCCWをセットアップします。先に、Vagrant環境を整える必要があるので、このあたりは他のブログなどを参照してください。 ZIPをダウンロードするか、gitからクローンします。 git clone git@github.co
WordPressの投稿画面に定型フォームを作る時に便利なのが、カスタムフィールド。そして、これをより便利にするプラグインとして、私はこれまで「Custom Field Template」を利用してきました。 カスタマイズのしやすさと、例えばテストサーバーと本番サーバーの両方に同じカスタムフィールドを用意したいときなどに、コピペするだけで良いので楽だったのです。 しかし、Takashi Kitajimaさんが開発した『Smart Custom Fields』を使ってみたところ、これがかなり良く、今後のスタンダードになりそうです。 映像の通り、ビジュアルで簡単に作成でき、フィールドをいくつでも増やせるリピート領域も作ることができます。また、リビジョンやプレビューにも対応しており、カスタムフィールドを扱うメソッドも使えるようになるとか。詳しくは、作者のエントリーをどうぞ。 WordPress
Googleが WordPress用の純正プラグインをリリースしました。現在βテスト中です。 プラグイン画面から「Google Publisher」などで検索をしてインストールすると、設定画面に項目が増えます。 最初に Googleアカウントと接続する必要があり、それが済むと次の2つの機能が使えるようになります。 Google Adsense挿入機能 Google Webmaster接続 特に、Webmaster接続はこれまで「Google XML Sitemaps」などの別のプラグインを使っていましたが、純正プラグインでできるようになると、いろいろ楽ちんで良いですね。Google Analyticsの操作もできるようになれば良いのに・・ 管理画面を見ると、JetPackと同じような構成になっているので、今後どんどん機能が増えていくのかも知れません。楽しみですね。 WordPress ›
手持ちの蔵書を、電子化するプロジェクトはずっと懸案事項で、ScanSnap + 裁断機を買ってみたり、snapbookに依頼をしたりなど試行錯誤を繰り返しています。 そして今回、仲間に教えてもらって BOOKSCANというサービスを利用してみたのですが、これが非常に良い感じ。しかも「プレミアム会員」という、月額 9,980円のサービスが非常に良いです。 専用の住所を与えてもらって、そこに書籍を送ればなんの手続きもせずにスキャンをしてくれます。Amazonの送り先を指定したりしてもOK。しかも、作業も優先的に行ってくれて、Kindle送付機能というのもあります。 これらを組み合わせれば、Amazonでワンクリック購入をすると1週間もしないうちにできあがって、そのままKindleに配信されるのです。Kindle版がない書籍も、ちょっと時間がかかるだけで読めてしまうという。 月に 50冊までとい
2013年 12月 14日に開催された『CSS Nite LP, Disk 31: Webデザイン行く年来る年（Shift7）』で、私は「スマートデバイス 2013 → 2014」としてスマートフォンの今年とこれからを考えるセッションを担当しました。 セッションの中では、上場企業 2,000社超の Webサイトを目視で確認しながら、スマホ対応をしているかや、どんなスマートフォンサイトを展開しているかなどを紹介していきました。 ここでは、スライドとともにそのエッセンスを紹介していきます。 スマホ対応しているのは1割強 今回、上場1部・2部・マザーズ等で代表的な 2,139社を調査しました。すると、288社がスマホサイトを提供していました。 鉄板デザインパターン その中で、「鉄板」と言えるデザインパターンは、右上にメニューボタンがあり、画面の目立つ場所にはカルーセル、その下にメニューが展開され
Editors’ & Writers’ Advent Calendar 2013 - Adventar の18日目です。 私は、『WordPressをちゃんと使うための教科書』や『よくわかるPHPの教科書』、『よくわかるJavaScriptの教科書』など、初心者さん向けの入門書などを執筆しています。 今日はそんな入門書を書いた経験から、「分かりやすい文章を書くために工夫していること」をいくつか紹介してみたいと思います。 解説をとばす 技術系の記事の場合、どうしても「例外」があったり、ケースによって必要なことが異なることがあります。これらを一文の中で説明しようとすると、どんどん結論が先延ばしされて、全体的に難解な文章になっていってしまいます。 そこで、文章ではそのような例外などをどんどんとばして簡潔に説明し、代わりにコラムなどを使って、一つずつ紹介をします。 例） 6-23の手順に従って、デ
ワープロと言えば、Microsoft Wordや Apple Pagesなどがあります。しかし、PCでしか作成できなかったり、再利用性が低かったりなどで面倒。 Google Driveも魅力的ですが、いまいち素敵な文書が作れません。そんな中、Markdownでなんとかならないかと試行錯誤していたら、Sublime Text 2 + Markedという組み合わせが素敵でした。 Sublime Text 2 泣く子も黙るエディタソフト。Markdownを記述するエディタソフトであれば、この他にもBywordなどでも構いませんが、ST2に「Markdown Extended」などを入れれば、十分エディタとして利用できます。 Marked OS X向けの、Markdown文書プレビューソフト。これが素敵すぎます。 Marked - smart tools for smart writers このソ
MAMPの MySQLを Sequel Proで管理する方法 MySQLの管理ソリューションとしては「phpMyAdmin」が一般的ですが、OS Xで管理するときは「Sequel Pro」の方がより便利です。 Sequel Pro データの管理はもちろん、テーブルの制作から構造の変更、エクスポートやインポートも、非常にスムーズに行うことができます。 そんな、Sequel Proで MAMPの MySQLを管理する場合は Socket接続を利用すると良いでしょう。 起動画面で「Socket」を選んで、図のように記入していきます。 Socketのパスは、MAMPのスタートページに記載があります。 MAMPに内蔵されている phpMyAdminから乗り換えると、非常にスムーズに管理する事ができますよ。
フォームを作るときに気をつけたいポイントあれこれ Web担当者Forum で、こんな記事がありました。 お願いだからWebフォームでは<label>を正しく使ってユーザビリティを上げてくれ | Web担当者Forum チェックボックスやラジオボタンなどに <label> 要素を付加しようという内容で、フォーム制作の基本の内容ですが、次の通り HTMLを自分で書かないWeb担当者さんでも、デザイナーさんが作ったフォームに関して最低限これだけはチェックしておくといいですよ、というお話しです。 とのことで、啓蒙としても非常に価値のある記事だと思います。 私も便乗して、フォーム制作するならこれは気をつけたいという内容を、改めて紹介します。参考になれば幸いです。 フォントサイズは 16px以上に iOSでは、テキストフィールドのフォントサイズが 16px未満であるとタップしたときに少し拡大されてしま
Vagrantは、仮想環境を手軽に構築できるツールで、PHPやRubyの開発環境を作ることができます。 WordPressの環境を構築する事もでき、筆者もQiitaでレシピを公開していますが、セットアップ後にいろいろと設定をしなければならないなど、もう一息面倒でした。 そこへ、決定版といえる「Varying Vagrant Vagrants（VVV）」を利用すると便利です。次の方法でセットアップしましょう。 VirtualBox 4.2.18をセットアップします https://www.virtualbox.org/wiki/Downloads Vagrant 1.3.5をセットアップします http://downloads.vagrantup.com/tags/v1.3.4 vagrant-hostsupdaterプラグインをセットアップします vagrant plugin instal
2013年 8月 28日、たにぐちまこと は「WordPressをちゃんと使うための教科書」という書籍を出版させていただきました。 本書は、すでに多くの種類がある「WordPress」の入門書の中で、「ちゃんと使える」という事を目標に、じっくりと学習できるような内容を厳選して執筆しました。 まずは、「構成」について。本書は 7章から構成されます。 Chapter 1 知識編 WordPressを始める前に WordPressはインストールが非常に簡単で、レンタルサーバーによっては「簡単インストール」といった機能でワンクリックで使い始めることができたりします。 しかし、このような簡単なしくみは、いざトラブルに遭ったときなどに原因が掴めずに途方に暮れることも少なくありません。それは「しくみ」が分かっていないため。 そこで、このChapterでは、WordPressがどういうしくみで動作している
今や、CMSといえばこれ、という位スタンダードな存在になっている「WordPress」。 しかし、実際に使い始めた方の感想を聞くと「MTの方がテンプレートタグなどが素直で良い」「PHPが生々しすぎて扱いにくい」「何かにつけて functions.phpを触らないといけない」「プラグイン入れすぎだし、不安定」などなど、酷評も多々聞きます。 私の場合、かなり初期の頃から WordPressラブの状態です。しかし、それは決して WordPressが「CMSとして」優れているからという訳ではなく、むしろ今のように人気が出るのは変な気もしています。 私は、WordPressは CMSというよりも「アプリケーションプラットフォーム」という位置付けかなと思います。もし、コンテンツを管理するためにCMSを使いたいという用途ならば、おそらく他の CMS製品の方が優れたものが多いでしょう。 WordPress
Webサイトのスマートフォン最適化は、私たち Web業界の人間の大きな課題ですが、iPhoneが登場してから Apple自身は一貫して「スマホサイトは不要」というのを自社サイトで暗に主張していました。 つまり、viewportを調整するだけでレイアウトなどはPCと同じ。PCでも、タブレットでもスマホでも、同じレイアウトのサイトを必要に応じて拡大縮小で使えば良いじゃないかと。 そしてこの度、キヤノンのWebサイトが、それと同じように1レイアウトで各デバイスに対応させるというレイアウトにチャレンジしています。 キヤノン 表示すると、目に入るのは非常に大きなプロモーション写真とナビ。 見出しや本文も大きく、非常に見やすいです。PCで見ると、大味なサイトですがもはや、PCは（Web閲覧においては）衰退の方向であることは明らかなので、思い切った決断といえるでしょう。 ただ、さまざまなデバイスで見てい
WordPressの Automattic社が、Simplenoteというサービスの開発元である「Simperium」を買収しました。 Automattic が Simplenote iOS アプリ開発元 Simperium を買収 – ja.naoko.cc このサービス、恥ずかしながら知らなかったので使ってみたのですが、本気で爆速でびびりました。 サービス自体は、それほど目新しいものではなく、ノートの共有API。シンプルテキスト専用の Evernote。タグは作れますが、フォルダやノートの概念もなく、本当にシンプルなサービスです。 しかし、目を見張るのが同期の速さ。例えば、Webインタフェースで文字を入力すると、保存もしていないのに1-2秒後には iPhoneアプリに反映されています。もっとびびるのは、逆に iPhoneアプリで入力した内容も、打っているそばから Webインタフェース側
InKは、超シンプルなレスポンシブ対応CSSフレームワークです。ダウンロードはこちらから。 InK - Interface Kit ダウンロードすると、CSSや画像、Webフォントなどがダウンロードされますが、これらが必要なければCDN経由でリンクするだけでも利用することができます。超シンプル。 <link rel=”stylesheet” href=”http://css.ink.sapo.pt/v1/css/ink.css”> 後は、利用したいパーツの class属性を付加するだけ。例えば、レスポンシブに対応したレイアウトをしたい場合は「ink-l33」という classを当てれば、33%の幅のコンテンツエリアを作ることができます。合わせて「ink-m50」という classも当てておけば、画面幅が狭くなったときは 50%の幅のコンテンツエリアにする（つまり、3つ横並びが2つ横並びに変
Operaといえば、WebKit、IE、Firefoxに次ぐ独自のブラウザとしてPCや、ゲーム機などにブラウザを提供しています。しかしこの度、新しいスマートフォン向けWebブラウザ「Opera Ice」を発表し、そこではこれまでのOperaと異なり、WebKitをベースにすることを発表しました。 動作デモが「Pocket-lint」というニュースサイトに掲載されています。 といって、Opera本体を WebKitベースにするというわけではなく、スマートフォンブラウザの製品として「Ice」という名称をつけているようです。曰く “Opera mini is great, but it is not a fully-fledged offering like Chrome or Safari. There are too many sites it doesn’t work with.” とのこ
Gmailや Googleカレンダーなどで、Webアプリが未来のアプリケーションの姿になると思われましたが、やはりデスクトップアプリにはかなわず、近年ではSparrowやFantasticalなど、Googleの各サービスと同期をするアプリを利用する機会が多くなり、またEvernoteや、Nozbeなど標準でクライアントアプリを備えるサービスも増えています。 そんなデスクトップアプリを、Webの技術で作れるSDKが「TideSDK」です。ここでは、OS Xでのセットアップ方法を紹介しましょう。 まずは、ダウンロードサイトで、SDKとヘルパーアプリをダウンロードします。 SDKは、「~/Library/Application Support/」に「TideSDK」というディレクトリを作成して、その中にコピーします。ヘルパーアプリは、アプリケーションフォルダにインストールします。 ヘルパーアプ
今年、私がもっともはまった言語系のプロダクトと言えば「FuelPHP」になります。 そんな、FuelPHPの Advent Calendarが開催されていたので、私も参加いたしました。 昨日の @LandscapeSketch さんの「FuelPHP + NetBeans + Gitで高速開発環境を整える」を受けて、私からは「Coda + FuelPHPでお手軽開発環境を作る」をお送りします。 Codaとは、Panic社から販売されている OS X向けの Web開発ソフトです。軽量・高機能で筆者ももっとも愛用しているソフトの一つです。 この「Coda」、名前からしてHTMLのコーディングにしか使えないだろうと思われている方も少なくないのですが、実はプログラミングにも最適な開発ソフトです。ここでは、FuelPHPを少しでも開発しやすくするための、各種機能を紹介していきましょう。 セットアップ
Googleは、「Google ウェブマスター向け公式ブログ」で「タブレット端末ユーザーにはフルサイズのウェブを表示しましょう」というエントリーを公開しました。 ポイントは以下の通り。 タブレットユーザーは（タブレット専用でなければ）、スマホサイトよりも PCサイトを期待している レスポンシブ・ウェブデザインを採用する場合は、タブレットでも十分テストすべし 端末振り分けをする場合は、Androidタブレットをスマホと見分けないように注意すべし として、Androidのユーザーエージェントではスマートフォンの場合のみ「Mobile」というキーワードが含まれるので、これを使って振り分けるように解説されています。 Googleと言えば、「Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法」というエントリーでレスポンシブ・ウェブデザインを公式に推奨し、それによって「レスポ
CSSを書くとき、思いつきで必要なプロパティをどんどん書き並べて行ってしまうことが良くあります。それを、プロパティの重要度順？ に並び替えてくれるのが「CSScomb」です。 例えば、次のような CSSの場合 lNavi a { color: #fff; border-bottom: none; display: block; background-repeat: no-repeat; background-image: url(../_images/bg_lnabi_normal.gif); padding: 8px 5px 6px 34px; font-size: 93%; text-decoration: none; } 並び替えると、こんな感じ。 lNavi a { display: block; padding: 8px 5px 6px 34px; border-bottom:
次のページ
このページを最初にブックマークしてみませんか？
『H2O blog - H2O space たにぐち まこと の技術メディア』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
