Placeholders and Overflow
Oftentimes our search boxes and other form fields get drastically shortened on mobile devices. Unfortunately in some circumstances the INPUT element's placeholder text doesn't fit within the length of the element, thus displaying an ugly "cut off." To prevent this ugly display, you can use CSS placeholder styling and text-overflow: ellipsis! input[placeholder] { text-overflow: ellipsis; } ::-moz
4 Creative Ways to Recruit Web Developers
For jobs other than technology jobs, applying for a job and creating a resume hasn't changed much in the past decade; if you're a tech person, however, recruiting developers certainly has changed. Some prospective employers advertise on LinkedIn or typical job recruitment sites. I've recently spotted a few more creative ways to advertise tech jobs and wanted to share them with you. Browser Cons
Empty an Array with JavaScript
Emptying an array is a common JavaScript task but too often I see the task performed in the incorrect way. Many times developers will create a new array: myArray = []; // bad That isn't the optimal way to get a fresh array; to truncate an array, and thus empty it, you should set the length property to zero: myArray.length = 0; // good! Setting the length equal to zero empties the existing array,
iPhone の画面操作を録画するライブラリを公開しました。 - 24/7 twenty-four seven
kishikawakatsumi/ScreenRecorder · GitHub ScreenRecorder は iOS デバイスの画面を連続的にキャプチャして、動画に変換することで画面の操作を録画することができる機能をアプリケーションに追加します。 開発中のソフトウェアのユーザーテストなどに利用すると効果的です。 使い方 1. 以下のファイルをプロジェクトに追加します Lib/SRScreenRecorder.h Lib/SRScreenRecorder.m Vendor/KTouchPointerWindow.h Vendor/KTouchPointerWindow.m 2. 以下のフレームワークをリンクします QuartzCore.framework CoreVideo.framework CoreMedia.framework AVFoundation.framework sta
寿司をキャッチ！Titaniumで作られたゲーム·SushiAttack MOONGIFT
SushiAttackは落ちてくる寿司をキャッチするTitanium製のゲームです。 iOS向けのゲームを開発する際には殆どがObjective-Cで作ると思いますが、今回はTitaniumを使ったゲームSushiAttackを紹介します。 起動しました。 寿司が落ちてきます。これをキャッチすれば得点になります。 デモ動画です。 ルールはシンプルで上から流れてくる寿司を次々とキャッチしていきます。時間つぶしにさくっと遊べるように60秒で終了となっているところがポイントです。さらに終盤にはフィーバータイムがあり、高得点を狙えるチャンスになっています。 SushiAttackはTitanium製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこう見る iOS向けゲームは反応の良さが求められるため、TitaniumやPhoneGapよりも
みんなで一緒に飛ばせる物理シミュレータ·nodebox MOONGIFT
nodeboxは複数人で使えるリアルタイム連動型box2dサンプルです。 box2dを使った物理シミュレーションは幾つかありますが、nodeboxはちょっと変わっています。一人ではなくみんなで一つの画面で飛ばし合いができます。 引っ張って飛ばせます。 iPhoneから見た場合です。同じように操作できます。 接続ユーザ数が表示されます。 nodeboxはマルチユーザ、マルチタッチ、マルチデバイスに対応したbox2dのサンプルと言えます。同時に接続している人数も分かるので、ただ見ていても突然ブロックが飛んでいってまるでお化けが操作しているかのように見えます。 nodeboxはnode.js/JavaScript製のオープンソース・ソフトウェア（GPL）です。 MOONGIFTはこう見る 機能的には同じであっても、それがリアルタイムでコラボレーションできるかどうかでインパクトが全く変わってきます
ECMAScript6をいち早く体感できるJavaScript製VM·Continuum MOONGIFT
ContinuumはJavaScriptで作られたECMAScript6のVMです。 現在のモダンなWebブラウザで採用されているのはECMAScript5ですが、次世代のECMAScript6（ES6）ではさらに新しい機能が追加され、便利になっています。そんなES6を体験できる実行環境がContinuumです。 テストの実行環境です。下に記述したコードが解析され、実行されます。 エラーもちゃんと表示されます。 細かくどういった処理が行われているか追えます。 ジェネレータを実行したところ。 ContinuumはES6のスクリプトをES3相当に変換した上で実行しています。そのためIE8以上であればES6のコードを実行できるようになっています。letやclassなどを使って、ES6をいち早く体験してみてください。 ContinuumはJavaScript製、MIT Licenseのオープンソー
CSS calc
CSS is a complete conundrum; we all appreciate CSS because of its simplicity but always yearn for the language to do just a bit more. CSS has evolved to accommodate placeholders, animations, and even click events. One problem we always thought we'd have with CSS, however, was its static nature; i.e. there's really no logic, per se. The CSS calc routine bucks that trend, providing developers an oun
WebサイトのレスポンシブWebデザイン対応具合をチェック·Responsive Design Testing MOONGIFT
Responsive Design Testingは各デバイスのウィンドウサイズごとの表示が確認できるソフトウェアです。 レスポンシブなWebデザインテクニックはオンライン上に多数ありますが、それをどう活かし、どう実現するかは個々のデザインにかかってきます。そしてそれがちゃんと適用されているかどうかは実際に確かめてみるほかありません。その際に使えるのがResponsive Design Testingです。 トップページです。各サイズごとに並んで表示されます。 MOONGIFTで試しました。 768と1024。 縦サイズも指定した場合。 表示サイズが違うのが分かるでしょうか。 Responsive Design Testingを使えばよくあるデバイスの幅に合わせたコンテンツ確認が容易にできます。最小は240、最大は1024まで確認できます。主にスマートフォンやタブレット向けの確認になるでし
モバイル/デスクトップの双方で動くHTML5ゲームを開発しよう·Quintus MOONGIFT
Quintusはモバイル、デスクトップの双方で動作するHTML5ゲーム開発フレームワークです。 HTML5でゲームを開発する際にはターゲットとしてスマートフォンを考える人が多いと思います。そこで紹介したいのがQuintusです。スマートフォンとデスクトップ両方に対応したゲームが開発できるフレームワークです。 ボールが飛んでいくデモです。 オブジェクト同士が重なり合うデモです。 こちらはゲーム。 Quintusは僅か60行程度のコードでアクションゲームが作れてしまうほどフレームワークとしての機能が多機能です。スマートフォンで表示した場合にはコントロールキーが表示されます。機能はモジュール化されており、2Dなどを必要に応じて読み込みます。 QuintusはJavaScript/HTML5製、GPL/MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る HTML
正規表現を書く際に使ってみたいハイライトライブラリ·Regex Colorizer MOONGIFT
Regex ColorizerはWeb上で動作する正規表現ハイライターです。 正規表現が正しくかけているかどうか、それが分からなくてやきもきする時は多いと思います。そこで使ってみたいのがRegex Colorizerです。 正規表現に格好いいカラーリングがされています。エラーの場合は赤文字が出ています。 ちょっと違うカラーリングも。 こんな感じの激しいカラーリングもあります。 Regex Colorizerを使って正規表現がハイライト表示されれば、自分が意図している正規表現を書けているかどうかチェックが容易になります。またエラーチェックも兼ねているのでミスしていてもすぐに分かるでしょう。 Regex ColorizerはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 正規表現には各言語ごとの方言があるので注意が必要です。例えば
スマートフォン/PCに対応したHTML5アニメーションライブラリ·Collie MOONGIFT
CollieはDOM/Canvasを使ったPC/スマートフォン双方に対応したアニメーションライブラリです。 HTML5の登場以後、にぎわっているのがアニメーションです。様々なライブラリが登場していますが、今回はCollieを紹介します。アニメーションおよびゲームの開発に利用できます。 デモです。犬をドラッグできます。 折り紙。複数のボックスが奇麗なグラフィックスを描きます。 回転します。 並びます。 ボールが選択した形状に並ぶデモです。 ハート型。 ウサギ（？）みたいなキャラクターを動かすデモです。 クリックするとウサギが追加されます。 こちらはゲーム。緑色のボールが自機です。 青いボールを吸い込んで成長します。推進力も自分自身の大きさを削るので注意が必要です。 CollieはCanvasとDOMを使い、PCとモバイルに最適化されたアニメーションを実現します。多数のオブジェクトを安定的に処
他のjQueryライブラリと組み合わせよう。手軽に使える物理エンジン·box2d-jQuery MOONGIFT
box2d-jQueryはbox2dをjQueryに対応させたライブラリです。 最近は素のJavaScriptを書くことが減っているように思います。大抵jQueryを使ってしまいます。既にある他のライブラリもjQueryに対応してくれるとさらに利便性が高くなりそうです。そこで今回はbox2dをjQueryに対応させたbox2d-jQueryを紹介します。 デモ。動画が落下していきます。落下しながらも再生しています。 マウスで飛ばしたりできます。 101個のボールが落ちてくるデモ。 ぼんぼん飛びます。 使い方はシンプルで、重力の影響を与えたいDOMに対してbox2dメソッドを呼び出すだけです。その影響度合いは数値で指定が可能です。既存のコンテンツをいきなりばらばらにしたりもできる面白いライブラリです。 box2d-jQueryはjQuery/JavaScript製、zlib/libpng L
Webブラウザで動作するtail·Tail JS MOONGIFT
Tail JSはWebブラウザ上で動作するtailです。 諸君、私はtailが好きだ。素っ気ないオプションが好きだ。-nが好きだ。-rが好きだ。-Fが好きだ。そんな訳でTail JSも大好きだ。JavaScriptで実装されたWebブラウザ上で使えるtailコマンドです。 トップページです。ログファイルをドロップします。 ドロップしました。続いて更新されるのを待ちます。 リアルタイムに更新されていきます。 タブを使って複数ファイルの監視もでいます。 Tail JSはファイルの追記をリアルタイムで反映します。ファイルサイズの変更をトリガーに、その差分を読み取っています。Google Chromeでしか動かないようですが、とても面白いソフトウェアです。 Tail JSはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFT
オンラインの画像を解析してiTunes 11風に仕上げる·AlbumColors.js MOONGIFT
AlbumColors.jsはJavaScriptを使ってiTunes 11のカバーアート風のデザインを実現するライブラリです。 iTunes 11になってUIが様変わりしましたが、その中で注目を集めているのがアルバムのカバーアートからマッチした背景、テキストカラーを抽出する機能です。同様の機能をJavaScriptで実現してしまうのがAlbumColors.jsです。 デモです。Last.fmからアルバムアートを取得して、それにマッチしたカラーリングを行っています。 類似色、反対色、そしてもう一色の三色を抽出しているようです。 背景色がかなりマッチしているのでかっこうよく仕上がっています。 それぞれそれっぽく仕上がっているのではないでしょうか。 AlbumColors.jsは画像のURLを引数に渡すと、3つの配列が返ってきます。それぞれRGBの要素をもっているので、そのまま色情報として使
WiiUブラウザで遊べるスーパーマリオ風ゲーム·Super Maryo World for WiiU MOONGIFT
Super Maryo World for WiiUはWebブラウザ（WiiUブラウザ）で動作するマリオブラザーズ風ゲームです。 ゲームと言えばマリオを挙げる方は多いでしょう。そこでWii UのWebブラウザでも動作するSuper Maryo World for WiiUを紹介します。 ゲームトップです。基本操作は下に書いてある通り、簡単です。主人公はモナーでしょうか。 ゲーム開始です。まるでスーパーマリオのままです。 キノコやファイアも出てきます。 下にしゃがんだ時の格好がなかなかかわいいです。 ゴール！ コードを使ってリプレイができます。これはすごい。 なんか妙にバカでかいメット… 実機動作のデモ動画。 筆者はWiiUは持っていないのですが、デスクトップのWebブラウザでも十分に遊ぶことができます。ゲーム自体かなりこっていて、豆の木があったり敵キャラの種類も豊富です。さらにリプレイ機能
レスポンシブに画像の表示“場所”を切り替える·Focal Point MOONGIFT
Focal Pointは画面幅に応じて画像の表示場所を切り替えるJavaScriptライブラリです。 レスポンシブWebデザインの弱点とも言えるのが画像の表示です。単純に縮小して表示してしまえば良いという訳ではありません。そこで使ってみたいのが です。 デスクトップの場合。 幅を少し小さくした場合。特に変わっていないと思います。 さらに縮めました。一部が切り抜かれたのが分かるでしょうか。 さらに小さく。顔の部分を中心にしています。 こちらもデモ。Aチームです。 幅を狭めると一気に拡大写真のように。 さらに狭めると人がちゃんと収まっている状態まで縮まりました。 こちらは右側のいすに注目。 ほら、なくなったのが分かるでしょうか。 こちらの写真も… 上下が特に大きく変わっています。 こちらの場合はどうでしょう。 右上は固定で左側のコンテンツが大きく削られています。 これは…ミサイル？ 上下左右と
日本3大SNSのログイン画面について、SSL利用状況を検証する
このエントリは弊社メールマガジンの第一号（2012年4月27日発行）の記事の転載です。入力フォームをSSLにしないことの問題が話題となっていますので、読者の参考のため公開するものです。 この件に関連して、私はtwitterで以下のようにつぶやきました。 こう説明すれば良い。『通信内容は、正常時には暗号化されますが、攻撃により暗号化が回避される可能性があります。攻撃を受けていないときは暗号化され、個人情報はもれないので、ご安心ください』 https://twitter.com/ockeghem/status/285230605359276032 当然ながら、攻撃を受けていない状況では暗号化は必要ないわけで、上記の「ご安心ください」は無意味です。入力フォームをSSLにしないというのは、つまりそういうことです。 twitterを見ておりましたら、gree.jpのIDとパスワード入力画面がSSLで
下から目線のコードレビュー - steps to phantasien
WEB+DB の新しいやつがちょっと前にでてます. コードレビュー特集だそうな. 時が経つのは早い. まだ次の原稿書いてないのに… そういえば前にコードレビューの話を書いた気がして, 見なおしたところ かきかけ だった. せっかくなので続きを書いてみることにします. といっても何書くつもりだったか覚えてないのでだらだらと. WEB+DB PRESS の特集は, 主にこれからコードレビューを導入したい人に向けて書かれている. 幸か不幸か私はコードレビューを義務付けれたプロジェクトで働いているため, 導入には苦労していない. かわりにレビューをちょろまかせない面倒はある. ある意味でコードレビューを <やらされている>. もちろんこの言い分は大げさだ. 必要性に異議を唱える気はない. ただ異議はさておき自分の意向とは無関係にコードレビューに参加している気分を書いた話は あまり目にしないので,
高木浩光＠自宅の日記 - 共用SSLサーバの危険性が理解されていない
■ 共用SSLサーバの危険性が理解されていない さくらインターネットの公式FAQに次の記述があるのに気づいた。 [000735]共有SSLの利用を考えていますが、注意すべき事項はありますか？, さくらインターネット よくある質問（FAQ）, 2010年2月10日更新（初出日不明） Cookieは、パスなどを指定することができるため、初期ドメイン以外では共有SSLを利用している場合にCookieのパスを正しく指定しないと、同じサーバの他ユーザに盗まれる可能性があります。 （略） 上記については、「同サーバを利用しているユーザだけがCookieをのぞき見ることができる」というごく限定的な影響を示していています。また、Cookieの取扱いについて、問い合わせフォームやショッピングカート等、ビジネス向けのウェブコンテンツを設置されていなければ特に大きな問題とはなりませんが、個人情報を取り扱われる管
【WordPressのお問い合わせフォームをSSLで動かすのをやめました】contact form 7 + 共用SSLはやらないことにした｜今村だけがよくわかるブログ
【WordPressのお問い合わせフォームをSSLで動かすのをやめました】contact form 7 + 共用SSLはやらないことにした 最近このブログやGoogle+でつながりを持った方と交流させていただいています。日々勉強になるなぁ、と感じています。で、今年やろうかと思っていた「お問い合わせフォームのSSL化」が丁度話題になりまして。これをやってみようかな～、なんて思いました。 「お問い合わせフォームを共用SSL環境下に置き、キャプチャコードもつけてスパムメール防止」 えっと、セキュアなお問い合わせフォームを目標にしていました。ですが、調べるうちにいろいろわかってきたというか、自分の認識と視点を変える必要があると感じました。下記はその経緯と結論をメモしたものです。メモといえど、本気で書いています。お時間がございましたら是非、ご覧下さい。 １．お問い合わせフォームの「SSL対応」は当然
さくらVPSを借りた後の初期設定まとめ - ベイエリア情報局
元Vine SPARC開発者。2003年度未踏ユース採択者。ウノウ株式会社立ち上げ時に参画して4年間CTOとして従事。退職して現在P&Aラボにて客員起業家として起業準備中。 さくらVPSを借りた後の初期設定メモ 一般ユーザを追加する # useradd masato # passwd masato sudoを使えるように。 wheelグループにsudoを許可して、一般ユーザをwheelグループに追加する。 # visudo %wheel ALL=(ALL) ALL # vigr rootでの作業終了。一般ユーザで再ログイン。 # exit local:$ ssh masato@*.*.*.* SSHの鍵をコピー local:$ scp -r ~/.ssh masato@*.*.*.*: dotfilesを同期 $ cvs -d '****' checkout .env とりあえずyum u
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コミットを集めてパワーアップするジャンプアクションゲーム·Hotfix MOONGIFT