2月 7 2012

jQueryMoible勉強会に行ってみた

ドーナツで有名な西畑さんの勉強会に行ってみた。

jQueryMobile は、ちょっと前に個人的に基本はかなりいじったが、
カスタマイズや細かいデザインの調整の仕方は知らなかったのでいい勉強になった。

最初の１時間は基本だったので全部しっている話だったが
後半１時間はカスタマイズ中心の話であり、非常に楽しく聞くことができた。
カラーテーマの実装だけで急にjQueryMobileっぽさがなくなるのね。

セミカスタマイズについては非常に楽しく聞けた！
書籍にかいてあるとか言われたら欲しくなるわ！　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

以下の内容は自分の問題。

・ページアニメーションのローディング画像の変更
・ヘッダ・フッタの完全な固定
iScroll

By konifar • 未分類 • 0

2月 3 2012

Fireworks で有名な 山口さんとお会いできた

Fireworksで有名な山口さんにセミナーでお会いしてきた。
ずっとブログを見ていた方だったので、かなり感動してしまった。

実際にサクサクデザインしていく様子を見れて、自分がFireworksを使うイメージが
具体的に持てて楽しかった。
Javaでもjsでもそうでしたが、レベルの高い人がかいているのを見ると
かなり勉強になりますね。自分の場合、それがあると成長スピードが段違いなので
今日は本当にいい経験になった。

複数ページのデザインの話が面白く、
マスターページとして登録
シンボルとして登録
の使い分けがよくわかった。

CSSプロパティを使ってCSS3を簡単に書き出せるなんて。。。
無駄な手間がすげー減るじゃんか。。。

あと画像をリサイズした時に荒くなる問題は、画像自体をシンボル化しておくといいというあるあるネタも
参考になった。

しかし簡単にできる簡単にできると言っていたが、おそらくそこまで上達するのには
結構な努力をしたに違いない。それを見せない山口さんはやはり素敵な方だなあと感じた。

By konifar • 未分類 • 0

1月 30 2012

CSS3勉強会に行ってみた

CSS3は、アニメーションやグラデーションくらいなら使ったことはあったが
ちゃんと勉強したことがなかったので、勉強会に参加してみた。

やっぱり自分だけだと勉強のモチベーションにならないしね。。。

参加してみると、CSS3利用前提にしたマークアップの話だけでなく
CSS2,1 との共存なども非常に参考になった。

CSS3のプロパティのみをまとめて、CSS3.css のようにして
import.css に読み込ませておく、というやり方にしておくと後々保守しやすそう。
CSS3のプロパティにのみ /* CSS3 */ とか書いてらんないしね。
業務で使うならこのやり方がよさそうだなあ。

CSS3は、主要ブラウザごとの対応は、プロパティにprefixをつけて記述するみたい。
-webkit -o みたいな。
いつかすべてが統合された時にprefix を排除するだけで対応できるようですね。
最初に記述量が増えるのは仕方ないかなという感じ。
prefixのない正式な書き方は、最後に書いておかないとうまく動作しない可能性があるらしいので注意。

印象的だったのは、普段Webを仕事にしている人が
「idやclassでコードを保守していくなんて不可能ですから！残念！」
という古いギャグを飛ばしていたこと。
やっぱりそうなんだーとがっかりしつつも、そこからCSS3のセレクタの話があったので
非常に参考になった。
以前に、idやclassを使わないで複雑なサイトを作ってみるというエントリーを読んだことがあったが
それを一度やってみるとかなり勉強になるかも。

CSS3-Information and Smaples というサイトで、CSS3で対応しているブラウザを
チートシート形式で確認することができる。これは便利ですね。

ちなみに、CSS3を覚える上でまあこれくらい覚えとけばいいかなというプロパティは思ったより多くはない。
以下のプロパティを覚えておけば、たいていのことは表現できるっぽい。

・rgba : 要素自体の透過度。
・opacity : 要素全体の透過度。例えば、中に文字が入っていた場合それも同じ透過度になる。
・text-shadow : インライン要素の影。
・box-shadow : ボックス要素の影。
・border-radious : 角丸。最近流行の丸を使ったWebサイト等は多用してるっぽい。px指定は左上から。
・gradient : グラデーション。body につけると動きがかなり遅くなるので注意。
内部では、imageにして書き出すという動きになっているらしいので、
プロパティは background-image で指定。
・transform : 角度rotate(30deg) サイズscale() などなど。
・transition : 簡単なアニメーション。
・Web Font : url(../fonts/test.ttf) format(“truetype”); ホスティングサービス調べても面白いかも。
・MultipleCulumns : column-count : 2; column-gap : 20px; floatとは違うので注意。
・Multiple Backgrounds : 複数の背景画像をセットできる。background: url(), url(); みたいな感じ。
指定順序通りに画像が重なって表示される。

しょぼいサイトを上記のプロパティでだんだんといい感じにしていくのも面白かった。
やはり使いどころがイメージできないとだめですね。
これは実際に勉強会で取り入れると面白いです。隣の人とディスカッションしたりして
意見を交換できるので参考になりました。
割と使いやすいのは、border-radious と shadow ですね。
その二つだけでかなりweb2.0的なサイトになります。

