「ブクマばっかしてても手を動かさなきゃ嘘になるぜ」と言われたような気がしたので、ウェッブコンポーネンツを使って、x-markedという要素を作ってみた。x-markedタグの中にMarkdownテキストを書くとHTMLにレンダリングしてくれる。 作ってるときにハマりポイントがいくつかあったので記しておく。 デモ: nakajmg.github.io/x-marked/ ソース: github.com/nakajmg/x-marked ハマりポイント3つ ハマったポイントは以下の3つ。 インポートされたHTMLが指すdocumentオブジェクト <template>に書いた<link rel="stylesheet">の扱い <content>の中身を取るタイミング インポートされたHTMLとインポートしているHTML内でのdocument <link rel="import">で読み込んだ

仕事柄、奇妙なDB構造を目にすることが多い。どういう発想からそんな設計がされるのかを理解したいと思っていたのだが、モデラー仲間の秋里さんが先日うまい指摘をした。「主キーをインデックスみたいなものと勘違いしているからではないでしょうか」。インデックス（キー）というのは、レコードの並び順を規定するキーのことだ。 たしかに思い当たる節がある。「こんな順にレコードが並んでいれば処理上都合がよさそうだ」という考えで主キーが設定される。さらに主キーはユニーク制約でもあるので、重複が起こらないように「多め」に項目を突っ込んでおく。つまり「ユニーク制約をともなう代表的インデックス」程度に主キーが理解された結果として、グダグダなDB構造が出来上がるのではないか。 じっさい、昔こんなことがあった。{a,b,c,d}の複合主キーをもつテーブルＸがある。ところが、別のテーブルＹからテーブルＸの特定レコードにアクセ

Chrome devtools でイベント監視 いろいろなJavaScriptプラグインを使っていると イベントの伝播を止めてしまうような動作をするものを使ってしまうことがあります。 function を割り当てたいイベントが止められていると厄介です。 代用できるイベントが生き残っていればそちらを使ってしまいたいです。 そんな時、どんなイベントが発生しているのかは Chrome devtools のmonitorEvents で確認することができます。 https://developer.chrome.com/devtools/docs/commandline-api#monitoreventsobject-events 第一引数で監視対象、第二引数でイベントを指定します。 monitorEvents(window, "resize"); イベントの指定はイベント名だけでなく、"mouse

CSSはどちらかと言えばやさしく、雑にコードを書いてもなんとかなってしまう言語です。 しかし、雑にコードを書いてしまうと、昨日書いたこのコードなんだっけ？ とか、新しくスタイルを増やすと別のスタイルがおかしくなってしまうことはありませんか？ 大規模なプロジェクト、長期に渡るプロジェクト、複数のメンバーが関わるプロジェクト、そして明日の自分も一年後の自分も使える、メンテナンス性に優れた一覧性のある美しいCSSを書くのに役立つガイドラインを紹介します。 CSS Guidelines 2 CSS WizardryのHigh-level guidelinesの最新版（2014年8月リリース）。 大規模で長期に渡るプロジェクト向けのメンテナンス性に重点をおいたスタイルシートのガイドラインです。スキルの異なる制作者、新規で加わる制作者などでも、統一されたコードでの制作が可能になるのを目的としています。

スクショをExcelに張り付けるのに役立つ4つのテクニック：テストエビデンス取得自動化の秘技（後編）（1/3 ページ） システム開発におけるソフトウェアテスト（結合テスト～システムテスト）において重要視されるエビデンス（作業記録）。前後編の2回にわたって、エビデンスとしてスクリーンショットをキャプチャし、テスト仕様書や納品書に張り付けていく作業を自動化するためのVBA／マクロのテクニックを紹介する。後編は、画像ファイルをシートに張り付け、Excel 2013のメニューからスクショを直に張り付け、画像を縮小し、指定した時間にマクロを実行する方法を解説。 前編「Selenium VBAを使って自動でブラウザーを操作してスクショをExcelに張り付けてみた」では、エビデンスとしてスクリーンショット（以下、スクショ）を撮る意義や、Selenium VBAのインストール方法と使い方、スクリーンショッ

