読者です 読者をやめる 読者になる 読者になる

Xcode7 ios10 “Could not find Developer Disk Image”

“Could not find Developer Disk Image”とエラーが出てきたので対応しました。

Xcode7の名前を変更xcode7.3.1.appなどに変更しましす。
Xcode8をダウンロードします。

私は、ダウンロードしたXcodeをXcode8.0appとリネームしました。

$cd /Applications/Xcode8.0.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport/
$ls

10.0 (14A345) というのが見つかりましたので、

 

sudo ln -s /Applications/Xcode8.0.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport/10.0\ \(14A345\) /Applications/Xcode7.3.1.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport

Xcodeの名前と10.0の後のカッコの中を文字を確認してsudoしましょう。

これで、xcode7でもios10が動くようになりました。

こちらを参考にしました。

stackoverflow.com

 

センター寄せに苦戦しているなら

私が、よくCSSで苦戦していたのが中央に揃えること。
margin:0 atuo;
とか書いてもセンターに揃わなかったり、
text-align:center;
と書いてもダメだったり。
今では、inline要素とかblock要素とか理解しているので、簡単にセンター寄せできるのですが、もっと簡単にセンター寄せする方法があったので紹介します。

centerタグを使う。
htmlでcenterというタグがあります。
<center></center>
これを使えば、簡単にセンター寄せできます。
ただ、google非推奨らしいので、SEOとかには良くないのかな?
ECサイトなどで文字制限があったりstyleタグが書けないとかいう時に、役立つので知っておいて損はありません。

最終的には、inline要素とかblock要素とかを理解して、自由自在にセンター揃えできるようになりましょう!

iOSアプリ開発初めてみた。

電卓アプリを作るのに役立ったサイト

iOSアプリ開発を再開しました。objective-cを使うのもxcodeを触るのも久しぶりだったので、ググりまくりまいした。そんな中で、役に立ったサイトをブックマークしておいたので、これからアプリ開発始める人の役に立てばと思います。

今回、作る電卓アプリは、iPhone純正の電卓と同じ機能のアプリです。
(関数機能なし、コピペ可能)

バグの修正も含めて作成に6日程かかりました。
現役のエンジニアなら数時間で作ってしまいそうな内容ですが、初心者は、この電卓を作るだけでもかなり勉強になります。objective-cにm慣れてくると思います。

*私は、objecitve-cを使っているので、swiftはわかりません。

xibの使い方

xibを使ってみる
新しいxibファイルの追加
ストリーボードは使わずxibを使う
xibとハローワールド
Storyboardを削除してxibを使う方法

オートレイアウト

オートレイアウト
autolayout入門
AutoLayoutで大きさを変える。
オートレイアウトの使い方(1)

オートレイアウトの使い方(2)

ボタン

ボタンの枠線を設定する。
IBOutletとIBActionでボタンを作る。
ボタンの作り方

テキストフィールド

キーボードなしのUITextField
UITextFieldのテンプレ
UITextField
UIMenuContollerのカスタマイズ
UIMenuContollerのカスタマイズ
UITextFieldのコピー機能

NSString

floatの桁数を調節する方法
小数点の後ろにゼロ付けて整数を表示させる
整数を文字列に変換
NSStringがある特定の文字列を含むかどうか
フォーマット指定子まとめ
NSString
NSStringから特定の文字列を取り除く

その他

電卓作ってみる
スタックオーバーフロー

効率的と言われるbootstrap使ってみた感想

Ruby on Railsでwebアプリケーションを作っているのですが、そこでbootstrapを使う機会があったので、すこし使ってみました。

f:id:yamamotoo:20151214084412p:plain

getbootstrap.com

Bootstrapの良いところ

かなり早く実装できる。

toggleメニューやtabメニューがすぐにできる。

レスポンシブ対応がすぐにできる。

 

Bootstrapの悪いところ

bootstrapに慣れてないと、カスタマイズしにくい!?

