You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
![コードウォッチ:関数型プログラミングの自惚れ問題](https://cdn-ak-scissors.b.st-hatena.com/image/square/1ef26f6cb4349557952890dbe3e567f7f98dc151/height=288;version=1;width=512/https%3A%2F%2Fgithub.githubassets.com%2Fassets%2Fgist-og-image-54fd7dc0713e.png)
Retina.js | Retina graph... / lake.js / Timeline他...全5件 Retinaディスプレイかどうかを判別して、高解像度の画像(@2x)をサーバーにアップしておけば、自動的に呼び出してくれるJavaScriptライブラリ。
Webサイトの待ち時間の80%はフロントエンドの処理によるもの なんて言われるとドキっとしちゃいます。どんな素敵にデザインして綺麗にコーディングしても、ページが重くてイライラしてるユーザーがいたら台無しです。なのでスマホ向けサイトのデザインに入る段階から、高速化・軽量化を意識するために、いくつか項目をメモしておきます。 デザインの段階から軽量化を意識する 画像を極力使わないで魅せる努力をする 当たり前ですが、画像を使えば使うだけレスポンスは遅くなります。背景画像にドデーンと写真を使ったり、見出しを使うたびに大きなアイコンを入れるなど、わざわざページを重くさせるようなデザインにする必要はありません。 多少シンプルになったとしても、色のメリハリ・1pxの線などでカバーしましょう。テキストも可能な限り画像にせず、デフォルト文字にするべきです。Webデザイナーの腕の見せ所ですね。 HTML5+C
イベント駆動型のプログラムをきれいに作る JavaScriptのプログラムは、イベント駆動型で非同期な構造が基本となります。他のプログラミング言語で一般的な「同期型」の関数では、例えばネットワーク経由でデータを読み込む場合、データを読み込む関数を実行するとその読み込みが完了するまでプログラムの実行は止まったままになります。 それに対して、「非同期型」の関数を使うとデータの読み込みが完了するまで他の処理を実行でき、読み込みが完了した後で特定の関数を呼び出してもらうことができます。身近な例に例えると、メールを送信して相手からの返信が来るまで何もせずに待つのが同期型関数だとすれば、非同期型関数は返信を待つ間に他の仕事をこなすことができます。 Webアプリケーションはネットワーク通信部分に最も時間がかかる場合が多いため、その待ち時間に他の処理をこなせば、ただ待っているよりも遥かに効率よく多くの処理
ヴィジュアル要素をつくるときに使えるような、表現方法をまとめてみました。 メインビジュアルなどをつくるとき、うまく思いつかず困ってるんだよねーって方の参考になるかな、と思います。 ヴィジュアルの表現方法としては、大きく分けて以下の2種類があります。 ■直接的な表現 人・物・動物・タイポグラフィなどそのものを主役に置いた表現。 ■間接的な表現 抽象的なメッセージを主役に置いた表現。「たとえ」や「見立て」の技法を使う。 今回は、間接的な表現の中でどんなものがあるか、修辞技法をもとにまとめてみました。 言葉だけ聞くと難しく感じるのですが、普段私たちが話し言葉でも良く使っているものですので、理解しやすいと思います。 比喩 直喩法 直喩(明喩、シミリー)とは「(まるで・あたかも)~のようだ(ごとし、みたいだ)」のように、比喩であることを読者に対し明示している比喩である。 「修辞技法」(2011年12
2012年04月19日 最近、新人のテストコードを見る機会があり、ユニットテストの書き方について考える機会があった。ユニットテストはテンプレートみたいなものがあるので、それさえ押さえれば、誰でも簡単に書くことができる。 ここでは、その方法について紹介したい。サンプルはRSpecで書くが、その他のユニットテストフレームワークでも、応用ができるとおもう。 はじめにごく単純化すると、テスト対象は状態を持ち、入力を与えると何らかの出力を行なうものである。入力が変われば出力は変化するし、状態が変化すると入力が同じでも出力が変わる(かもしれない)。 ユニットテストは、テスト対象の状態を操作し、与えた入力によって意図通りの出力を得られるかを確認する作業のことをいう。なので、ユニットテストを書くときには、オブジェクトの状態ごとにメソッド単位で入力と出力を確認するようにする。 RSpecの疑似コードで書くと
PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」 PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」を作成したので公開しておきます。 このライブラリを利用すると スマートフォンでPCサイトにアクセスした場合、指定したスマートフォン用のURLに転送されます。 PCでスマートフォンサイトにアクセスした場合、指定したPC用のURLに転送されます。 スマートフォン用ページでは「PCサイトを見る」なリンクが設定可能で、それがクリックされると、スマートフォンでPC用のサイトが閲覧できます。クリック後は1の転送機能が無効になります PC用のサイトでは、スマートフォンで見た場合のみ表示される「スマートフォンサイトを見る」なリンクが設定可能で、これがクリックされるとスマートフォン用のURLに転送され1の機能が復活します。 個々のページでどのPCページとスマートフォンページが対応
Flashのエンジニアとして著名なGrant Skinner氏が開発している、「CreateJS」の公式サイトがオープンしました。 http://www.createjs.com/ CreateJSはHTML5を介してリッチなインタラクティブコンテンツの制作をサポートする、JavaScriptライブラリとツールのスイートです。CreateJS SuiteにはEaselJS、TweenJS、SoundJS、PreloadJS、とZoeのツールがあります。 私のブログでもEaselJS、TweenJSを使ったインタラクティブコンテンツのデモを幾つか制作して紹介してきましたが、Flashで培われた技術がそのまま利用できる点で非常に使い勝手のいいツール群だと思っています。 EaselJSとTweenJSでテキストエフェクト EaselJSを使った流体パーティクル入門 今回は公式サイトで明らかになっ
Demo 2 赤枠のナビゲーションは左のカラム内の移動、黒枠のパネルは黒枠内のみ、右のバスケットはページ内全てです。 また、中央のテキスト「Remove」をクリックすると、一時的にそのパネルだけ追従をやめます。 Sticky Sidebarの使い方 オーソドックスなデモを例に実装方法を紹介します。 外部ファイル スクリプトを外部ファイルとして記述します。 <script src="jquery.min.js"></script> <script src="jquery.easing.1.3.js"></script> <script src="stickysidebar.jquery.js"></script> HTML ページは2カラムで、サイドバーにパネルをdiv要素で実装します。 <div id="main">コンテンツ</div> <div id="side"> <div id="
<ul> <?php $myposts = get_posts('posts_per_page=10'); foreach($myposts as $post) : setup_postdata($post); ?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endforeach; ?> </ul> <ul> <MT:Entries limit="10"> <li><a href="<MT:EntryPermalink>"><MT:EntryTitle></a></li> </MT:Entries> </ul> どちらが良いとかを単純に論じることはしません。 単なるテンプレートの比較ではなく、僕が感じていること、の羅列。 テンプレートをどこに記述するか? WordPressではフ
Karl Seguinさんの「The Little MongoDB Book」を和訳しました。 この本はMongoDBの基礎を実際に手を動かして学ぶチュートリアルです。 MongoDBの基礎から、データモデルの設計方法、MapReduceなど幅広い内容をカバーしています。 また、特別MongoDBに興味が無くても筆者のNoSQLへの考え方は一読の価値があるだろう。 ダウンロードPDF版 the-little-mongodb-book-ja.pdf epub版 the-little-mongodb-book-ja.epub(あんまりきれいに組版できてないけど…) 誤訳などあれば @hamano まで ソースはこちら: https://github.com/hamano/the-little-mongodb-book 更新履歴2012/04/17 v1.0 初版公開。 2012/06/15 v
はじめに 本連載では、注目を集めるNode.jsを使って、Webアプリケーションを様々なクラウド環境で動かすことを最終目的にしています。Node.jsに触れたことがないJavaやPHPなど普段サーバサイドで開発されている方を主な対象として、まずNode.jsの概要から紹介していきます。 Node.jsとは Node.jsとは、ブラウザGoogle Chrome用に開発されたJavaScriptエンジンV8がサーバ上でプログラムを実行できるように、ファイルやネットワークI/Oなど多くの機能を追加したものです。軽量で効率よく多くのリクエストを処理するネットワークアプリケーションの構築ができるプラットフォームになっています。いわゆるサーバサイドJavaScriptの代名詞として注目を集めています。 Node.jsでは“軽量で効率良く”というのを実現するために次の2つのモデルを採用しています。
知って得する、Webブラウザ上で利用できるグラフィック関連技術。アニメーションや3Dが表現できる「CSS3」をハックしよう CSSで多彩な表現が可能に 本連載では、Webブラウザ上で利用できるグラフィック関連技術を、読み切りの形で、なるべく分かりやすく紹介していきます。第1回である今回はWebの基本技術の1つであるCSSで実現するグラフィック表現を取り上げます。 従来のCSSはWebページのフォントやレイアウトを整える機能がほとんどで、「グラフィック技術」というには物足りないものでした。しかし、CSS3と呼ばれる近年の拡張によって、アニメーションや3D表現を含む多彩な画面効果が実現できるものに進化しています。 この記事は、そうしたCSS3のグラフィック関連機能の基本的な使用方法をまとめて学習することを目的としています。 ベンダプレフィクスについて CSS3の多くの機能はまだ規格策定段階のも
VMwareの仮想マシンのVMDKイメージファイルやISO・NRG・AFFイメージファイルなどをマウントできるフリーソフトが「OSFMount」です。VMDKイメージファイルをマウントさせれば、わざわざ仮想マシンを起動せずに、仮想マシンのファイルの確認やファイルを取り出せます。インストールやマウント操作などは以下から。 まず、VMDKイメージファイルをマウントさせるとどうなるか確認します。 仮想マシンのCドライブをマウントさせると、Eドライブとして表示されました。 中身の確認やコピーも可能です。 サポートしているイメージファイルはRaw Images (IMG, DD)・Raw CD/DVD/Blu-ray Images (ISO, BIN)・Split raw Images (Eg. raw_split.001, raw_split.002, raw_split.003)・Nero Bu
誤解を与えるタイトルにしてしまったので、訂正しました。ごめんなさい。 こんにちは@poyosiです。PNGを使いまくってコーディングしてますか? 会社から「WebサイトでPNGを使うのはNGだからGIFにしとけ」とか言われたことないですか? そうではなくても、「なんとなくPNG使うくらいならGIFにしといたほうが安心」という方もいるのではないでしょうか? 今日は画像ファイルフォーマットであるPNGをWebサイトに使うのはどうなの?というお話をしたいと思います。 WebサイトでPNGを使ってもいいんじゃない? 「WebサイトでPNGを使うのは非常識だろ」という事を言われたのですが、仕様書など特に取り決めがない限りでは、それは違うんじゃないかなと思っています。 私はWebサイトでPNGが使われることについては「どんどん使うべき!」と思っています。 そもそもPNGを使わないほうがよいと言われた理
Webサイトにおいて、レイアウトの基本的な型と、レイアウトからデザインまでの流れを簡単にまとめてみました。 レイアウトからデザインまでの流れを把握しておくと、その間の思考が分断されずデザインがしやすくなると思います。 また、ユニークなレイアウトにするにしても、あらかじめ基本的な型を知っておくと逸脱がしやすくなりますね。 レイアウトに影響を与える要因 レイアウトにはいくつかの型がありますが、まずその型を決定する前に、レイアウトに影響を与える要因を知っておく必要があります。これらの要因によって、レイアウトの型があらかじめ決まったり、レイアウトが大きく変わるからです。 情報階層の深さ →1ページのサイトなのか、第二階層以降ありグローバルナビゲーションが必要になるのか、など サイトの目的・属性 →そのサイトでは何を伝えたいのか。企業・ブランドのメッセージや情報、ユーザーに役立つ知識(Wikiped
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込みです。
Chrome ウェブストア - BuiltWith Technology Profiler サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」。 サーバに何を使っているとか、PHPを使っているかとか、jQueryとかのライブラリや、Analyticsが入っているかといった情報を一括で表示してくれるChrome拡張。 サイト上でボタンを押すだけで解析することが出来ます。なんだか恥ずかしいですがこういうツールで調べられちゃうので気をつけましょう ヘッダやソースを見れば当然ながら調べられる情報なんですがボタン一発で調べられるっていうのは便利ですね 関連エントリ Vimの分かりやすいチートシートを見れるChrome拡張「Vim Help」 PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 ChromeをiPhoneシミュレーターにできる拡
4月から新しく社会人になった新入社員のみなさん、仕事に慣れてきましたか? まだ始まったばかりなので、研修や挨拶回りでそれどころじゃないですよねw 最近では、仕事でもパソコンを使うことが多いと思いますが、上司からこんな依頼がくることがあります。 「◯◯についてインターネットで調べて、必要そうな記事をピックアップして印刷したものを◯◯のミーティングに持ってきてほしい」 会社にもよると思いますが、URLだけメールで送ってくれればいいという場合もありますが、紙に印刷しなければいけないシーンも必ず出てきます。 そんな時に、印刷したページのレイアウトが崩れていて読みにくかったり、途中で切れていたり、変な広告が写っていたりすると、上司からの印象はあまりよくありません。 せっかくなので、ホームページの記事の部分だけを崩さずに綺麗に印刷したいですよね! 「えっ?ブラウザで印刷ボタンを押すだけじゃダメなの?」
Windows・Linux・MAC OS Xに対応し、YouTube・UStream・Google Video・Yahoo! Video・Vimeo・YourFileHostなどの動画サイトの動画をAVI・WMV・MPEG1・MPEG2・MP4・MP4 HD・3GP・MP3形式またはApple iPod・Sony PSP用に変換可能で、オープンソースソフトとして開発されているのが「xVideoServiceThief」です。インストール・日本語化・形式を変換してダウンロードする方法は以下から。 ダウンロード可能な動画サイトは123video・5min・ARD Mediathek・ATV・Aniboom・Atom・Bebo・Blip・Boing Boing・Break・Caught On Tape・Ceknito・CinemaVIP・Clip4e・ClipJunkie・Clipfish・Co
人気ブラウザー『Google Chrome』。拡張機能は数多くあるけれど、まず最初に入れておきたい11の拡張機能を紹介。すべてフリーで導入することができる。快適かつ最強にパワーアップしたChromeを使いこなそう! ●関連サイト Google Chrome 『Incredible StartPage』 スタートページをカスタマイズ! シンプルなクロームのスタートページを、機能的な画面にする拡張機能。ブックマークやウェブアプリ、最近閉じたタブが見やすくなる。 ●関連サイト Incredible StartPage バージョン 1.4.3 作者 www.visibotech.com 『Chrome用TooManyTabs』 大量タブを開くときに絶対必要な拡張機能! 大量のタブをサムネイルで一覧で表示、目的のタブを簡単に選び出せる。並び替えや検索機能もあり、タブを閉じるのがめんどうな人にオススメ
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
久々にGoogle Testネタ。 以前ちょっとふれて宿題としておきながら放置していたことを思い出したので、そのフォロー。 fused source files are included. バージョン1.5.0の時点で新機能(?)として「fused source files」が追加されています。先のエントリを書いた時点では調査不足でわかっていなかったんですが、名前から予想したとおり、「コピーしてincludeてコンパイルしてリンクすりゃOK」というものでした。 Fusing Google Test Source Files 現在最新のリリースである1.6.0のzipファイルを展開すると「fused-src」というフォルダがあり、その中に「gtest」というフォルダがひとつだけ入っています。 gtest-1.6.0/ fused-src/ gtest/ このフォルダの中に行数が約2万行の「g
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く