ちょっと趣向を変えてJavaScriptの情報をどうやって集めているかという話を書きたいと思います。 使っているもの Twitter RSS(feedly) Pocket はてブ TwitterはただフォローしてTL見ていたり検索してたまに見ているだけでリストを作ったりはしてなくて暇な時に見ている感じです。 RSSはこれから紹介するようなサイトとかこの人のブログ面白い!というものだけを登録しています。未読が100件増えると消化する気がどんどんなくなっていくので...。 PocketはTwitter、RSSで気になったものを後で読むためにとりあえず突っ込むのに使っています。 こうすることでRSSはすぐに終わるので、その後で時間があればPocketで読みます。 Pocketに溜まった記事はちょっとした合間に読んだりしていて、たまにまとめて読んだりして消化しています。 今見ると20件くらいあるの
こんにちは、ユーザファースト推進部デザイングループの元山です。 デザイナーの皆さんはWebやアプリなどをデザインする上でフォントを作った事があるでしょうか? ずいぶんと前から「これからはWebフォントの時代だ」なんて言われながらも、現実は中々使うのが難しいなぁと感じている方は多いかもしれません。 今回はクックパッドで実際に作ったオリジナルフォントを使ったWebやアプリのデザインについて事例を交えながら紹介してみたいと思います。 クックパッドでの事例 印象と機能を向上させるデザインのためのフォント ブラウザやアプリの標準のフォントではない特殊なフォントを使う理由として真っ先にあげられるのは、やはり文字の雰囲気や見た目でデザイン的な印象や見え方を向上することができる点だと思います。最近ではAppleのWebサイトもオリジナルのWebFontを使ったデザインに変わりましたね。 クックパッドでは特
ある正規表現に対して、特定の文字列がマッチするかどうかをチェックするツールやサイトは沢山ありますが、正規表現そのものが何を意味しているのか、どんな文字列を期待しているのかを解析・解読・説明してくれるツールやサイトってなかなか見ない気がします。 他人の書いた正規表現を見て、「ん?」ってなったことはありませんか? 例えばこれ。 1 ^[a-zA-Z0-9-_.]@([a-zA-Z0-9_-]+\.)+[a-zA-Z]{2,4}$ これくらいなら分かりますが、複雑になってくるとつらい… いつかはマスターしたいけど…今は楽したい。 そう思ってググってみると…ありました! それがこちら。 Regexper http://www.regexper.com/ 正規表現を入力して Display をクリックすると、その正規表現が表す内容を図にして表示してくれます。 例えば先程の正規表現は、当記事の一番上の
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです: とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習&業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです(サーバ側スクリプト
What's Milkcocoa? Milkcocoaを利用すると、自前でサーバを準備せずに弊社が提供するクライアントSDKを介してデータの保存、更新、取得またPub/Sub通信を行うことが出来ます。通信はTLS暗号化され、保存されたデータは自動的にレプリケーションされます。クライアントからの通信はErlangサーバにて処理され、多くのトランザクションに対応することが出来ます。 例えば以下のコードは、Milkcocoaのデータストアにデータを保存する例です。保存したデータはMilkcocoaの管理画面で確認することができます。データは、Milkcocoaのデータベースに保存されるため、データベース用のサーバーを用意する必要はありません。 var milkcocoa = new MilkCocoa('app_id.mlkcca.com'); var dataStore = milkcocoa
Thank you for being patient. We are doing some work on the site and will be back shortly.
// 画面幅 screen.width // 画面高 screen.height // 有効画面幅 screen.availWidth // 有効画面高 screen.availHeight // 表示領域幅 window.innerWidth // 表示領域高 window.innerHeight // ウィンドウ幅 window.outerWidth // ウィンドウ高 window.outerHeight // 表示領域幅 $(window).width() // 表示領域高 $(window).height() // 表示領域幅 document.documentElement.clientWidth // 表示領域高 document.documentElement.clientHeight // ドキュメント幅 $(document).width() // ドキュメント高 $(
さらばPhotoshop! かわりになるフリー画像エディタ5選2014.06.29 12:0033,987 scheme_a これでアドビの魔の手ともオサラバ? Photoshopという言葉は、最早「画像を加工する」行為と同義語であると言えます。そんな多大な影響力を持つPhotoshopですが、現在最新のヴァージョンを利用するには、毎月980円払う必要があります。それで稼ぐプロならまだしも、アマチュアの懐には少々痛い。でも、ネットにはPhotoshopの替わりとなり得るフリーの画像エディタが無数に存在します。今回は、その中でも特に使えるものをピックアップしてみました。 どうせサブスクリプションを購入するなら、NetflixやSpotifyなどのサーヴィスにお金を使いたい(あとは食費とか)という方のための、厳選されたリストをどうぞ! Adobe Photoshop Express Photo
2014-05-22 WEBプログラマの私が開発現場で学んだSEOを一挙公開! SEO 誰もが悩むSEOですが、私が沢山のWEBサイトを開発してきた中で、これさえ対応すればSEOは問題無いよ!というものをまとめたので、公開してみようと思います。SEOは Search Engine Optimize の略で、言葉通り検索エンジンに対する最適化です。決してユーザビリティの向上等、ユーザへの施策では無い事を理解しましょう。(プログラマーなら)最低限SEOをやっておくべきであり、その後にマーケティングやユーザビリティ向上を目指しましょう。 では早速見ていきます。 ちょっと長いですが、頑張っていきましょう!! ■ htmlタグ titleタグ 対応しないとどうなるか titleタグが無い場合や「無題ドキュメント」等となっている場合、検索エンジンが頑張って自動的にタイトルを表示してくれます。すると
What is Patternify? Patternify is a simple pattern generator. I built it to save myself the pain of launching Photoshop just to export a 2px by 2px stripe pattern. Not only can you build your pattern online, but with the base64 code, you don't even need an image file anymore: just include the code in your CSS and you're ready to go! Instructions Draw your pattern on the grid. You can use the curso
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか?」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ(サイズ)を指します。 【第1部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
最終更新: 2018年4月14日 皆様こんにちは!最近WP-Eメンバーに本名を忘れられているような気がするWP-E HINOTANです。寿司ネタがどこかへ行ってしまいましたね。 さて今回はタイトルの通り、便利な配色ツールを紹介していきたいと思います。 Adobe Kuler まずはAdobeが提供しているAdobe Kulerから。こちらは有名なので知っている方も多いと思います。Adobe KulerはPhotoshopやIllustratorとの連携機能があるので便利です。(Adobe Creative CloudのアカウントIDが必要となります) 「Explore」のページでは、様々なカラーパターンを見ることができ、気に入ったものを登録したり編集したりすることができます。登録したカラーパターンはPhotoshopやIllustratorにも反映されます。 Color Hexa Colo
最近HTML/CSS/JavaScriptなどを初学者の方向けに教える機会がすごく増えきました。初学者の方ができるだけ詰まらずに、効率的に学習するための手順をいろいろな方と相談しながら、書きなおしています。 (11-09 12:45) Progate, atomを追加 導入編🐠 Webサイトを作ることは楽しい! プログラミング経験ゼロだが180日で180個のウェブサイトを作るプロジェクトがゴールまであとわずかに プログラミング経験0のデザイナーさんが、毎日1つサイトを作っていったお話です。最初はテキストとリンクが並ぶだけのサイトでしたが、少しずつゲームやチャットなどが作れるようになっていきます。 今知っている知識だけで、作れるWebサイトを作っていく。そして、自分の知っている2つの知識を組み合わせたり、1つやりたいコトのためのパーツをGoogleに教えてもらうくらいが、挫折せずに続けられ
このブログをお読みの方であれば、「テキスト入力や編集、テキストエディットなんてさすがに分かってる」という方が多いかもしれません。 しかし、以下のことをご存知でしょうか? Mac は、control キーを使用することで、マウスを操作することなくさまざまなテキスト編集が可能である Mac には文字列を一時的に保持しておくための「クリップボード」のようなものが2つある。それらを使いこなすことでより効率のよいテキスト編集が可能である 「テキストエディット」では、複数行の検索や置換が可能である もしこれらのことをご存じなかった場合、この記事を読む価値があるかもしれません。 写真素材: ぱくたそ この記事では、前半は基本的な文字の入力方法、後半は control キーなどを使用したやや高度なテキスト編集の方法、テキストエディットの使いこなしなどについて書いています。 なお、この記事では Apple
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く