ドットインストール代表のライフハックブログ
イデアルITスクールというところで、1時間ほど話をしてきました。 プログラマとしてやっていくために大事なことというテーマ。 資料を作らずに、というか構想すら練らずにやってしまったので、ここで整理とまとめと補足を。実際にこれをしゃべったというのではなくて、だいたいこんなことをしゃべろうとしてたという内容をかなり盛って書いてます。 当然ですが、プログラマの仕事はプログラムを書くことです*1。 プログラマとしてやっていくためには、どこで動くプログラムを書くか、なにをするプログラムを書くかということを意識することが大事です。 ということで、まずはプログラムが動くところがどう変わったかという話。 1970年代ころは、デバイスを動かすためのプログラムが多かったのではないかと。 あと、ここには書いてないけど、業務アプリはほぼメインフレームで動いてたと思います。 それが、1980年代くらいからパソコンが出
Optimizing WordPress Permalinks with htaccess [ad#ad-2] 下記は各ポイントを意訳したものです。 年/月/日のパーマリンクを年だけに変更 削除したページのリダイレクト 機能を失ったページを消す カテゴリ内の全部を別のサイトへ 年/月/日のパーマリンクを年だけに変更 パーマリンクの構造を下記のように設定した年/月/日を年だけに変更します。 パーマリンクの構造(年/月/日) /%year%/%monthnum%/%day%/%postname%/ この設定は、下記のようなURLを生成します。 http://deadletterart.com/2008/09/10/impertinent-art-review/ http://deadletterart.com/2011/06/18/california/ http://deadletterar
デザイナー向けのチートシートまとめ カラーシート Color Combination Cheat Sheet さまざまな色の基本原則がわかるカラーチートシートです。 使いたい色を直感的に選んで、その色のコードを調べることができます。 オンラインシートなので、ブックマークに保存しておくとすぐに調べられます! Web Designer Color Reference Hexagon Mouse Pad Webデザイナー向けのカラーチートシートです。 拡大するとそれぞれのカラーのコードがわかります。 色彩バランスを把握しやすいので、デザイン時に重宝します。 ウェブ制作者向けのチートシートまとめ HTMLのチートシート HTML5タグ★チートシート HTML5のチートシートです。 かなり詳細にまとめられているので、辞書のように使うこともできます。 印刷して参照するのが向いているので、すぐに確認で
知り合いが便利そうなものを作っていたのでご紹介します。 Web制作時によく使う機能をひとまとめにしたjQueryプラグインです。 読み込むjsのファイルが増えてきたり、その都度追加していくのが面倒だなと感じてきていたのでこういうのは非常に助かりますね。 Laquu.js 個人的によく使う機能 アコーディオン ドロップダウン ブランク XHTMLで非推奨とされているtarget属性の代替となる機能です。 個人的にはJSで実装するなら非推奨でも入れてしまいますが… ちなみにHTML5ではtarget属性は復活しています。 スクローラー ページ内リンクのスムーススクロールを実装する機能です。 スクロール2ビュー スクロールを検知して指定要素を表示/非表示してくれる機能です。 イメージオーバー そのうちプリロードしてくれるようにするそうです。 ツールチップ コナミコマンド ネタ機
ほとんどCSSは変えずにxhtmlとHTML5で同じレイアウトの作成と作りながら悩んだことまとめました【サンプルソース付】 xhtmlとHTML5で簡単なページレイアウトを作成し、コーディングのタグ違い、新要素(タグ)の説明、アウトラインの説明してきましたが、今回が最終でCSSでレイアウトまでを作成させました。 【前回のまでエントリー】 HTML5は難しくない!? XHTML1.0とHTML5のコーディングの違いを確認してみよう!【初級編:HTML5のマークアップ】 HTML5は難しくない? HTML5から追加された新要素を理解しよう!【初級編 :HTML5のマークアップ】 HTML5のアウトラインって何?xhtmlとHTML5のコードを比較してアウトラインを理解しよう!【初級編 :HTML5のマークアップ】 HTML5では要素やCSSの設定の仕方でいろいろな考えがありますので今回のソース
制作にかかるコストを極限までスリム化したビジネスサイト作成ツール。 「みんなのビジネスオンライン」 なんとドメインも1年間無料というふとっぱら。 制作→Googleの広告であるアドワーズの利用を促すものではないかと。 襲ってきたと書きましたが、それほど危惧するほどのモノでもないような気がします。 結局誰かの手が必要な気がします 無料で制作と言うものに凄く夢がありますが、現実問題そんな簡単そうではなさそうで。 これまでも結局webサイトは、作成も重要ですが、作成後の運営のほうがはるかに重要であると言う事を書いてきました。 実際にwebサイトには、つくるまえ、つくるとき、つくったあと、という3つのステップの説明がされています。 本当に簡単に説明されていますが、これこそがサイト作成前にめちゃくちゃ考える事であって、web屋とweb屋じゃない人との、埋める事のできない溝じゃないかと思います。なので
iPhone, Androidのスマートフォンなどの小さいスクリーンから、デスクトップの大きいスクリーンまで、それぞれの表示サイズに合わせて最適なレイアウトを提供するHTML5+CSS3のテンプレートを紹介します。 サイズ変更時はレイアウトの一部がアニメーションで移動し、面白い仕掛けにも利用できそうです。 デモページ:幅480pxで表示 [ad#ad-2] HTMLの構造 テンプレートはブログを想定して作成されています。 ヘッダ、ナビゲーション、特集記事、最近の記事、サイドバー、フッタ、とシンプルな構成です。 HTML: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Onextrapixel - Responsive Web Design Template</title>
こんにちは、「livedoor Blog」を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blog では、スマートフォン分野に注力しながら、月間15億PV あるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blog で採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。 1年前と比べると、iモードブラウザ2.
ウェブサイトの要素をレイアウトをする際に非常に重要な ホワイトスペースの考え方について、すこしまとめてみました。 私が人にウェブデザインを教えるときは、まずここから始めます。 boxとboxとの空間の開け方、要素と要素の「間」は、音楽でいうところの「リズム」だと考えています。 リズムが整っていれば、他の要素が主張したことが上手に伝わります。 リズムが整っていなければ、けんかしあい、不協和音=見づらい状況を作り出します。 自分なりのリズムを見つけていけば、それが個性・ジャンルになるのです。 どれが間違っている、というお話ではなく、どんな風に感じたかを大事にして読んでみてください。 とてもとてもシンプルな例を出してみます。 AとBを比較してみてください。 どちらのほうが読みやすいように感じますか? どんなふうに感じましたか? この例では、Bのほうに大きな余白を与えました。 4隅すべて同じぐらい
少しリソースが溜まってきたのでリンク集に して開放します。バックリンク不要で、商用 の利用可能、著作権表示も不要のWebデザイン 向け素材サイト。商用で使ってもいいけど リンクしてね、といったようなCCのBY的な ライセンスだとどうしても個人的に使いにく いのでバックリンク不要は割りと必須です。 今までのリソースをまとめただけなのでほぼ全部既出だと思います。自分用リンク集なのでいろいろ適当です。 細かいライセンスもあるので利用規約には必ず目を通してください。 9search この記事の題名の条件の素材を紹介しているサイト。小物系探すなら最初にここ見たほうが早いです。 9search ソザィ-Sozay- こちらもこの記事の題名の条件で収集していますが、素材単位ではなく、Webサイト単位で紹介しています。国内多めですかね。 ソザィ-Sozay- 国内のWeb制作に役立ちそうな無料の写真素材や
習慣化するのは難しい 今の自分は何でできているか、というと、当然ながら、やってきたことによってできているわけです。 つまり、習慣が人間を作る、ということです。いい習慣が見についていれば、理想的な自分になれたりするのは反論の余地がないことだと思います。 いい習慣をして、悪い習慣を減らすだけで、人生が劇的に変わっていく、というのはいろいろなビジネス本でも言われていることですね。習慣を変えれば人生がバージョンアップするといっても過言ではないかと思っています。 しかしいい習慣を身につけるのは大変です。テレビを見ちゃう、ダラダラしちゃう、などの悪い習慣をやめるのも大変です。で、僕は基本的に人間が感じる平均的なダメなところはすべてダメな平均的な人間なので、困っていました。 そしたら、以下みたいな本を読んだらすごいいいことが書いてあったので一部を紹介します。 幸福優位7つの法則 仕事も人生も充実させるハ
サイトのデザインを変更しようかと思ったのですが,自力でデザインを考えるのは限界があるのでフリーの HTML/CSS テンプレート集をざっと探してみました.尚,どのサイトが人気なのか分からなかったので,各種ソーシャルメディアのカウントを取得して併記してみました.海外サイトばかりなので,SBM としてははてなブックマーク以外に Delicious のカウントも取得しています. 掲載されてあるデザインはまったく見ずに,サイトの使いやすさ(と言うか「広告の少なさ」かな)だけからの感想ですが,個人的には http://www.solucija.com/ が使いやすいかなぁと言う気がしています. URL Delicious Hatena Twitter Facebook 1 http://www.oswd.org/ 24,170 951 471 1,002 2 http://www.freecsste
この記事は、2011/9/11 に神戸芸術工科大学で開かれた「WordCamp KOBE 2011」で私がお話しした「WordPressサイトをデザインする時に気をつけていること」というセッション内容をブログ記事として起こしたものです。 当日はたくさんの方にお越しいただきありがとうございました。 会場に入れなかった方もいらっしゃったそうですみません。 この記事で、少しでも内容を共有できればと思います。 このセッションでは、オリジナリティのあるWordPressサイトのテーマをデザインする際に私が気をつけていることについてお話させて頂きます。 このセッションでお伝えしたいことは「4つ」あります。 いずれも、私がオリジナルのWordPressテーマをデザインする際に気をつけていることです。 このセッションで伝えたいこと このセッションでお伝えしたいことは「4つ」あります。 いずれも、私がオリジ
[レベル:初級] 今日は、検索エンジンのロボットの動きを制御する「robots meta タグ」の記述の仕方について説明します。 robots meta タグにはいくつか種類がありますが、一般的によく使われる、noindex・nofollow・noarchiveの3つのrobots meta タグに関しては以前に詳しく説明しています。 十分に理解していないと思えば、併せて読んでください。 ちなみに日本のYahoo!では、noydir の robots meta タグはサポートが終了しています。 なお原則的にGooglebotを対象にした話なので、他の検索エンジンのロボットでは違う動きをするかもしれません。 1. 複数の属性値はまとめられる 属性値が複数あるときは、ひとまとめにできます。 <meta name="robots" content="noindex" /> <meta name=
「Ferret Analytics」 ターゲット 「ブログの無料アクセス解析ツールでは物足りなくて」あるいは「無料で機能が豊富という話を聞いて」Google Analyticsを導入したけど、「レポートが多い」あるいは「用語が分からない」という事でページビュー数くらいしか見ていないECサイトやブログで商売をされているサイト向け。 イントロダクション バージョンアップや機能追加により、有料アクセス解析ツールと遜色ない状態に近づいているGoogle Analytics。しかし使い始める人にとっては少し難易度が上がっているのではないでしょうか? 先週リリースされたばかりの「Ferret Analytics」はGoogle Analyticsのレポートを取り込んでわかりやすいレポートに変換してくれる、無料のアクセス解析サービスです。SEO系のツールなどを提供している、株式会社ベーシック様の製品にな
全653種、商用利用無料、再配布可能だけでもすごいですが、更にベクターのEPS付きとフリー素材として至れり尽くせりのアイコンを紹介します。 アイコンのデザインもシンプルなので、使い勝手もよさそうです。 Default Icon [ad#ad-2] ダウンロードできるアイコンのフォーマットはEPS, PNG(16x16, 32x32, 48x48, 64x64, 128x128, 256x256)です。 アイコン全653種はウェブサイト・ウェブアプリケーション用にさまざまなものが揃っています。 以前紹介した際はver.1で168種類でしたが、作者様よりver.2にして数も増やしたよ、と連絡を受けました。 [ad#ad-2] アイコンのライセンスはCC 3.0で、個人でも商用でも無料で利用できます。また、再配布も可能、とのことです。
FIXED gray window problems FIXED IMPROVED REMOVED Localized into Japanese Compatibility with Finder in the upcoming OSX update(10.6.7) Added Copy Path menu item support Fixed some gray window problems Fixed invalid version info reported at some places Fixed scrolling bug in icon view in dual mode Visor When sliding Visor up, visor window always appears on top of other TotalFinder windows. Pre
内容:「Free online OCR」は、画像内に含まれる29カ国語のテキストをOCRで抽出できるサービスだ。テキストをコピーしたいのに画像化されていてコピーできない場合に、このサービスを使うことで画像内の文字列をテキストデータに手軽に変換できる。 「Free online OCR」は、画像内に含まれるテキストをOCRで抽出できるサービスだ。テキストをコピーしたいのに画像化されていてコピーできない場合に、このサービスを使うことで、画像内の文字列をテキストデータに手軽に変換できる。 画像内に含まれるテキストをOCRで読み取ってテキストデータに変換するツールは、一般的にソフトウェアとして配布および販売されていることが多い。このサービスではソフトのインストールが不要で、利用する際の会員登録も必要ない。サイトを開いて画像をアップロードし、言語を選択して送信するだけでテキストが抽出されるという手軽
PHPカンファレンス2011 で"PHPとテストとCIと私〜愛するあなたのため〜"というタイトルで発表してきました。 当日は、ほとんど寝ず、午前中は #nekkonという結婚式に参加してからの発表だったから辛かった。実質寝てねーからつれー。発表つれー。 内容としては架空の某システムの裏方に入った、 架空の人が、いかにレガシーコードと戦い、TDDやCIを適用していったか、 また、適用するにあたりどういう便利なツールを使ったか、 また、チームにそれらの文化を浸透させるためにどうしたか。 などといった内容となっています。 以下がプレゼンのスライドを Slideshareに上げたやつです。あとUSTの録画もありました。 http://www.ustream.tv/recorded/17177077 PHPカンファレンス2011 PHPとテストとCIと私〜愛するあなたのため〜View more pr
ちょっと前にTogetterで作成したまとめに対して大きな反響をいただきました。 SIerは自動化する対象が違っているのでは? - Togetter これは、私が Continuous Delivery: Reliable Software Releases through Build, Test, and Deployment Automation (Addison-Wesley Signature Series (Fowler)) 作者: Jez Humble,David Farley出版社/メーカー: Addison-Wesley Professional発売日: 2010/07/27メディア: ハードカバー購入: 3人 クリック: 141回この商品を含むブログ (23件) を見るを読み始めて、ふとつぶやいた をきっかけに始まったTL上での議論をまとめたものです。この本は、7月に行わ
こんにちは。新規開発グループのtakejuneです。 新規開発グループは、その名のとおり新規サービスの開発を担当するグループです。次世代のライブドアを担う「具体的に、人を幸せにするサービス」を生み出すべく日々奮闘しています。 そういうサービスを考えるためのヒントは、古き良きWebサイトの中にも転がっている。今回はそんな話です。 『Craiglist』というサービスを知っていますか? Craiglistは1995年より運営されている、アメリカ最大の"クラシファイド"サービスです。超有名サービスなので、知っている方も多いと思います。 Creiglistは簡単に言うと"地域情報掲示板"のようなサービスです。 このサイトでは、不動産・求人・チケット・家具・洋服・ペット・教育など様々な種類のサービスが募集・応募・売買・交換されており、”売りたい人と買いたい人”のマッチングが膨大なカテゴリで実現されて
正規化とは、データを一元管理するための理論です。 1データ1箇所の原則を実現するために、1970年にE.F.Codd氏がリレーショナルモデルの理論として提案しました。正規化の理論は、データの冗長性を排除し、更新時の整合性を維持しやすくすることを目指しています。 具体的には、属性間の関連性を分析し、属性の最適なグループ化を図ることを目的としています。 一般には第3正規化まで行えば十分といわれていますが、本来は、あてはまる場合にはきちんと第5正規化まで行う必要があります。 まず、正規化の処理をする際によく出てくる関数従属という用語の意味を復習しておきましょう。 ◎ 関数従属とは ある属性Aの値が決まると他の属性Bの値が一意に決まるとき、「属性Bは、属性Aに関数従属である」(A→B)といいます。 完全従属とは、2の属性A、Bの間でA→Bが成立し、Aが複数の属性の集合で成り立っている場合、Aのいか
紹介されているコードを使うとIPアドレス偽装が実装できてしまうおそれがあるので注意してください。プロクシ由来の他のヘッダも利用した上で注意して使う必要があります Get Real IP address of the Visitor using PHP | Expert PHP Developer プロキシ経由でもリアルIPを取得するPHPコードスニペットが公開されています。 リアルIPを集計したい局面はありますから覚えておいてもよさそうですね。 特に難しいコードではありませんが、サクッとやりたい時にはコピペで使えますね。 知らなかった場合はこういうヘッダが入ってくるのだと覚えておいてもよいかも 追記:フォロー記事をいただきました IP アドレスが偽装可能か確認してみよう - A Day in Serenity @ Kenji 関連エントリ OAuth対応のPHPでTwitterに投稿するス
負荷的に厳しくなってきたので sakuratan.biz を Apache(さくらスタンダード)から nginx(さくら VPS 512)に移転しました。 頻発していた 503 もほとんど出なくなって快適です。 Apache から VPS の nginx へ WordPress を移転したいと考えている人もいるかなーと思いましたので、さくら VPS で nginx リバースプロクシを使った WordPress ブログの構築する方法をがっつり書いていきたいと思います。 結構長文になってしまいましたので、先に索引を載せときます。 nginx とは nginx が速い理由 リバースプロクシ さくら VPS にインストールするシステム構成 EPEL パッケージリポジトリのインストール MySQL のインストール PHP のインストール nginx のインストール nginx と PHP FastC
コンテンツへスキップ モバイル通信 オプション扱いにはなりますが…。 大概のプロバイダーが…。 毎日WiMAXを使用しているわけですが…。 ワイモバイルと言いますのは…。 WiMAXに関しては…。 LTEに関しては…。 ワイモバイルも通信可能なエリアは拡大の一途を辿っており…。 オプションにはなるのですが…。 現段階で市場にある色々なモバイルルーターの中で…。 いろいろ調べましたが…。 思いの外知らない人が多いようですが…。 WiMAXモバイルルーターに関しましては…。 正直申し上げて…。 キャッシュバックを受け取る前に「契約を解約」なんてことになりますと…。 様々に比較検討してみましたが…。 「ポケットWiFi」と申しますのは…。 モバイルWiFiの月額料金を格別低い金額にしている会社を調査してみると…。 NTTDoCoMo又はY!mobileに規定されている速度制限が行われますと…。
HTML5は難しくない? XHTML1.0とHTML5のコーディングの違いを確認してみよう!【初級編:HTML5のマークアップ】 先日のエントリーでもHTML5で作成されたサイトが増えてきていることから、そろそろHTML5の勉強をそろそろしなければと思っている人も多いと思います。 グーグルの特設サイトなどがトリッキーなことをやっているのでHTML5=難しいと思っている人もいると思いますが、あのような動的なサイトやAPI関連をいきなりやるのはなかなか大変ですし難しいです。それよりほとんどの人ですぐ必要になるのが通常のページをどうマークアップするかだとおもいます。 構造の考え方が全く変わりましたが、マークアップだけでしたらXHTMLとHTML5はいままでxhtmlでマークアップしていた人にとっては簡単に乗り換えられるとおもいます。 xhtmlではブロックレベル要素とインライン要素という分類に分
Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
このエントリでは、あるPHPの入門書を題材として、Ajaxアプリケーションの脆弱性について検討します。全3回となる予定です。 このエントリを書いたきっかけ twitterからタレコミをちょうだいして、作りながら基礎から学ぶPHPによるWebアプリケーション入門XAMPP/jQuery/HTML5で作るイマドキのWeという本を読みました。所感は以下の通りです。 タレコミ氏の主張のように、本書はセキュリティを一切考慮していない 主な脆弱性は、XSS、SQLインジェクション、任意のサーバーサイド・スクリプト実行(アップロード経由)、メールヘッダインジェクション等 脆弱性以前の問題としてサンプルスクリプトの品質が低い。デバッグしないと動かないスクリプトが多数あった 上記に関連して、流用元のソースやデバッグ用のalertなどがコメントとして残っていて痛々しい 今時この水準はないわーと思いました。以前
ヘッドライトの黄ばみがサッとキレイに! メッキ・ホイール・シートにも使えるマルチ過ぎなお手軽クリーナー「ウルトライト」
AceはCloud9でも使われているWebベースのプログラミングエディタ。 AceはJavaScript製のオープンソース・ソフトウェア。あまり好まない人も多いようだが、個人的にはそろそろ開発環境もWebアプリケーション化してくれないかと思っている。そのためには幾つか乗り越えるべき問題があるが、最初の問題はエディタ環境だろう。 行番号の計算が適切でいい Webブラウザのテキストエリアレベルでは全く話にならない。プログラマーが開発しやすいエディタになっている必要がある。そんなWebベースの開発環境を目指すIDE、Cloud9で使われているエディタ環境を作っているのがAceになる。 AceはJavaScriptベースの独立したエディタ環境になる。そのため外部のソフトウェアに組み込むことも可能だ。10種類以上の言語に対応したハイライター、縦または横に画面を分割したり、テーマを変更して色合いをがら
皆さんは、生産性を向上させるためにどのようなことを行っていますか? 周囲の人たちに尋ね回り、仕事術についての数々のセオリーと戯れ、もっと効率的に作業できると約束するアプリを次から次へとダウンロードしたかもしれません。 今回は「どれも役に立たなかった...」と感じている方へ、最も定評のある生産性システムと、メソッドの選び方、自分に合った生産性システムの構築法をご紹介しますので、ぜひ参考にしてみてください。 もし、あなたが自分自身が生産的であろうとするよりも、生産性テクニックについて調べたり試したりすることに時間をかけているのだとしたら、本当の助けにはならないでしょう。ライフハッカーを読んでいるということは、生産性の向上に関心があるに違いありません。だからといって、他の誰かのやり方をそっくり真似する必要はないのです。 様々なテクニックがありますが、これひとつで全てOKという解決策は存在しません
cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード.centered { position: relative; overflow: hidden; } .centered ul { position: relative; lef
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
デスクトップ用のブラウザだけでなく、iPhoneなどスマートフォンにも対応した、表示サイズに最適なレイアウトを適用するResponsive Web Design用のシンプルなグリッドシステムを紹介します。 ~720px ※画像クリックで拡大 [ad#ad-2] SimpleGrid 3つの特徴 Responsive Web Design SimpleGridは4種類のスクリーンサイズで最適なレイアウトを提供します。 水平スクロールバーとは、さよならです。 ~720px 720px~ 985px~ 1235px~ 効率的なclass管理 同様のグリッドシステムの多くは、同じサイズのグリッドを一つのclassで管理します。SimpleGridではユニットの最初・中央・最後を個別のclassで管理します。 スタイルシートはシンプルに SimpleGridは管理のしやすいシンプルなclass名を採
クオリティを上げるためにはちょっとした「こだわり」がとても大事です。 定期的に話題になるネタで恐縮ですが、素人っぽいデザインにならないように個人的によく使ってる小技をまとめました。 上のものほど、簡単で多くのデザインに使える小技になります。 1pxのボーダーを使う 1pxの効果を使うのと使わないのでは、デザインの質に大きな違いが生まれます。 ある意味Webデザインでは一番重要な要素かもしれません。 定番です。たった1pxのボーダーをつけるだけでシャープな印象になります。 ただ塗りつぶしただけ、グラデーションを入れただけのボタンでは、のっぺりとした感じになりやすいですが、1pxのボーダーを上部に入れるだけでシャープな立体を表現できます。 正確には1pxでなく2pxですが、こうして黒系のボーダーと白系のボーダーを並べることで、明確にかつシャープに仕切りを表現できます。 1pxのドロップシャ
Googleから出ているJavaScript圧縮&最適化ツールのClosure Compilerが思いのほか簡単に使えた。 まぁ、基本は関連リンク[2]のClosure Compiler Service にアクセスして使えばいいのですが、ファイルサイズが大きい場合はエラーが出るようです。それに、ローカルでやった方がスピーディーにできるというのも魅力かも。 そんなわけで、ローカルでの使い方 Getting Started with the Closure Compiler Application – Closure Compiler – Google Code にすべてが書いてあるのですが、 1. compiler.jarをダウンロード 2. java -jar compiler.jar –js hello.js –js_output_file hello-compiled.js を実行す
JavaScriptのコードはクライアントサイドで動作し、誰にでもコードが読めてしまいます。 あまり自分の書いたコードは読まれたくないもので、せめてコードを読みにくく、ということで難読化のツールが多数公開されてます。 最近のJavaScriptブーム以前よりそういったツールは当然ながら存在するようで、ちょっとまとめてみました。 GUI/コマンドラインツール ObfuscateJS - JAVAで書かれたGUI画面で難読化。改行/タブ除去の他変数名変更 Dojo compressor - JAVAで動作するコマンドラインツール。スペース等除去。サイト上で変換前、変換後のサンプルが見れます JavascriptZIP - JAVAで書かれたJavascriptコード圧縮ツール JSC (JavaScript Compressor) - EXE形式でコマンドラインで使える圧縮ツール オンラインで
オンラインでJavaScriptを圧縮や軽量や難読化するツールのリンク集です。 JavaScriptとCSSを圧縮・軽量・難読化するオンラインツール JavaScriptを圧縮・軽量・難読化するオンラ
// ==ClosureCompiler== // @compilation_level SIMPLE_OPTIMIZATIONS // @output_file_name default.js // ==/ClosureCompiler== // ADD YOUR CODE HERE function hello(name) { alert('Hello, ' + name); } hello('New user');
Java開発者が知らないと損するPaaSクラウド8選:ユカイ、ツーカイ、カイハツ環境!(25)(1/3 ページ) 進化・激変するJavaクラウドの現状を知る、まとめ 本連載「ユカイ、ツーカイ、開発環境」では、Javaが利用できるクラウドコンピューティングのPaaS環境について、いくつか紹介してきました。最近では、レッドハットの「OpenShift」とヴイエムウェアの「Cloud Foundry」などのPaaSクラウドのβサービスが提供され始め、また、いままで紹介した各クラウドの事情も変わってきました。 本稿では、Javaで利用できる以下の8つのPaaSクラウドの最新動向をお届けします。 機能を拡充し続ける「Google App Engine」 「Stax」はCloudBeesに買収され「RUN@cloud」に Morphの「AppSpace」は「mCloud」に .NETだけじゃない「Wi
9 Dropbox Plugins for WordPress WordPressとDropBoxを連携するプラグイン集9つ dropboxをCDNにして転送量を下げたり、エントリの画像アップに使ったり、バックアップに使ったりと色々と便利なプラグインがあるみたいです。 ブログエントリはある意味で資産なので、こうした形でお手軽にバックアップできるのは嬉しい限り。 APIを公開することでこうしたツールがどんどん生まれていくので、サービス提供する側としてはAPIはやっぱりあったほうがいいなぁという印象です Dropbox CDN DropboxをCDNとして使うことができるテーマ。CSSやJSをDropboxのCDNに任せることができるので、転送量低減に役立ちます。 Dropbox自体がAmazonのS3らしいので信頼性も問題なさそうです PressBox Dropboxにアップロードした画像を
以前から気になっていた Selenium WebDriver を使ってWebアプリの自動テストを試してみたので忘れないうちにメモ。 WebDriverに惹かれたのは以下の理由 ブラウザの操作がJavaで簡単に書ける(学習コストが低い) 記述するコードが簡潔で分かりやすい(コードのメンテナンスがしやすい) JUnitからも実行できる(Jenkinsから実行して自動化したり) ブラウザのスクリーンショットが撮れる(エビデンス作成) 導入準備 ここから Selenium Client Drivers(Java) をダウンロードしてjarにクラスパスを通すだけ。 Mavenを利用する場合、pom.xmlに selenium-java を追加するだけでOKです。 ブラウザ操作の機能のみを利用するだけなら selenium-htmlunit-driver は不要なのでexclusionを指定しておくと
L'évolution de la fonction publique et des principes qui la régissent Le Premier ministre a saisi le Conseil économique, social et environnemental (CESE) en vue d’une réflexion prospective afin d’identifier des pistes d’avenir pour la fonction publique. Après deux mois d’auditions et de concertation, le CESE qui réunit les principales composantes de la société civile, a construit ses recommandatio
Mercury Editorは実際に表示された内容をそのまま編集できるWYSIWYGエディタ。 Mercury EditorはHTML5/JavaScript製のオープンソース・ソフトウェア。Webサイトを運営していると、一部のデータを変更したいというニーズは必ず発生する。全てを自動化できる訳はなく、アイコンやラベルの変更は手作業で行うだろう。 編集中 しかしシステムへの組み込みで細分化されたテンプレートを完成図を予想しながら変更していくのは難しい。そこで完成された図をそのままに修正する試みはどうだろう。それを可能にするのがMercury Editorだ。 Mercury EditorはJavaScript製のコンテンツエディターだが、表示されているWebサイトをそのまま編集できる所が新しい。実行すると画面上にツールバーが表示されて編集できる状態になる。編集できる場所は指定可能だ。文字装飾
Microsoft Ajax MinifierはJavaScript/CSSを短縮化/難読化するWindows用のソフトウェア。 Microsoft Ajax MinifierはWindows用のオープンソース・ソフトウェア。Webアプリケーションはもちろん、WebサービスであってもJavaScriptを多用することが当たり前になってきている。またjQueryなどのフレームワークは大型化し、これまでは気にするほどでもなかったネットワーク帯域を使うようになってきている。 実行中 そのためJavaScriptは運用時には改行などを消してサイズを極力小さくして使うようになっている。そうした短縮化および難読化に用いるライブラリとしてMicrosoft Ajax Minifierを紹介しよう。 Microsoft Ajax MinifierはJavaScriptとCSSに対応した短縮化、難読化ライブ
Kern.jsはLettering.JSと連携してビジュアル的に文字間を調整するJavaScriptライブラリ。 Kern.jsはHTML5/JavaScript製のフリーウェア(ライセンスはWTFPL)。HTMLは表現力が高い。しかし雑誌のようなレイアウトを表現するのはまだまだ力不足だ。もちろんCSSを駆使すればできないことではないが、設定が大変だ。 文字をつめた所 例えば行の折り返しに伴って文字間がひどく広がってしまう場合がある。そんな時にDTPであれば前後の単語の文字間を狭めることによって指定範囲に表示が収まるように工夫する。それをWeb上で再現するのがKern.jsだ。 カーニングとはいわゆる文字間調整のことだ。Kern.jsは以前紹介したLettering.JSをより手軽に使えるようにするソフトウェアで、ブックマークレットとして利用できる。Lettering.JSを使って装飾して
Website Load ToolはWebサイトやサーバのステータスを監視するデスクトップソフトウェア。 Website Load ToolはWindows用のオープンソース・ソフトウェア。今はWebサイトが企業としての全ての利益をまかなう場所になっているケースも少なくない。そういった企業にとってはWebサイトの死活がそのまま利益に直結するので、とても重要になる。 メイン画面 また、企業内においてもLANやインターネットを使わないと業務が成り立たないという事実もある。不意にネットワークが使えなくなったりすることのないよう、Website Load Toolでチェックしておこう。 Website Load ToolはURLを指定して、そのURLに対してアクセスして状態をチェックしてくれるソフトウェアだ。URLと適当な名前を設定すれば、後はスタートボタンを押すだけで良い。サーバは複数設定が可能
Fight CSV!はCSVの各行をオブジェクト化することでシステムからの扱いを容易にするライブラリ。 Fight CSV!はRuby製のオープンソース・ソフトウェア。システム開発を行う際にCSVを扱うケースは多々ある。データをまとめて放り込んだり、一括更新したりする時に使われるケースが多い。しかしシステムで扱う時にはとても面倒なフォーマットだ。 利用中 CSVを扱いやすくするライブラリは多いが、項目をばらす程度で後は配列のキーごとに処理を書いていかなければいかない。これはバグをはらみやすいし、値のチェックも大変だ。そこで使ってみたいのがFight CSV!だ。 Fight CSV!はクラスを定義して、CSVのヘッダーに定義されている項目ごとに処理分けを書くことで、CSVの各行をオブジェクトとして扱えるようにするライブラリだ。各カラムごとに処理を書けるので、バリデーションしたり、文字列を日
WP Document RevisionsはWordPressを使ってドキュメント管理システムを構築するプラグイン。 WP Document RevisionsはPHP製/WordPress用のオープンソース・ソフトウェア。元々はブログエンジンとして登場したものの、シェアを一気に拡大していく中でCMS(コンテンツマネジメントシステム)として進化しているWordPress。Webサービス開発のベースに使われることも多い。 ファイルアップロード そんなWordPressが次なる進化を遂げようとしている。それは環境になることだ。もはやWordPressがなければビジネスが回らない、そんな状態になってしまうのだ。その一つ、WordPress上でドキュメント管理システムを構築するのがWP Document Revisionsだ。 WP Document Revisionsはリビジョン管理システムを含
Dropbox-UploaderはShellスクリプトで動作し、指定したフォルダ/ファイルをDropboxへアップロードする。 Dropbox-UploaderはShellスクリプト製のオープンソース・ソフトウェア。Dropboxの人気はとても高い。とりあえずフォルダに入れておきさえすれば後は自動で同期してくれるので手間いらずだ。複数のパソコン間でも簡単にデータが同じ状態に保てる。 実行中(この後で止まってしまう…) しかし様々な事情でDropboxを入れられないケースもあるだろう。全てのファイルがコピーされるのでごく小さなSSDしか備えていない場合もあるだろう。そんな人でもとりあえずファイルをアップロードすることができるのがDropbox-Uploaderだ。 Dropbox-UploaderはShellスクリプトとして動作する。使い方は簡単で、ターミナル上でユーザ名を入力し、アップロー
プログラミングとデザインにおける論理と感覚って、同じようなものなんじゃないかな。とようやく実感してきた。だからこそ、僕たちがプログラミングに触れてきたようにデザインに触れてきたデザイナーさんの力を借りたいよね。あと、コミュニケーション大事。そんな話。 祝日の朝にカフェでダラダラ書いたので、グダグダで読み返すと何言ってるかわからない。でも、休みの日にカフェでプニプニと文章書いてると、気分転換になってよかった。食事をとらずに食費を浮かせてカフェラテを注文したかいがあった。 デザインが見えない。 今年の1月ごろからずっと「デザイン」「デザイン」と言ってるけど、まったく何もやってない。とっかかりがわからなくて、手が出せない感じ。デザインという言葉自体、幅が広くて、デザインの対象がコミュニケーションだったりユーザーインターフェイスだったりする。そこも絞れていない感じ。絞れていないというか、共通する基
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く