Storyboardでの画面遷移をスマートにやる方法 | TOKOROM BLOG
これは potatotips第６回め で発表した この話 のまとめと後書きです。 Storyboardいいですよね！ Storyboardを使うことで、 画面と画面が疎結合になる 簡単な画面遷移ならノンコーディングで実現できてソースコードを汚さない といったメリットがあります。 Storyboard登場以前だと、次の画面に遷移させるだけでも #import "NextViewController.h" NextViewController *nextViewController = [NextViewController new]; [self.navigationController pushViewController:nextViewController animated:YES]; といったコーディングをし、遷移元のViewControlelrは遷移先のViewController
ブラウザーに優しくて、アニメーションを滑らかに
ブラウザーに優しくして、 アニメーションを滑らかに Brian Birtles, Mozilla Japan html5j October 2014, Tokyo Animation is awesome… Source: Christopher Price 2013, http://topherchris.com/post/55109717733 Animation is awesome… Source: icanhasGIF.com windfinder.com earth.nullschool.net healthmap.org/ebola/ 蔓延[まんえん] = spread (disease) ebolavideo.org ウィンドウを最小化する 逆に負担になります。うまくいかなかった冗談みたい。 Animation is awesome? HTC J 端末上の Firefox
iTunesのアルバム情報のカラーリングをjsで実装する - Qiita
iTunesのアルバム情報を表示する時のカラーリング、オシャレだよね！ 今回はこんな感じのカラーリングを画像から抽出する処理を、jsで実装します。 こういった面白そうな課題にはすでに先駆者様達がたくさんいるので、それを参考にしながら実装しようかと思います。 実装はいろいろありますが、今回参考にしたのはコレ！ user interface - How does the algorithm to color the song list in iTunes 11 work? - Stack Overflow Mathematicaというやつで書かれてますが、手順をかなり詳細に記述してくれているので、js等でも問題なく実装できそうです。 ざっくり手順 ざっくりとした手順はこんな感じ。 ドミナントカラーの求め方とか、詳細は実装と一緒に記載します。 画像から色をRGBとして読み取る 読み取った色を、画
iTunes11のアルバム情報表示に使われるオシャレアルゴリズムを考える | fladdict
iTunes11がリリースされましたね。賛否両論を呼びそうな大変更。 このiTunes11、アルバム選択時の情報画面がもの凄く凝ってる。なんとアルバムジャケットにあわせて情報の色が変化するんよ！！ 何これオシャレ！ どういうアルゴリズムになっているのか、とっても気になる。 仮定としては、 ジャケットを16〜32色程度で減色、パレット抽出する。 四辺のエッジに含まれる色から、最多ピクセル色を背景に採用。 残りの色の中で、背景色と一定距離（RGB or 色相）がある最多ピクセル色を文字色1として採用。 残りの色の中で、背景色と一定距離（RGB or 色相）がある最多ピクセル色を文字色2として採用。 どうしても適切な色がない場合、白か黒を文字色に採用。 アルバムの四隅に対し、背景色でインナーシャドーをかける という感じかなと。多分これであってる。 アルゴリズムで文脈にあった綺麗な配色を作るってい
CSSのfont-family指定に関する考察 2014年版 | ブログ | 静岡県のホームページ制作 | 6666666 セブンシックス
引用元：フォントカタログ5・ブラウザのデフォルトフォント 合成フォントの問題 font-familyを指定する際に、日本語フォントよりも優先順位の高い位置に欧文フォントを置くテクニックがあります。こうすることで、欧文フォントに存在しない文字だけ日本語フォントが適用される、いわゆる合成フォントが実現できます。ブラウザの標準フォントでも、safariではHelveticaとヒラギノ、IE8ではArialとMSゴシックの合成フォントが適用されています。 合成フォントは、日本語フォントの英数字を見やすくする措置です。しかし、ひとつの文章の中に複数のフォントが混在すると、文字の大きさやウェイト、ベースラインなどが微妙に異なり、違和感を覚える懸念があります。英数字だけにやけに太かったり、ひとまわり小さかったり。印刷物と違って、ウェブでは微調整がとてもむずかしい。特別、デザイン的な狙いがないのであれば、
UI ファーストという開発手法 - 何気に大変
ソフトウェアエンジニアは新しく何かを開発する際に、技術的に可能かどうか、どう実装すればいいか、みたいなのを先んじて考えがちな気がする。 そういうボトムアップ的な思考は技術を知っているが故に出る自然な思考なのだが、私の経験上そういう思考で作られたものは大体使いづらい、いわゆる gomi が出来上がる。 なぜか？それは UI を考える際に実現可能性や実装のしやすさを優先してしまうから。 ここでいう UI とは WEB サービスやネイティブアプリなどに限らず、ライブラリなどであれば API を指す。 私は数年前から UI → 実装という開発順序で開発をしていて、それは以下のような感じ。 まず実現可能性を窓から投げ捨てる 素晴らしいと思う UI を考える その素晴らしい UI を実現するための実装方法を考える こういう感じで進めると、ほとんどの場合、素晴らしい UI を実現するための方法がすご
iOS 7のブラー（磨りガラス風）について考えてみる | DevelopersIO
iOS 7のブラー効果をどう実現する？ コントロールセンターや音量調節の背景など、iOS 7でよく見かける磨りガラス風のあれです。ブラーをかけるとなんとなくiOS 7っぽくなるので、「コントロールセンターみたいにブラーかけてよ！」って言われることが増えそうですね。 「磨りガラス風の画像を上にかぶせりゃいいんじゃないの？」と誤解されている方も多いかもしれませんが、そういうわけにはいきません！それっぽく見せるにはプログラムでそこそこのコードを書いてあげなければなりません。 UIViewとかにブラーをかけるメソッドがあるといいのですが、今のところないです。したがって、自前で作成したビューにブラーをかけるには、その処理を自分で実装する必要があります。ようするに時間がかかります。 そこで、ブラーをかけるのにどういった実装方法があるのかを調べてみたところ、以下の２つの方法がみつかりました。 標準コント
これは便利！アイコン型WebフォントのCDN「Font Awesome」
まず、以下のコードでWebフォントの呼び出します。 後は、表示したいところにコードを挿入するだけです。サイト内のアイコンをクリックするとコードが表示されます。 この基本形にクラスを追加すると色々とカスタマイズすることができます。 ちなみに「fa」は表示の基本となるスタイルで「fa-sitemap」はアイコンの種類を表します。スタイルの中身はこんな感じです。 .fa { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-sitemap:before { content: "\f
簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」｜BLACKFLAG
最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として、パララックス（少々今さら感も感じますが・・・）効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ、次画面へ遷移するさせる技法がよく見られます。 そんなWebページ内でスクロール効果を使った動作を実装する際に役立ちそうなJSスクリプト＆jQueryプラグインを3つほど紹介してみます。 skrollr – parallax scrolling for the masses skrollr – parallax scrolling for the masses スクロールによって様々なパララックス効果を簡単に実装することができる軽量JSスクリプト「skrollr」。 デモページを見るだけでもこの「skrollr」で様々なパターンのパララックス
RAIZIN Coolで学ぶ、イマドキのWebサイトの作りかた
HTML5 Canvasを利用した冷気の演出が話題となった「RAIZIN JAPAN」のデモサイト。エキスパートが手がけたプロダクトを題材に技術的な解説を行っていくシリーズ第二弾は、RAIZIN Coolの実装を徹底解説します。 HTML5 Canvasを利用した簡易的な冷気の演出 最近の仕事で実装したものが海外の、しかも米シリコンバレーで話題になりました。 社内でもそうした簡単にできる（けど簡単そうに見えない）簡易的な実装に注目が集まり、ちょっとした話題になったので解説しつつ紹介したいと思います。 ※今回の解説用に、jsdo.itに実際に動くサンプルをアップしました。 さらに今回の解説用に特別に動作が分かりやすくなるオプションも追加しています。↓ (invalid jsdo.it code) 今回紹介するのはRAIZINというエナジードリンクの新バージョン「Cool」のLPです。 当初は
レスポンシブデザインをコーディングする時の、自分なりのちょっとしたTips
前にこの記事で、レスポンシブデザインをコーディングの仕方の基本的なことを説明をしましたが、今回は自分が製作してる時に気をつけていることや、よく使う方法を書いておこうと思います。 案件や作業フローによって全然違う方法がよい場合もあるかもしれませんので、参考程度にどうぞ。 要素のマークアップ順序 会社や作業フローによるかと思いますが、今のところ、PC用とスマートフォン用のデザイン2枚が出来上がってくる事が自分は多いです。 そのデザインを見ながらHTMLを作っていきますが、この時スマートフォンのデザインを見ながらマークアップしたほうが良いと思いました。 文章の意味付け的にデザインで順序変えるのはどうなのよというのはありますが・・・。 positionを使って再現するデザインの場合はPCは簡単に位置を入れ替えることができますが、スマートフォンのデザインは320px～リキッドデザインにすることが多い
設計から実装まで、今すぐ始める高速化
1. 設計段階から実装まで、今すぐ始める高速化 設計段階から実装まで、今すぐ始める高速化 CSS Nite LP Disk 23 , こもりまさあき 2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき 2. 設計段階から実装まで、今すぐ始める高速化 自己紹介を… こもりまさあき http://protean.im 1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大 学卒業後そのまま正社員となり、入出力業務、デザイン業務、ネットワーク 関連業務に並行して従事。2001年、会社を退職しフリーランスの道へ。 案件ごとに業務内容や立ち位置が異なるため、職域的な肩書きはなし 近著に『レスポンシブ・ウェブデザイン標準ガイド（MdN刊）』 『WordPress 高速化＆スマート運用必携ガイド（共著・MdN刊）』、など Twitter: @ciph
Webフォントが楽しい！Webフォントの探し方と使い方・設置の仕方などなど。
ブログに関して技術的なことはかっらきしわからない（からっきしなんて言葉はじめて使った） 私ですが、ちょっと Webフォント なるものに挑戦してみました。 ここ最近ずっと、日本語のフォントに中国語風の『Heiti SC』というのを使っていたんですが、ちょくちょく「文字化けですか？」「見辛い」「気持ち悪い」「調子に乗っている」などなど言われていたので、フォントの変更に踏み切ってみました…(,,-_-) ただ、Mac は ともかく、iOS で表示できる日本語フォントってほとんどないんですよね…。たぶん… おそらく、『ヒラギノ角ゴシック』か、前述の『Heiti SC』しかないような気がします。他にもあるのかな…｡:ﾟ(;´∩`;)ﾟ:｡ 『Heiti SC』は漢字が中華風になっちゃいますしね… 実際は『ヒラギノ角ゴシック』のみと言っても過言ではないですよね…。 『Heiti SC』の ひらがな部分
【クリスマスだし】Internet Explorerとうまく付き合う方法【IE対応まとめ】【25日目の6】 | DevelopersIO
IE6はﾀﾋぬDeath! こんばんは、クラスメソッドWebマスターの野中です。 今日はクリスマスですね、社内には独り身の負のオーラが満ちてます（既婚者が多いので残っている人は少ない）。 ところで、最近はCSS3もすこしずつ使えるようになってきていて、IE6からIE8の対応を蔑ろにしてしまっている自分がいます。 Web制作に携わってから6年、常に付きまとう古いIEは腐れ縁というか、ある意味青春ですね。 とっても今さら感たっぷりなお題目ですが、ここでIE対応のポイントを自分のために総浚いして青春に決着をつけたいと思います。 過去の経験と情報収集をもとにまとめているので実際にテストしたものではありません。 解決のきっかけ程度になれば良いと思いまとめています。 IEの現状 一般的なブラウザと先進的なブラウザに対する手法と考え方 ドキュメントタイプ：文書型定義 IE向け条件付きコメントで分岐処理
【ズボンを脱ごう】SassのSASS記法の魅力【カッコイイ】 - 納豆には卵を入れる派です。
どうも。 CSS Preprocessor Advent Calendar 2012 2012年12月20日（木）を担当させていただきます@ken_c_loです。 そうそうたる面々の中、みなさんハイレベルな内容で大変恐縮しているのですが、そんな中モジモジしながらしかし空気を読まずに、ずっと書きたかったウザい感じのエントリを投下しようと思います。 ズボンを履かない「SASS記法」とは？ 発端はこのツイートからでした。 …と、そんな流れで、「ズボンを履かない」SASS記法とはなんぞや。その魅力、カッコよさについて力説しようと思います。あわよくばSASS記法仲間を増やしたい！そして、お菓子などを食べながらSASS記法の魅力について語り合い、仲間の少なさについて嘆き合う.sassの会を月一くらいで開催できればと思います。 ヾ(*’ω’*)ﾉﾞ ｽﾞﾎﾞｰﾝ‼ SassにはSCSS記法とSASS記法
jQueryで異なる大きさの画像をリサイズ&中央表示する | ryodesignblog
やりたいこと なんかよく分からん説明で申し訳ないですが…。 つまりどういうことをやりたいかというと、WordPressのトップページや記事一覧ページなどで画像のサムネイルを表示するときに、画像をいい感じにリサイズして配置したい、ということです。 つまり…どういうことだってばよ…？ 画像のリストがある状況 画像でリストを作る感じです。複数のliタグの中にそれぞれ大きさの異なる画像があるという状況。liの幅と高さは400x200pxとします。 そのままリサイズすると…？ imgの横幅を400pxにリサイズするとします。例えば800x600pxの画像は400x300pxにリサイズされて、ちゃんと表示されます。 でも、800x300pxの画像だと、400x150pxにリサイズされて、50pxの余白ができちゃうわけですね。 これを解決したいなぁと。 画像が横長の場合 先ほどの800x300px
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodeMyUI
http://koreyomo.com/archives/230
IDEA * IDEA
cmmntr.com