これは、個人的な印象なのですが、編集しにくいなと思いました。

わたしがWeb制作ビギナーということもあるかと思いますが、

正直@mediaで画面サイズごとに記述したほうが楽なのですが。

完全にオリジナルのデザインでいく場合は、bootstrapは使わないほうがいいかもしれませんね。

 

あとは、class名が増えることですかね。ちゃんとbootstrapのクラス名を理解してないとクラス名が増えてhtmlファイルの見通しが悪くなります。

 

あ、それと、主観的な意見ですが、bootstrapのデザインってなんだかダサい。

 

bootstrapどうしたら上手く活用できるか?

そこで、私はとりあえず、.row と col-mid-6 などのレスポンシブデザインの部分だけを使用しています。これでcssで@mediaをつかってカラム落ちによるレスポンシブ対応をせずに、勝手にスマフォ対応してくれます。

<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
親divにrowクラスをつけて、子クラスに「col-md-数字」のクラスをつけるだけです。

数値の合計が12になるようにします。

これで、スマフォに対応できます。

 

bootstrapのうまい使い方あったら教えてください!(^_^)

 

参考にしたいメンズファッションECサイトまとめ

アメリカから日本に帰国して頻繁に利用させていただいている楽天

 

ジャムの心理学 vs 楽天の心理学

ジャムの心理学というのは、知っている方も多いかと思います。

ジャムを売る時に、24種類のジャムを用意した場合と6種類のジャムを用意した場合とでどっちが売れるのかという実験をしたものです。

結果、24種類のジャムを用意した場合、立ち止まってくれるお客さんは多いものの、買ってくれるお客さんは少ないという結果に。

6種類だけ用意した場合の方が購入率が高く売上がより上がったとのことです。つまり、選択肢を削ぎ落とし、お客さんが迷うわずにすることで、購入につながるという実験結果です。

この逆を行くのが楽天ですね。これでもかというほどの商品が楽天上にあり、迷ってしまいます。

この迷うというのが、「ネットショップ」の楽しいところなのかもしれませんね。ネットショップは、見ているだけで楽しいです。

 

参考にしているショップ

インターン先で、楽天のサイトを制作していることもあり、日々楽天のお店を見ています。その中で参考にしているショップをご紹介したいと思います。個人的にお気に入りというのもあります。

 

1. Jiggys Shop

どんなお店?

楽天メンズファッションで売り上げ1位を誇るお店です。

レビュー数9000とかいう商品もあってすごいです。

 

f:id:yamamotoo:20151214072453p:plain

 

どんな商品?

比較的安い商品が多いです。 

 

Webデザイン的にはどう?

アコーディオン型のメニューが使いやすいと思います。

f:id:yamamotoo:20151214051339p:plain

クリックするとスーッと細かいカテゴリが出現します。

f:id:yamamotoo:20151214051359p:plain

アイコンもかわいいですね。

やはりカテゴリーにはアクセスしやすい方がお客さんとしては便利だと思います。

 

サイドとトップに固定のバナーが挿入されることが多いですが、個人的には邪魔です。しかし、ド派手なバナーが売り上げに直結しているということも考えられますので、派手で邪魔であっても「利益」ということを考えると必要なことなのかもしれないです。

 

2. MinoriTY

どんなお店?

安い価格帯の服が多く、学生をはじめとした若い方に人気のお店です。

私、自身もよく利用するのですが、特にFULL LIFEというMinoriTYのブランドは、

価格が安いわりに質も高くお気に入りです。

 

f:id:yamamotoo:20151214072523p:plain

 

どんな商品?

シンプルできれいめな服が多いです。

 

Webデザイン的にはどう?

全体的に「わかりやすい」といった印象でしょうか。

 シンプルではっきりしています。

こちらのサイドバーはあらかじめすべてのカテゴリを表示させていますね。

f:id:yamamotoo:20151214051553p:plain

 

 

 

3. ORISEK.ONLINE

