初めに CYBIRDエンジニア Advent Calendar 3日目の@cy-kenta-takahashiです。 CYBIRD2015年入社の新卒で今はiOSアプリ開発を担当しております。 2日目は（@keitarou）さんの「俺たちはJavaScriptの非同期処理とどう付き合っていけば良いのだろうか」でした。 @keitarouさんは凄すぎて僕が爪の垢に感じますね。 僕もプログラムの可読性を向上するよう努力しないといけませんね。 内容について 今回はXcode（ver7.1現在）のstoryboardについて記載します。 というのも私はXcodeに触れてまだ6ヶ月なのですが、初めて触った際にレイアウトの作成方法が分からず苦戦しました。 ので初心者の方向けとはなりますが、簡単なレイアウトの作成とちょっとした応用を記載したいと思います。 storyboardって？ まず初めにstory

概要 UILabelでうまく改行できないときの確認ポイント Storyboard Linesが1以外（０で無制限） Line BreaksがCharacter Wrap(場合によってはWord Wrap) Use AutoLayoutにチェックを入れ、Constraintを設定する。(iOS7では必須） Storyboard下方にあるPINボタン(|- + -|)を押すとConstraint設定画面に移る Code adjustsFontSizeToFitWidthプロパティをNO(フォントサイズの変更でアジャストされてしまう） テキストを設定後、sizeToFitメソッドをコール 補足 Webで情報を検索するとConstraintに触れられていないことが多く、iOS6まではこの設定が不要だったのかも 参考 http://blogios.stack3.net/archives/417 Re

「Single View Application」から作成した前回のプロジェクトにNavigationControllerを追加する。 NavigationControllerの追加はオブジェクトライブラリ(右下のやつ)からドラッグしても作成出来ますが、ドラッグして作成すると、なぜかTableViewがもれなく付いてくる。 xcodeでは挿入が出来るのでその機能を使います。挿入したいViewControllerを選択して、メニューのEditor - Embed in- Navigation Controller を選択するとNavigationControllerが挿入される。

iOSアプリで使うボタン。画像で作ると様々なサイズが必要だったり、容量も増えるし、デバイスによって幅を広げたりする際には管理が面倒です。できれば、今風のボタンをXcodeだけで作れればいいと思いませんか？ 例えば、以下のようなUIButtonをStoryBoard上の設定だけで作れるようにします。通常、UIButtonの背景色、文字色まではStoryBoardで設定できますが、角丸、ボーダーの幅、ボーダーの色はコードでしか設定できません。 IB_DESIGNABLEを使えば、StoryBoard上でこれらの設定を自由にカスタムできるようになります。StoryBoard上で見た目を整形して確認するほうが、コードで設定するよりもやりやすいですね。 上のように新しく設定項目をIB上に追加できます。それでは、これらの追加方法を見ていきましょう。 1.カスタムクラスを作るまず、新しくクラスファイルを

こんにちは。最近はもっぱらアプリ開発に没頭している佐々木です。 開発はコード書いたりしている時は何気に楽しかったりもするんですが、リリースまで漕ぎ着けるのは大変ですよね・・・ 特に最近ではiOSでもデバイスの種類が増えてきたので、以前に比べて品質保障が難しくなってきました。 私はiOSアプリを開発する時、iPhone6が発売される以前はStoryBoardを使わずにすべてコードでレイアウトも作っていたのですが、”iPhone6” や “iPhone6 Plus” が発売されてからというもの、メンテナンス性も考えて使用言語をObjective-CからSwiftに変えたり、レイアウトにはStoryBoardを使うようにシフトしています。 今回はその中でもAutoLayoutのサイズ指定（比率：％）のテクニックについてご紹介したいと思います。 目次 StoryBoardでは比率（%）指定ができな

様々な制約 今回は、Auto Layout で利用する様々な種類の制約について、Interface Builder の Canvas 上で確認していきたいと思います。 制約ボタンその１ まずは、Canvas 右下にあるボタン群の中の一番左側のボタンから見て行きましょう。このボタンをクリックすると、下図の様なメニューが表示されます。 これらは、コンポーネントのアライメントに関する制約を追加・編集するための機能です。上から順番に機能を確認していきましょう。 アライメント（端揃え） Leading Edges 複数のコンポーネントの Leading 側（日本語環境では左）端の水平位置を揃える制約を追加します。追加される制約はコンポーネント同士の間の Leading Alignment です。 Trailing Edges 複数のコンポーネントの Trailing 側（日本語環境では右）端の水平位

Autolayoutで等間隔にビューを並べる方法はガイドに記載がある。 Auto Layout ガイド - ビューを等間隔で並べる (P.31) ビューの等間隔配置の機能は Autolayoutの自体には無くて、それぞれのビューの間にスペーサとなるビューを入れて間隔を調整する方法を取るらしい。

今さらですがディズニーの『ベイマックス』を見てきましたよ。ええ。 CMや予告編を観たときは「まぁ、ディズニーの子ども向け映画だわな。退屈はしないけど飛び抜けた部分はない75点の答案だわ」と思っていたんですよ。作品で言うと『ライオンキング2』みたいな。 それが妙に評判良いんで見に行ったらズッコケました。限りなく100点に近い答案なんです。 しかも、表現として尖った部分が何もない。驚異的な映像が詰め込まれているわけでも、作家の狂気があるわけでもないし、アッと驚くストーリーテリングもない。なのに、頭からお尻までワクワクする映像が続くんです。 「あっ、日本のクリエイティブ終わったな」 そう感じました。だって、スタッフの中には天才って一人もいないと思うんですよ。秀才の集団。それが勉強に勉強を重ねて、頭に汗をかいて、切磋琢磨して物凄いものを作ってしまった。彼らは「チーム主義」でモノ作りをしている。だっ

初歩的な内容とはなりますが、毎回調べるのも労力を要すため、 今回はいろいろなSNSボタンの設置方法をまとめてみました。 （2013年9月18日時点での情報です。） Facebook いいね！ボタン https://developers.facebook.com/docs/reference/plugins/like/ HTML5の設置コードを使用した際、IE等の古いブラウザでは動かない場合があるので注意が必要です。 その場合はiframeを使いましょう。 またHTML5版のコードを使用していて、いいね！ボタンがエラー表示になっている際は、 data-href内がURLエンコードになっていないかどうかを確認してください。 仕様変更でURLエンコードしたものを使用するとエラー表示となってしまいます。 Twitter Twitterボタン https://twitter.com/about/re

こんにちは、デザイナーのサリーです。 フラットデザインが流行してから、アイコンやモックアップ素材を使う機会が以前より多くなったように感じます……。 素材をダウンロードしたとき、編集がラクチンだと助かりますよね。 今回はPSD形式などのまま素材をダウンロードできる、とっても太っ腹なサイトを20個ご紹介します。 PSD形式のフリー素材を配布しているサイト GraphicBurger http://graphicburger.com/ 無料と有料の素材がごちゃ混ぜなのでご注意。 緑の「Download」ボタンが「Visit download page」となっている場合は有料素材です。 365psd http://365psd.com/ 日本でも有名なフリー素材サイト。 365個一気にまとめてダウンロードできる有料パックもあります。 Pixeden http://www.pixeden.com/

レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記　2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi

Material Design Google I/O 2014 で新しいデザインガイドラインが発表されました。 Google Design その中で注目されるキーワードが「Material Design」です。これは直訳すると「素材のデザイン」という感じになりますが、これは現実世界の素材をメタファーとすることでユーザーにとってわかりやすくなるように考えられたデザインのようです。 ということで、Material Design について簡単にまとめつつ、どうやってデザインを始めていけばいいか考えていきたいと思います。 Google Design のガイドラインを個人的に解釈した内容を掲載しています。誤解などありましたらコメント欄にて連絡ください。喜んで修正します。 イントロダクション まずはじめに Material Design の概要です。本文をそのまま引用します。 We challenge

2014年6月27日 Illustrator, Photoshop, 便利ツール PhotoshopやIllustratorなど、Adobeの製品はクリエイターの必需品のひとつとなっています。しかしその値段からなかなか手が出せない…という方も多いのではないでしょうか？今回はAdobe製品の代用として使える無料アプリをいくつか紹介します。金欠の学生さんや、様々な理由から脱Adobeを考えている方の参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ Photoshopの代わりに GIMP 長年Photoshopの代用として愛され続けているGIMP。Photoshopの拡張子であるpsdファイルが開けることはもちろん、Photoshop用のブラシなども利用可能。画像の編集・加工ツールとしてPhotoshopとほぼ同様の機能を備えています。日本語の公式チュートリアルも充実！私もお金の

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

第3回HTML5ビギナーズ！（http://atnd.org/events/44530）の「新しいCSSの仕様を色々調べてみた」の資料です。 『CSS3から新たに加わったレイアウト仕様のCSS Flexbox、 Regions、Shapesで一体どんなことができるのか、ご紹介したいとおもいます。』 以下のCSS3の新しい機能の初心者向け資料です。 ・Flexbox ・Regions ・Shapes ・Multi-column Layout ・Grid Layout ・Exclusions Read less

どうも、くーへいです。 今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。 なお、本記事は「CSS Flexible Box Layout Module Level 1」の2014年5月22日付けの編集者草案（Editor’s Draft）を基に作成しています。 また、「CSS Flexible Box Layout Module Level 1」は未だに策定中であり、現在は2014 年3月25日付の最終草案（Last Call Working Draft）が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「

今年はできるだけ、「Internet Explorer 9」を窓から投げ捨てる（=サポートを切る）案件を増やしていく予定です。 このサイトもflexboxを使うコードに移行しました。それ以外にも、flexboxをいくつかの案件で使ってみました。そこで得られたノウハウをちょこっとだけシェアさせていただこうと思います。作り方は今回は記載しないのであしからず。 Firefoxで最初に検証しながら制作するのには理由があります。 ちょっと複雑なことをやろうとすると、Firefoxさんだけお行儀が悪くなります。Internet Explorer 10よりもお行儀が悪いです。 同じものをつくるにしても、Firefoxだけできない、できても複雑なコードになることが多くなります。 Firefoxさんにがんばってもらうためのコードを記載しても、ChromeやSafari・Internet Explorerで表