CSS が正しいかどうかをチェックしてくれるサイトもあるらしい。
CSS Validation Service

IEはやはり色々汚いらしく、対応のためには、MicroSoft の filter をつかうのが一般的らしい。
どうしてもだめな場合は、javascript で対応するしかないのか。
はやくIEなくなってくんないかな。

By konifar • 未分類 • 0

1月 22 2012

直リンクで403がかえってくるのを防止したい。。。

今作っているサービスが画像を多用するのだが、

自サーバで画像を管理したくないので

直リンクして拝借するようにしている。

が、直リンクだとブログ画像が取得できなくて

結構な確率で表示できなかったりする。

例えばこれ。

http://blog-imgs-29-origin.fc2.com/j/o/k/jokken/20090616232318572.jpg

これを回避する方法はないものだろうか。。。

By konifar • 未分類 • 0

1月 17 2012

CSS Nite back2basic #3 PHP に参加してみた

PHP は本で読んだことがあって少し文法は知っていたが

体系的に理解している人はどんな説明をするのだろうと思い参加してみました。

今更とかそういうのは言わないお約束です。

サーバーサイドスクリプトの詳しい説明から入り、

Railsもおすすめしていましたが、WordPress など優れたフレームワークが

PHPで作られているものも多いので講師の谷口さんはPHP押しみたいです。

というか最初はPHPの勉強会と思えないほどにいろいろなことを言っていました。

例えば、フォントやショートカットの重要性。マウスを使わない操作方法などを説明していて

非常に共感できる内容でした。

便利なソフトの紹介もよかったです。

もう少しPHPの説明があればよかった気がしますが。

週末のWordPress勉強会ではもう少しPHPについていろいろ試せるといいな。

By konifar • 未分類 • 0

1月 11 2012

iOSシミュレータで通信負荷をかける

iPhoneアプリやスマホ向けのサイトを作っていると

やはり動作の確認はiOSシミュレータで行うのが早い。

が、実際にサーバにデプロイして実機で試してみるとどうにもモサっとした動きになってしまっている

ということがあります。

やはり開発時の動作確認はできるだけ公開環境に近い形でやりたいですよね。

そんな時に 便利なのがspeedlimit。

mac の設定拡張で、ポートごとに通信負荷をかけられるというもの。

実際にポート3000 に3Gと同様の負荷をかけてみたところ、

いい感じにモサっと動作しました。

これで画面の動作確認もサクサク進められそうです。

By konifar • 未分類 • 0

1月 9 2012

rbenv で ruby のバージョンが変わらない問題にどはまりした

rbenv は ruby のバージョン管理システム。

rbenv global ruby-1.9.2.p290

のようにすれば

ruby -v

した時に バージョンが変わるというもの。

が、変わらなくて小一時間悩んだ結果、

どうやらパスを通す時にrbenvの設定を優先させるコマンドがあるようでした。

参考URL

こういうのはまると以下に自分が理解しないでやってたかとか

google先生に頼り切ってたかとかわかるよね。。。

By konifar • 未分類 • 0

1月 9 2012

Webサイトを作り始める前に、をやってみた

いつも読んでいるWebクリエイターボックスの記事に興味深いのがあったので

ブログとかWebサイトとか超初心者のおれも実際にやってみることにしました。

超適当だけど。

『誰のため？何のため？Webサイトを作り始める前に。』

目的

• このサイトはユーザーに何をもたらすのか
  Webに慣れ親しんでいないこにふぁーが自分の経験を初心者の視点から書いていく。
  これからスキルアップを計りたい人の指標にもなる。
  また見ていて面白い情報を垂れ流す。
• 最終的なゴールは？
  カテゴリー化されたWebの技術 の集大成。
  誰もが購読したくなるコンテンツの集まり。
• なぜWebサイト（オンライン）でなければいけないか
  誰もが見れるので。
  自分の実験のため。

ターゲットユーザー

• 年齢層
  高校生〜中高年層
• 性別
  特になし
• 職業
  指定はないが、最低限パソコンやスマートフォンなどでWebサイトを見る人
• パソコンorモバイル
  両方

機能

• ダイナミックかスタティックか
  ダイナミック。
• 使用するCMS
  WordPress。 
• 必要な機能（サイト内検索、ブログ、フォトギャラリー、ショッピングカート …etc）
  サイト内検索、ブログ、カテゴリー、アイキャッチ画像

競合Webサイト

• コンテンツ内容
  Web、デザイン の豊富な資料の提供。
• デザイン
  シンプル、デザイン性のたかさ
• どんなユーザーが利用しているか
  デザイナー、またはデザイナー志望、Web開発者。ブロガー。
• このサイトに必要そうだけどまだないもの
  圧倒的にいけてるデザイン。
  豊富なコンテンツ。

こんな感じかなあ。うーん、適当。
まあこれからですね。
とりあえずWordPress テーマを自作できるとこまでいかないと
競合も糞もないって話ですね。頑張ります。

By konifar • 未分類 • 0

1月 8 2012

ドメインを取得

ムームードメインが有名らしい。

超簡単だった。

By konifar • 未分類 • 0