近年、自分の中で集計／可視化は Fluentd(datacounter)+Growthforecast で定番化していました。 しかしプロダクトで新たに集計／可視化の要件が出てきたことと、 最近可視化ツール周りで 「Kibanaってなんじゃ？」「Graphiteってなんじゃ？」「InfluxDBってなんじゃ？」 など、このツール達は一体何なんだろう…？というのが前々から気になっていました。 今回良い機会なので ◯◯は何をするものなのか？ というのを一つ一つ調べてみました。 いわゆる「触ってみた系」の記事なので だいぶ浅い感じです。 大分類 大きく分けると、可視化ツールは以下の３つに分けられそうです。 ログ収集/集計 時系列DB（＋API）の担当。バックエンド側。 可視化部分の担当。 今回は バックエンド と 可視化部分 に焦点を当ててみます。 バックエンド 全文検索時エンジン+Restfu

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

JavaScriptだけでMIDIで遊べる！最高に乱暴なWeb MIDI API利用方法 Web MIDI API / Web Audio APIを使ったハッカソンイベント「Web Music ハッカソン #3」が近づいていますので、ここでWeb MIDI APIの使い方を振り返ってみましょう。 はじめに断っておきますが、これは 乱暴者による乱暴者向けの記事です。 最低限の手間で、Web MIDI APIに対応してる気分を味わう までを目指します。 [2015/02/08 追記] さらに手間をかけたくないという超絶手抜きな人（ワシです）向けに、アホみたいなラッパー(poormidi.js)作りました。 使い方 良かったら使ってみてください。 ちゃんと勉強したい方は、下記リンクを見てください。 ちゃんと勉強したい方向けリンク集 Web MIDI API (W3C) Web MIDI APIの

Randen Pederson 大規模なシステムであれば使っているであろうリバースプロキシ。 セキュリティや稼働率の観点からみて利用することは非常にメリットは高いです。 ただ、社内や周りであまり知見がなく、 「動くからいいや」という理由でApacheをそのままWebサービスの一次受けとして利用されている方も多いと思います。 動くという目的からすれば確かにその通りですが、ただ一枚リバースプロキシを入れるだけで ぐっと運用効率、稼働率も拡張性も上がります。 1. ルーティング処理の簡略化 例えばRESTfulな一般的なAPI構成を作りたいと思った時に以下のようなURL構成になると思います。 http://api.something.com/search/v1/item/list.json?cid=xxxx&gid=xxxxx もしアプリケーション側のルーティングしか知らなければframewor

良いって何ですか？ デザインの話をするのは、たとえ本業をしている方にとっても難しいことがあります。それが他分野の方ということになると、なおさらです。目的に沿って議論することで、デザインがより洗練されるわけですが、別の部署、他の役職の方との会話になると、なかなかうまくいかないことがあります。 その理由は、彼等がデザインのことを理解していないからというより、お互いが考える「正しい」を理解していないからということがあります。 Webサイトやアプリを設計・開発されている方全員「良いものを作りたい」と考えています。ただし、その「良い」のニュアンスは立場によって少し異なることがあります。「良い＝売れる」と解釈する人もいれば「良い＝使いやすい」と捉える方もいます。それぞれがもつ「良い」という価値観が、その人の意見や考え方に大きな影響を及ぼしています。 言葉だけでは理解ができない デザイン案を見せると、以

こんにちは、工藤です。 今回はテーブルデザインについて参考にしたいものを集めました。 簡単なようで結構悩んでしまうんですよね・・。 Oranges In The Sky http://icant.co.uk/csstablegallery/tables/39.php 名前の通りグレーを基調にリンクにオレンジと青を使ったテーブルです。 こちらのサイトでは右上にあるデザイン名からCSSを参照することができます。 Nimbupani http://icant.co.uk/csstablegallery/tables/42.php 黒を基調に、リンクに青色を使っているテーブルです。 英語だからいいのかもしれないのですがスタイリッシュなテーブルです。 Casablanca http://icant.co.uk/csstablegallery/tables/71.php グレーと赤を使ったテーブル。色

日々めまぐるしく変化するモバイルマーケットにおいて、マートフォンアプリやモバイルWebのUIやUXを最適にデザインする事はそのプロダクトがヒットするかの大きな要素となっている。特に最近は見た目が良いだけではなく操作性が非常に高いモバイルサービスが次々とリリースされユーザーが求めるクオリティレベルも上がっている。 小さな画面サイズ、様々な利用シーン、複雑な仕様の機能を実装したモバイルサービスにおいては、高いユーザビリティを実現する事が何よりも重要である。よりユーザーに愛される為もポイントをまとめてみた。 1. レイヤースタイルのUIで奥行きを出す モバイルのインターフェイスに関しては、最近のトレンドを見てみると、フラットなUIがトレンドのように思えるが、実はモバイルの限られたスペースでユーザーに効果的なエクスペリエンスを提供するには、縦と横のスペースに加え、”深さ”を利用したレイヤースタイル

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