楽天っぽくないデザインのお店です。

 

白黒でシンプルで、かっこいい印象をうけます。

f:id:yamamotoo:20151214072538p:plainこういうデザインは、すこし高額なブランド力のある商品を売るのに適していると思われます。高級感みたいなものが、白と黒を基調にしたシンプルなデザインで表現されています。

 

 

Webデザインで大切なのは「インプット」です。

いろんなサイトを見て、良いデザイン吸収していくことです。

そうすることで、デザインの感覚が研ぎ澄まされていくのだと思います。

webデザイナーもGitを使おう!使ってみた感想

Githubとは、バージョン管理システムのことです。

最近、このGithubというやつを使ってみたのですが、すごい便利なのです!

Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール

Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール

 

バージョン管理システムというだけあって、Gitはすべての編集履歴を記録してくれます。バックアップとしての機能も果たしてくれます。 

Webページを作っていて、やっぱり元に戻したいなんて時に便利だと思います。また、バージョンごとにローカルでファイルを管理する必要もないので、ファイル管理が苦手な方にオススメですね。

 

基本的に、あるパーツを作ったら

$ git add .
$ git commit -m "message"
このコマンドを打つことになります。
commitすることで簡単なメモとともに編集を記録できます。
その後、$ git push -u origin master とすることで、
 githubに反映されます。
f:id:yamamotoo:20151214043832p:plain
こんな具合です。
 
私自身よくgitは見慣れていたのですが、「なんか難しそう」ということで避けてきましたが、実際やってみるとそんなに難しくありませんでした。はじめすこしてこずりますが、慣れですね!
 
また、branchやmergeといった機能もあります。まだ、ここらへんはよく理解できてないので、これからいじっていこうかと思います。
 
webデザイナーの方も、コードをgitで保存してみてはどうでしょうか?
 

CSSをもっと扱いやすく!Sass (SCSS)の基本を学ぶ

Sassとは、CSSをもっと扱いやすくした言語です。

基本的に、CSSでできることはSassで全てできると思います。

では、SassはCSSと何が違うのか。

 

1. コメントの仕方

CSSだと /*コメントここ*/ のように記述します。

これ、はっきり言って面倒です。

しかし、Saaaだと

//コメント

よく他のプログラミング言語でも使われているスラッシュを2回打つだけでコメントが書けます。何気にすごい便利です。便利というか、快適です!

 

2. 変数が使える!

これが、CSSとは機能面で大きく異なる点です。

例えば、私がよく使うグレーは、#f7f8f8なのですが、

$myColor: #f7f8f8;

div {
  background-color: $myColor;
}

このように自分で定義した変数を使うことができます。

あの色なんだっけ?ってならずに済みます。

 

さらに、変数の中には、もっとCSSを入れることができます。

@mixin base {
  background-color: #000;
  color: #fff;
}

div {
  @include footer-base;
}

こんな具合に@mixinと書くことで、その中にCSSを登録しておき、

@includeで呼び出すことができるのです。

これで同じコードを書かなくて済みます。

さらに、関数みたいなこともできてしまう!

数学でいうf(x)みたいなものですね。

@mixin base($color) {
  background-color: gray;
  color: $color;
}

p {
  @include base(blue);
}

3. ネストが使える!

例えば、こんなcss

.classname p {
color:#000
}

.classname p span {
color:#red
}

 これが、scssだとこんな感じに書けてしまいます。

.classname {
p {
color:#000;
}

span {
color:red;
}
}

 

 この他にもimportなどの便利な機能があったりします。

 

jadeやscssを導入することで記述量が減り、コードを書くスピードが上がります。

もちろん慣れるまで少し時間がかかりますが。

yamamotoo.hatenablog.com

 

仕事としては、「面倒くさい」という感覚はあまり良くないかもしれませんが、

効率化するために「面倒くさい」という感覚を大切にしたいです。

 

jadeとscss使ってみてはどうですか?