タグ

2013年2月19日のブックマーク (14件)

  • Webシステムのフロントエンド高速化で最初にやるべきこと - かみやんの技術者ブログ

    前回のエントリーで、Dartの次は、TypeScriptを検証する。と書いたけど、なぜか自分のPCでは、VisualStudio for WebにTypeScriptのプラグインがインストールできなかったので、TypeScriptを使うことを諦めました。コマンドラインでコンパイルはできたけど、それでは型付け言語のメリットであるIDEによる補完や参照検索やリネームリファクタリングが効かないので。ちなみにプログラマのPCではあっさりインストールできたとのこと。がっくり。 というわけで、Dartを実戦投入することを決定してDartで開発をしています。 フロントエンド高速化のExpiresヘッダ さて、今日の題。Webシステムのフロントエンド高速化のお話です。Webシステムの速度の大きなボトルネックとしてDB負荷がありますが、ブラウザ側のレンダリングを高速化する話としてフロントエンド高速化があり

    Webシステムのフロントエンド高速化で最初にやるべきこと - かみやんの技術者ブログ
  • Node.js + Express を Heroku で動かすまでの手順まとめ - tacamy--blog

    普通の JavaScript も jQuery もまともに書けないけど、はじめての Web アプリを Node.js でつくってみるという奮闘記。 環境つくるだけなのに何も分からなすぎてハマりすぎて、この一連の流れだけで丸 2 日潰れるという大惨事だったので、ちゃんとブログに残しておく。 Node.js のインストール Node.js の INSTALL ボタンから、インストーラを使って入れることもできるけど、Node.js のバージョンを切り替えて使える方が便利だと思うので、前回のエントリを参考に nodebrew を使ってインストールするのがオススメ。 node.js 入れるなら nodebrew が超簡単 - tacamy memo インストールが正しくできているか確認のため、Node.js のバージョンを表示。 $ node -v npm のインストール Node.js にはたくさ

    Node.js + Express を Heroku で動かすまでの手順まとめ - tacamy--blog
  • アクセシビリティに配慮したリンクのはり方とは(その1)–リンクテキストとリンクの配置– | kzakza

    ウェブページを作成していると、リンクをはるという行為から逃れることはできませんが、それだけにアクセシビリティに配慮したリンクのはり方について迷う場面によく遭遇します。そこで、何回かに分けてアクセシビリティに配慮したリンクのはり方について考えてみたいと思います。 WCAG2.0(JIS X8341-3:2010)での要件 W3CのウェブアクセシビリティガイドラインであるWCAG2.0では、以下の2.4.4、2.4.9がリンクのはり方に係る主たる要件になります。 2.4.4 文脈におけるリンクの目的: (JIS X8341-3:2010では7.2.4.4) それぞれのリンクの目的が、リンクのテキストだけから、又はプログラムが解釈可能なリンクの文脈をリンクのテキストとあわせたものから解釈できる。ただし、リンクの目的が一般的にみて利用者にとって曖昧な場合は除く。 (レベルA) 参考: 達成基準 2

    アクセシビリティに配慮したリンクのはり方とは(その1)–リンクテキストとリンクの配置– | kzakza
  • SEO Services | Seer Interactive

    Seer's cloud-based data platform drives superior analysis and insights mining. Combined with our team of deep SMEs, we're able to start your engagement with momentum. But knowing what to do is only effective if you can get the buy-in and resources to execute. We'll help you with that too. “We could not achieve these results without the expertise provided by Seer. With their ongoing and thorough ke

    SEO Services | Seer Interactive
    moromoro
    moromoro 2013/02/19
  • Webサイトのパフォーマンスをチューニングする | PowerCMS ブログ

    昨今、これまで以上にWebサイト(管理画面ではなく公開側のサイト)のハイパフォーマンス向上について様々な情報を目にするようになりました。 従前のWebサイトでは、サイトのチューニングは主にサーバーサイドで取り組む課題が多かったのですが、Ajaxの普及やスマホアプリなどJavaScriptの多用によって、クライアントサイドの高速化やHTMLソース上の工夫等による高速化がより重要になってきました。 そこで、今回はMT/PowerCMSの設定やテンプレート、プラグインによってWebサイトを高速化するためのTipsについてまとめてみます。 Minifierプラグイン https://github.com/alfasado/mt-plugin-minifier Minifierプラグインは、HTML, JavaScript, CSSコードの圧縮、画像のExif情報の削除、コンテンツのgzip圧縮等の

    Webサイトのパフォーマンスをチューニングする | PowerCMS ブログ
  • http://gunta.org/projects/three.js/personal/

    moromoro
    moromoro 2013/02/19
    ガチャがより捗るな胸熱
  • 2台目のMacのXcode:「Valid signing identity not found」

    2台目のMacのXcode:「Valid signing identity not found」
    moromoro
    moromoro 2013/02/19
    そのうち必要になりそうな
  • Node.js+CoffeeScript でソースマップを使ってデバッグを楽にする方法

    以前、jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話 を書いたけど、Node.js でソースマップする方法を紹介する。 何がうれしいかというと、Node.js で CoffeeScript や TypeScript、JSX なんかを使ったときに、例外に含まれるスタックトレースに変換前の位置を表示できる。 やり方は簡単。source-map-support というモジュールを require() するだけ。 ためしに使ってみた GitHub に動かし方が書いてあるので、その通りにやってみる。 こんな感じの demo.coffee があったとする。 require 'source-map-support' foo = -> bar = -> throw new Error 'this is a demo' bar() foo() npm install sourc

    Node.js+CoffeeScript でソースマップを使ってデバッグを楽にする方法
  • CSSのcounter-incrementを使ってリスト以外に番号を付ける方法

    あまり使っているのを見たことがないマイナーなCSSプロパティ「counter-increment」を使ったサンプルを紹介します。 「counter-increment」というプロパティを初めて聞いたという方も多いかもしれません。「counter-increment」は、サンプルのように番号を自動的に付けるときに使われます。リスト(list-style-type: decimal)のような感じですね。「counter-increment」で番号を付ける対象を指定して、疑似要素を使って表示することになります。 疑似要素を使っているため、IE7以下は非対応ですのでご注意ください。 今回サンプルを2つ用意しました。 ではHTMLから順番に解説していきます。 HTML HTMLはどちらのサンプルも同じで以下のようになっています。 <div class="divCount"> <h4><a href=

    CSSのcounter-incrementを使ってリスト以外に番号を付ける方法
  • 業種別のブラウザシェア2013年版 | パシのSEOブログ

    毎年恒例になってきた「業種別ブラウザシェア」の2013年版をお届けします。過去2年間の記事はこちらです。 業種別のブラウザシェア2011年版 業種別のブラウザシェア2012年版 年々Internet Explorerのシェアが少なくなっており、Google Chromeがシェアを広げています。また、最近はスマホユーザーの増加によりSafariやAndroid Browserのシェアも増えてきており、サイトによっては最も多くなっています。 今回は、業種別にサイト全体のブラウザシェア+Internet Explorerのバージョン別シェアの2つを掲載していきます。 »業種別の検索エンジンシェア2013年版 Web SEO 建築・不動産 自動車 健康 美容 保険 年金 投資 教育 芸能 趣味(釣り) 感想 PC経由のアクセスのみで見ればまた違ってくるのでしょうが、PC・スマホ込みのデータだと、ど

    moromoro
    moromoro 2013/02/19
    IEすごいな
  • SEO Japan - 優れた文章を書くための11の賢いヒント

    SEO屋の私がいうのもなんですが、サイトのコンバージョンを最も劇的に改善する手法といえばLPO。LPOサービスを自ら始めた位に惚れ込んでいるウェブマーケティング手法ですが、名前や内容は知っていても意外とちゃんと実施したことがないサイトやウェブマーケッターが未だに多すぎることに嘆いている最近です。多変量テストや行動ターゲティングとはいわずとも、A/Bテスト位は定期的にやっていきましょうよ、、ということで、今回は米国カリスマウェブマーケッターのニール・パテル氏が自らの経験を元にA/Bテストで実施するべき項目を11まとめた面白くてためになる記事を。 — SEO Japan 既存のトラフィックからもっとお金を絞り取りたいのなら、A/Bテストの実施を開始する必要がある。少なくとも毎月10,000人のビジターがいるなら、毎月でないにしろふた月に一度は一つ新しいA/Bテストを実施することを検討すべきだ。

    SEO Japan - 優れた文章を書くための11の賢いヒント
  • 2013年のトレンド、フラットデザインを使うメリット+参考にしたいデザインまとめ | Goodpatch Blog

    こんにちは! 先月の頭に書いた記事「【2013年度版】今年流行る!7つのUIデザイントレンドまとめ」が 今でもかなり多くの方に読んでいただけているようでとても嬉しいです。今回のブログは「【2013年度版】今年流行る!7つのUIデザイントレンドまとめ」でご紹介した「メトロUI(フラットデザイン)」にフォーカスした記事です。 (下記はDesignmodoの記事「Flat Design: Can You Benefit from the Trend?」の翻訳です) 最近よくフラットデザインが取り入れられているWebサイトやアプリを見かけます。このトレンドはWindows 8とGoogleの新デザインがリリースされた事で人気になり、他のサイトなどでも取り入れられ始めました。デザインの装飾をたくさん使わず、フラットデザインはメッセージや製品、アイデアをユーザーに伝えるシンプルな方法です。ぜひ今のトレ

    2013年のトレンド、フラットデザインを使うメリット+参考にしたいデザインまとめ | Goodpatch Blog
    moromoro
    moromoro 2013/02/19
    紙芝居みたいでいいよね
  • 【当たり前を疑ってみる】新着情報をdlでマークアップするのは妥当なのでしょうか? | バシャログ。

    Windows8、シャットダウンまでの道のりの険しさに空を仰いだhakoishiです。 終了させないで、スリープ状態をデフォルトにして使う想定なのかなー。タブレットみたいに。 さて、今回はちょっと当たり前を疑ってみたお話。 新着情報をdlでマークアップする定番テクニック、果たして妥当なのでしょうか? この話題、ブログやtwitterなんかでちょいちょい見かけますね まずはよくある形を確認。こういうのですね。 『dlで問題ないかも。』という意見 新着情報としての意味合いが強いなら、日付がキーになるのは自然。 形に与えられた意味を考えるに、日付がキーになっているという判断もできる。 『dlで、ってのはどうなんだろう。』という意見 dl要素の意味を考えると、ニュース見出しは日付について説明していることになってしまう。 なら、新着情報はどんな情報を持っていて、どんな意味と構造を与えるべきなのでしょ

    【当たり前を疑ってみる】新着情報をdlでマークアップするのは妥当なのでしょうか? | バシャログ。
    moromoro
    moromoro 2013/02/19
    http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#the-dl-element これ読んでからもう一回考え直すべき。dlってありえんよね。
  • Google Chromeの画面をクリック一つで共有·Dead Simple Screen Sharing MOONGIFT

    Dead Simple Screen SharingはGoogle Chrome機能拡張とnode.jsを組み合わせた画面共有ソフトウェアです。 画面共有を行うソフトウェア、サービスは幾つかありますがよりシンプルにWebブラウザの画面を共有できるのがDead Simple Screen Sharingです。 インストールします。 クリックするとURLが出ますので、これを共有します。 別なPCから見た場合。画像として表示されます。 しばらく待つと画面が更新されます。 Dead Simple Screen SharingはGoogle Chrome機能拡張で提供されており、Webブラウザウィンドウのスクリーンショットを随時node.js製のサーバに送信します。それを別なブラウザで受信する仕組みです。表示が重たいのが難点ですが独自サーバであれば幾分解決するかも知れません。 Dead Simple

    Google Chromeの画面をクリック一つで共有·Dead Simple Screen Sharing MOONGIFT
    moromoro
    moromoro 2013/02/19
    webブラウザから何でも出来るって怖いよね