jQueryのtubularプラグインを使用してYOUTUBEの動画をブラウザの背景全体に再生させる（レスポンシブ対応）【jQuery連載01】 最近Webサイトでブラウザの背景全体に動画を配置してインパクトのあるサイトを見ることがありましたので、2回に分けて、YOUTUBEにアップロードした動画や自分のサーバー上の動画をvideo要素を使用して配置するサンプルを作成しました。 まず初回はYOUTUBEの動画を背景に表示させるjQueryの「tubular」プラグインを使用してインパクトのあるページが作れるサンプルです。 このプラグインでよく見かけるのはただ動画を背景に配置しただけのサンプルが多いので、今回はサイトのデザインとして使えるように、ロゴやナビゲーションやコンテンツ内容を入れてWebサイトのTOPページのデザインのようなサンプルを作成してみましたので、背景に動画を流したい場合にお

JavaScript のメソッド window.matchMedia を使用すると、CSS3 の MediaQuery のようにウィンドウサイズで JavaScript のコードを分けて使用する事が可能です。window.matchMedia の使い方・対応ブラウザなどのメモです。 window.matchMedia は MediaQueryList オブジェクト（MediaQueryList – Web API インターフェイス | MDN）を返すメソッドです。 サンプルデモまでのリンク→ウィンドウサイズによってテキストの内容を変更するサンプルデモ 使い方 matches でウィンドウサイズとマッチするかを簡単に調べる matches プロパティを使うと、指定したウィンドウサイズとマッチしたら true マッチしなければ false を返してくれます。ウィンドウサイズの指定の仕方は CS

クロージャはわかりづらい。 なんでかと言うと、以下の２つです。 名前 定義がよくわからない Wikipediaさんなんかで調べると。 クロージャ（クロージャー、英: closure）、関数閉包はプログラミング言語における関数オブジェクトの一種。いくつかの言語ではラムダ式や無名関数で実現している。 関数閉包!! 関数閉包、意味不明すぎる。なんかこの字面が意味分からなくしようとしているような気配すら感じる。（とはいえ、じゃあどんな名前が良いかと言えば、わかりませんし。それに一般的には「クロージャ」で通っていますから、別にいいのですが。） 関数ヘイホウってなに？初めてクロージャを学ぶような僕は、もう、むしろ笑えます。ちなみに、その先の「関数オブジェクトの一種」とか「ラムダ式」なんかも知りません。 けど、JavaScriptのクロージャの事例は、とても分かりやすい。 関数の中に関数があります。

事前に断っておくがここでいう「インフラ」はレイヤ的には OS より上の話。 少し前に GitHub 時代のデプロイ戦略 - naoyaのはてなダイアリー で、GitHub を介したデプロイを実践しているということを紹介した。普段の開発を Pull Request ベースでやっているので、デプロイもまた Pull Request を契機に実行させると色々捗る、という話。 このプラクティスの対象領域をインフラにまで拡大してみました、というのが今回の話。 DNS レコードを Pull Request を merge した契機に自動で更新 AWS を利用している場合、ドメインの管理も Amazon Route 53 を使うといろいろと都合がいい。 Route 53 での DNS レコードの更新はこれまでブラウザから操作していた。これだと誰がいつ作業したかわからないし履歴もトラックしづらい。また変更

いきなりですが問題。次のコードを実行するとどんな出力がされるでしょうか。 (前提知識として、DateTimeクラスのコンストラクタに不正な値を渡すと、Exceptionが投げられます。) <?php namespace Hoge; try { new \DateTime("buggg"); } catch (Exception $e) { echo 'error!!'; } 正解は以下のとおり。 PHP Fatal error: Uncaught exception 'Exception' with message 'DateTime::__construct(): Failed to parse time string (buggg) at position 0 (b): The timezone could not be found in the database' in /home/

はじめに たぶん他にまとめている方がいらっしゃると思いますが、自分のためにMacで利用できるショートカットキーをまとめておきたいと思います。 注意事項 すべてのショートカットはAppleの公式Webサイトで掲載されています。あくまで、ここに示しているのは自分が使うであろうショートカットキーのまとめです。 Appleの公式ページ:OS X のキーボードショートカット 修飾キーの記号 修飾キー 示す内容