内容もさることながら、デザインも素晴らしいウェブ制作関連のインフォグラフィックを紹介します。 ウェブ制作にきっと役立つものから、にやりとするものまでを厳選しました。
内容もさることながら、デザインも素晴らしいウェブ制作関連のインフォグラフィックを紹介します。 ウェブ制作にきっと役立つものから、にやりとするものまでを厳選しました。
パラグラフ・リスト・見出しなど [ad#ad-2] UIパーツの使い方 下記の3つのステップで、これらのUIを自分のページで利用できます。 IEへの対応 IEにHTML5を理解させるために、2つの重要なファイルを使用します。 <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="ie.css" type="text/css" /> <![endif]--> CSSのインクルード スタイルシートファイルをインクルードしてください。もし使用するエレメントが限られているのであれば、その箇所のみで大丈夫です。 <link rel="stylesheet" href="reset.css"
TOP > Design > 背景素材としても使い易いテクスチャ集「300+ Free Textures from 10 Ravens」 加工の仕方次第で、オリジナルデザインになるテクスチャ素材は、デザインに奥行きを出す為に最適な素材。そんなテクスチャや、そのまま背景としても利用できそうな、質の高いテクスチャセット「300+ Free Textures from 10 Ravens」を今回は紹介したいと思います。 オーソドックスな地面やレンガから年期の感じられる壁、建物を正面から捉えた写真などさまざまな素材が300点も紹介されています。中でも気になったものをピックアップしてみましたので、下記よりご覧ください。 詳しくは以下 ■雨水に打たれた年期を感じる壁面素材。テクスチャとして、ダークなイメージ作りに合いそうです。 ■外国の美しい色合いのビルの正面写真。テクスチャとしてだけでなく、
複数の異なるエレメントを組み合わせて、複雑で繊細なテクスチャを作成するPhotoshopのチュートリアルを紹介します。 Textured backgrounds in Photoshop ※クリックで拡大 [ad#ad-2] 上記の繊細なテクスチャは複数のレイヤーに、異なるエレメントを組み合わせ、異なるレイヤーの不透明度とモードが使用されています。 Photoshopでのレイヤーの状態は下記のようになります。
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
あるいは kanazawa.js v1.0.1 勉強会 : ATND に参加してきた。(前回と同じパターンの使い回し) なぜdispatcher(あるいは router)か実はピンときてなかったけど、なんかこういう手法があるっぽいということだけ知ってた。 pixiv Tech MeetingでpixivのJSの話をしました から辿れるスライドを見てなるほどなと思った。自分がいちばんなるほどと思ったのは WAFの不自由さ というか layout ファイルの <script> を可変にできるように仕組み用意していちいちそこに何か文字送ったりするのってめんどくさいよねというか、要するに script loading も DRY に ってことじゃないかな。もっかい整理すると layout ファイルで JavaScript のライブラリの読み込みは共通にできるでも layout ファイルの中に手を出
Jasmineでスペックを書いていく環境を整えるのにJasmine Toolなるものを試してみた。 なお最近なんだかJasmine押しですが、Jasmineしか試してないだけであり他意はありません。 2011/01/12追記 Jasmine Toolはブラウザを介するもので、普通のJasmineとやってることは変わらない。 Node.jsを使って動かすのであって、Node.jsのソースをテストするのではない。ややこしいけど。 Node.jsのモジュールのテストにはjasmine-nodeやvowsが向いていそう。 両方試してみてjasmine-nodeについては書いた。 Jasmine Tool そもそもこれはなんぞや Jasmine ToolはNode.jsで動くコマンドラインのツール。 簡単に言うとrubygemsのjasmineのNode.js版。 rubygems版との違いはRub
Index JavaScriptで利用できる正規表現についてまとめました。 最後の後読み、否定後読み以外は利用可能かと思います。 モード修飾子(i,m,g) \n,\r,\u2028,\u2029以外の任意の1文字 空白文字以外( \S ) 数字( \d ) 数字以外( \D ) 先頭( ^ ) 末尾( $ ) 単語区切り( \b ) 単語区切り以外( \B ) 0以上の繰り返し( * ) 1以上の繰り返し( + ) 0または1回( ? ) 最短マッチ( .*? ) nの繰り返し( {n} ) n以上の繰り返し( {n,} ) n以上,m以下の繰り返し( {n,m} ) いずれかの文字( [▲◎■] ) いずれかのパターン( (▲|◎|■) ) 後方参照( \n ) エスケープ( \ ) 先読み( ?=◎◎◎ ) 先読み否定( ?!◎◎◎ ) 後読み( ?<=◎◎◎ ) 否定後読み( ?<
HTML5の時代になってもJavaScriptは必須科目。 今日は、Jqueryの基礎を解説します。 こちらは、仕事などで使っているので特に勉強はしていませんが、今後のサンプルでJavaScriptが必須となるので、この記事を入れることにしました。 Jqueryの基礎の解説手順として、JavaScriptの基礎、Jqueryの順に解説したいと思います。 Step1 Jqueryとは何か、簡単にいうとJavaScriptのライブラリの1つです。 Step2 ライブラリとは何か、簡単にいうとJavaScriptの関数群です。 Step3 関数とは何か、中学生の頃に習った、f(x) = 2x これと基本的に同じです。 中学生の頃、f(x) = 2x と関数が定義されている時に、x=2ならばf(x)はいくつか? というような授業があったと思います。もちろん答えは4です。これがわかれば多分プログラム
The .NET Task Parallel Library is a great advance in parallel programming for the .NET framework. It lets us easily run an anonymous method in another thread without any worries about the actual thread creation. A Task object wraps up a piece of parallel code, and provides a notification of when it’s complete. We can use the Task.WaitAll or TaskFactory.ContinueWhenAll functions to do something aft
CSSで<a>のスタイルを変えるってのはよくやる。。 ▲たとえばこんな感じかな。hoverしたときにオーバーラインもでるように操作してる。 <div style="background-color:#FFC; padding:5px;"> <a href="javascript:void(0);">リンク1</a> </div> <br /> <br /> <div style="background-color:#FFC; padding:5px;"> <a href="javascript:void(0);">リンク2</a> </div> ▲HTMLはこんな感じでぇー、 a{ color:#333; } a:hover{ text-decoration: underline overline; } ▲CSSのソースはこんな感じ。 でも! ▲こんなこともしたいよねぇ。一つ上の階
Document has moved, if you aren't automatically redirected go here.
チケット駆動開発についての質問のうち、「チケットが放置されがちだがどうすればいいか?」「チケットの粒度はどれくらいがいいのか?」の二つはいつも聞かれる。 最初の質問について、自分なりに考えたことをメモ。 【元ネタ】 チケット駆動開発を導入しても変わらないこと - Basic まずは箇条書きより始めよ - Basic デベロッパーズサミットまとめ【チケット管理システム編】 ? prototype002 【1】「チケットが放置されがちだがどうすればいいか?」という質問の背景を類推すると、チケットを起票する運用はできているものの、チケット管理ができてないことを意味する。 チケット一覧画面で、一生懸命チケットをフィルタリングしながら、どのチケットが遅れているのか、どう対処すればいいのか、必死になって考えている間にも、どんどんチケットが増えていってしまっているのだろう。 チケットが放置されがちな状況
TracのワークフローをExcelマクロから生成する方法が公開されていたのでメモ。 【元ネタ】 tracのワークフローをExcelの図で作った状態遷移図から作ってみる: いつまでもとりあえず 状態遷移図からTracのワークフローを作るマクロにTracの設定の取り込み機能追加: いつまでもとりあえず Redmineに負けないようにTracのワークフロープラグインを作る: いつまでもとりあえず Redmineのワークフローを視覚化: プログラマの思索 RedmineとTracの機能比較: プログラマの思索 Tracのワークフロー: プログラマの思索 Tracでワークフローを改造するには、trac.iniを修正するしかないけれど、GUIではないので面倒。 だから、TracはRedmineよりもワークフロー管理が劣っていると言われていたけど、上記で公開されているExcelマクロを使えば、ワークフロ
個人的なメモ。普段さほど使うことが 無いので、必要な時に探すのに時間 掛からないようにまとめておきます。 沢山ある必要はさほど無いのですが、 勉強用も兼ねていろいろと数を揃えて おきました。 お問い合わせフォームのユービザリティ向上として導入されるバリデーション用のjQueryプラグインのまとめと、その他Tipsやフォームデザイン周りの情報をちょろっと。一応動作だけIE6、7でも確認しています。 exValidation 安心(?)の国産プラグインです。複雑なフォームにも対応できるのでとりあえずこれを覚えておけば安心ではないかと思います。 どんなフォームにも使えるjQueryのフォームバリデーション exValidation jquery.validate.js Validationの日本語Ver.です。シンプルなので使い勝手いいですね。日付の確認用プラグインも派生していますので合わせて。
タイトルが長くて略称があれば知りたい感じの「安全な Web アプリケーションの作り方」を暇を見つけて読んでいます。今まであいまいなままだった部分を順を追って説明してくれるので、本当に助かります。Web アプリ作りの初心者は卒業したかなーという人は必ず目を通しておくと良いと思います。 Cookie を用いたセッションについて復習 「HTTP はステートレスで」とかいう話はよく聞きますが、じゃあどうやってセッション管理するのがいいの?って話をよく考えると体系的に聞いたことがなかった!というわけで、この本で文字通り体系的に学び直すことができました。 その中でも、「セッション ID の固定化」という話題はちゃんと分かってなかった部分があったので、こちらのサイトを参考に PSGI なアプリケーションを作ってみました(僕の書いたアプリ自体はその他の脆弱性に溢れていますがw)。コードはエントリの最後に。
Emacs はずっと起動しっぱなしが常なので、終了するときはいつだって強制終了です。 まぁ、ヘビーなEmacsユーザーは、タイマーによる自動バックアップで、強制終了しても焦らず元の状態に復元できるようにしていると思うので、強制終了も正常終了とそんなに違いがないし、強制終了してこそ Emacs を使い熟しているというのが専らの噂です。 Emacs で最近使ったファイルを実現する recentf。 最近使ったファイルは非常に便利です。Emacs にも recentf というものがあり、これで実現しています。 本体付属ですので、有効にするには、以下の設定を書くだけです。 (require 'recentf) (recentf-mode 1) 有効にしておくと、M-x recentf-open-files というコマンドから、もしくは File メニューから過去に開いたファイルが選択できるようにな
以前公開した「Learning WebGLで学ぶWebGL入門」の補足 最後の辺りの「頂点を変更してみる」のページの補足。 TRIANGLESの解説 三角形は最終的には以下の命令で描画されます。 gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);ここで指定されている「TRIANGLES」は三角形の3頂点をそれぞれ独立したものとして処理します。6つの頂点を指定すると2つの三角形、9つ指定すると3つの三角形を描画する事が出来ます。 そのためもう1つ三角形を描きたい場合はこの様に頂点(x, y, z)を3つ追加し、 var vertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 0.0, 1.0+2.0, 0.0, -1.0, -1.0+2.
If you are a busy web designer or developer, using a CSS framework could speed up your work dramatically and make your task far easier. The CSS frameworks facilitate rapid development, could be used as a foundation in many design projects, and take care of some of most repetitive tasks. Here is a comprehensive list of CSS frameworks, which will give you a head start in your design work – some of t
With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before. Free Email BuilderFree Email Templates They are simple to use jQuery is not rocket science, nor does it require advanced coding skills. It is straightforward to understand and use. Web developers
はじめまして。コミュニケーションサービス開発部の澤と申します。コーヒーとカレーをこよなく愛する新卒2年目の新米エンジニアで、弊社Webのフロントエンドを主に担当しています。最近はmixiスマートフォン版(mixi Touch)の開発にも精力的に取り組んでいます。 さて、本日はPC版のmixiで1つの機能をリリースいたしました。ファイルをWebブラウザにドラッグ&ドロップするだけで写真をmixiフォトにアップロードできるもので、HTML5 File API※1を採用しています。本記事ではこの機能について色々とお話をしたいと思います。 なにこれ? 以下では、ドラッグ&ドロップによるアップロード機能を「本機能」と呼びます。 百聞は一見にしかずです。本機能のプロモーションムービーがありますので、まずはこちらをご覧ください。 動画では下記を説明しています。 従来のアップロード方法からドラッグ&ドロッ
非同期処理の実行完了を待ち合わせるユーティリティを書いてみました。 要件 複数の非同期処理を実行し、すべての処理の実行完了後に特定の処理を実行したい。 実装 JavaScriptはシングルスレッドで動作しているらしいので同期化は不要。こんなのでいいはずです。 コンストラクタで「すべての処理の実行完了後に行う処理」と「待つ処理の数」を渡す。 非同期処理で実行する関数にWait#createCallBack()で処理の完了を通知する機能を付加して実行。(または、実行完了後にWait#createCallBack()で作成した関数を実行し、処理の完了を通知する。) 非同期処理の実行後に、完了した処理数のカウンタを増やし、「待つ処理の数」と同じになったら、「すべての処理の実行完了後に行う処理」を実行する。 /*** * 複数の非同期処理の実行を待ち合わせるユーティリティ * @param {Fun
Amazonの商品詳細ページなどで使われている、関連商品のスライダー。格好が良く、ついつい色々見てしまい、あげくに購入してしまった、なんて経験がある人もいるのではないだろうか。 通常、縦スクロールを使って動くのが当たり前のWebページにおいて、横の動きが与えるインパクトは大きい。そこで試してみたいライブラリがこれだ。 今回紹介するオープンソース・ソフトウェアはjCarousel、JavaScriptベースのスライダーライブラリだ。 jCarouselは画像を横に並べて左右のスライダで画像を切り替えることができる。まさにAmazonで提供されているあのスライダを実現できるライブラリだ。様々なオプションが存在し、自分の使い勝手に合わせた利用法ができる。 例えばサークルを選ぶと左右がつながってループする。戻るアクションの場合は、端までいきつくと逆の端まで一気に動く。他にも左右のスライダではなくペ
基礎第一回このページの最終更新日:2019年7月4日 JavaScriptの書き方基礎のページでは、JavaScriptを1から解説します。JavaScriptはもともとインターネットブラウザ上で動くプログラミング言語として誕生しました。ここでは、それに倣ってブラウザ上、つまりウェブページの上でJavaScriptを動かしてみましょう。 ブラウザが表示するウェブページというのは、HTMLにより記述されています。この講座ではHTMLの解説はしません。HTMLが分からないという人は、軽くでいいのでどこかのウェブサイトで勉強しておくとよいでしょう。 さて、ウェブページ上でJavaScriptを動かすには、scriptという要素を使います。 <!doctype html> <html> <head> <title>test</title> </head> <body> <script type="
What is scheduling?In simple terms we can define scheduling as “the process of deciding how to commit resources between a variety of possible tasks“. The scheduling is basically a function which enables us to perform routine tasks at some predefined time or as part of a sequence. These tasks are normally executed in the background by so called “workers”.Now the question is what’s the best way to r
WEB+DB PRESS Vol.61の特集は、Titaniumでした。実際にアプリを作りながらのチュートリアルになっています。正統派な入門記事です。 でも。期待してた内容ではありませんでした。私は、Titaniumの暗黒面が知りたいのです。いつものWEB+DB PRESSなら、そんな記事が多いのですが、さすがにまだ開発者が少なそうなTitaniumではアッサリ目に仕上げるしかないのでしょう。そこで、このどうでもいいブログで、Titaniumのバッドノウハウ、いや、暗黒ノウハウをメモっておきます。 アプリを1本開発しただけですので、そこまでTitaniumのことを解っているわけではありません。間違っているところなどがありましたら、指摘してもらえるとありがたいです。暗黒ノウハウをみんなで共有しましょう。あと、スシなどをおごってもらえると、もっとありがたいです。 前提。 Titaniumのバー
50 Free Photoshop Brush Sets Everyone Should Have | Web Design Blog, Web Designer Resources これは覚えておいたほうがいい!というPhotoshopのブラシ50セット。 かなり使えそうなものが多かったのでご紹介します。 クラウド時代の雲のブラシ。何ともリアル 自然のいい感じが出せそうなブラシ ペンキなんかをぶちまけたようなブラシ いろんなタイプの草のブラシ なんか地球爆発してるっぽいブラシ 油絵っぽい感じを出せるブラシ 光がかっこいいブラシ 北斗の拳の髪の毛もかけちゃうヘアブラシ フラクタル 他にも色々あるので是非元エントリを参照してみて下さい。 関連エントリ ハイクオリティなPhotoshopブラシをダウンロードできるサイト色々まとめ 100以上のクールなPhotoShop用ブラシがダウンロードでき
Hadoopのサブプロジェクトの一つにZooKeeperというのがある。分散システムを作るためのビルディングブロックとして非常に重要になってきそうなので、ちょっと調べて見ようと思う。ストリームコンピューティングシステムのS4でも使われているそうだ。どう使われているのかは知らない。 ZooKeeperとは ZooKeeperは、GoogleのChubbyを模したシステム。HadoopがGoogleのGFSとMapReduceを模したのと同じ構図だ。 じゃあ、Chubbyはなんなのか、というとこれも一言で説明するのは難しい。非常に小規模なファイルに特化した分散ファイルシステム、ということになるのだろうが、実にさまざまな目的に使われているらしい。DNS代わり、ロックサービス、サービスの死活判定などなど。ZooKeeperは一通りこれらの目的に使えるようにできているようだが、どのくらい機能的に忠実
前回のエントリ、AS3でFunction.bind()に引き続き “関数 (function)” を扱ってみます。 今回は関数のカリー化 (currying)についてです。 とその前に、前回のエントリで示した Function.bind() について。 あれは昨今のAS3文化には馴染まないアプローチだったと思います。 特にAS3からFlashの世界に入った方は prototype に拒否反応があったりするかもしれません。 ということでよりAS3文化に馴染んだアプローチを探してみます。 たぶんきっと「関数を借りる」といったこともしないと思うので、 引数束縛だけを使うシチュエーションを考えます。 (もし、関数拝借を普通によくやってるFlasherの方がいたらごめんなさい。。) * 引数束縛して部分適用: Partial Application (ES5の Function#bind とは別モノ
zshのインクリメンタル履歴検索でglobを使う。 % zsh --version zsh 4.3.9 (i386-apple-darwin10.0) Snow Leopardのzshは古くて使えないのでhomebrewで新しいのを入れる。 % brew install zsh % sudo vi /etc/shells /Users/komagata/homebrew/bin/zsh % chsh -s /Users/komagata/homebrew/bin/zsh ログインしなおす。 % zsh --version zsh 4.3.11 (i386-apple-darwin10.6.0) % vi ~/.zshrc bindkey '^R' history-incremental-pattern-search-backward bindkey '^S' history-increme
多数のユーザーの行動記録からアテンション情報(注目されているデータが何か)をデータマイニングしたいというのは、大量のデータを扱っているウェブサイトにおいては自然と出てくる要求です。そこで、先月末にサービスを終了したサービス「パストラック」において使用していた、アクセスログから注目度(人気度)の高いウェブページや人名等のキーワードを抽出するためのアルゴリズムを紹介しておきたいと思います。 たとえばはてなブックマークのような、ユーザーの能動的な行為(「ブックマークする」という作業)から注目情報を抽出するのは決して難しいことではありません。それは、直近の一定期間内のブックマーク数=注目度、という前提が上手に機能するからです。現に、はてなブックマークの人気エントリーは、最近24時間程度の期間内にブックマークしたユーザー数の多い URL を降順で並べているように見受けられます。 しかし、アクセスログ
TOP > Design > アンティークな質感を演出する紙のテクスチャ素材集「New Collection of Must-Have Paper Textures」 紙素材特有のアンティークな質感は、photoshopなどのソフトだけで出すことは難しく、しばしばアナログ的な作業で作られているのではないでしょうか?そんな中今回紹介するのは、アンティークな質感を演出する紙のテクスチャ素材集「New Collection of Must-Have Paper Textures」です。 Memories Textures オーソドックスな質感の紙から、かなり年季の入った状態やデザイン感を感じるテクスチャまで、あったらいいなと思う素材が満載。中でも気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Exclusive Textures 長い間、湿気の多いところ
TOP > Design , Photoshop > 雲を描く photoshopブラシまとめ「150 Cloud Brushes for Photoshop」 空のニュアンを決めるために重要な雲ですが、実際に撮影しようとしても、イメージにぴったり合う雲や空はなかなか見つからないもの。そこで今回紹介するのは、さまざまな雲の形を表現できるphotoshopラブラシ「Weekly Freebies: 150 Cloud Brushes for Photoshop」です。 JavierZhX (10 Brushes) 実写に近いタイプからイラスト系のものまで、約150種類ものブラシが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■24 Clouds – Free Photoshop Brushes at Brusheezy! 24
One of the reasons why people gravitate toward WordPress is the seemingly unlimited numbers of open source plugins available. Today, I'd like to go over a few plugins that I think absolutely warrant your attention. I'm sure I've missed some, though, so make sure to chime in within the comments! Hopefully, this article will morph into an absolute monster of a list that can act as a reference for fe
様々なカメラが開発され、世界中で利用されていますが、今日紹介するのは本体、レンズ、フラッシュなどカメラにまつわるピクセルアートを素材として配布するサイト「The Camera Collection」です。 上記のように二眼レフ、トイカメラ、ポラロイドカメラ、一眼レフなど多種多様なピクセルアートが登録されています。単純な作りですが特徴はきちんと抑えられていて、どの機種なのか分かるようになっています。 詳しくは以下 カメラ素材はカテゴリ分けもされており、お目当ての種類だけ並べて表示させることも可能です。アイコンやメニューに使えそうですね。 配布されている形式はeps、ai、pngとなっており、ベクターデータでもダウンロードできるので、制作にも利用できそうです。配布されている素材は「Creative Commons — Attribution 3.0 Unported — CC BY 3.0」と
コンテンツを効率的に表示し、ユーザーエクスペリエンスを強化する、人気の高いデザインパターンを紹介します。 6 Popular Content Presentation Design Patterns [ad#ad-2] 下記は各ポイントを意訳したものです。 1. 価格表 2. 記事リスト 3. サムネイル画像 4. カルーセル・スライドショー 5. 水平スクロール 6. 無限スクロール 1. 価格表 価格表はサービスやプロダクトの価格を一覧できるようにしたものです。 ユーザーに基本的な機能と価格を比較させ、決断へと誘う効果があります。また、価格表自体にサインアップボタンを配置するのも効果的です。 LightCMS 2. 記事リスト 記事リストはニュースサイトやブログなどに多く見られ、よくできた記事リストにはタイトルだけでなく、記事の始まりや概略などを添えて表示します。これはユーザーにとって
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 MobilySlider 軽量ながらも高性能なコンテンツスライダー。 jShowOff さまざまなオプションを備えたコンテンツスライ
こんにちは!最近はTitanium MobileでiPhoneアプリを作りたいと思っていろいろ遊んでいるtanakaです。 Titanium Mobile は スマートフォンアプリ(iPhone, Android)を作るためのツール群です。 Titanium Mobile を使うと JavaScript を使ってネイティブアプリケーションを作ることができます。 今日はシンプルなRSSリーダーを作る方法をご紹介します。 完成イメージ アプリの大まかな仕様 iPhone をターゲットにします RSSの取得に Titanium.Yahoo.yql を使います 取得した記事一覧を TableView で表示します 記事タイトルがタップされたら記事ページを表示します 準備 開発環境には次の準備が必要です。 iOS SDK(+XCode), Titanium Developer (Titanium を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く