2014年12月24日

bootstrapを改造してオレオレcssフレームワーク失敗談

失敗談というか最終的にゴリ推したんですけど、cssの実装で失敗した話です。

最近、僕がやってるミニ四駆のサイトをリニューアルしました。
スクリーンショット 2014-12-18 14.14.10.png
M4G ミニ四駆ギャラリー
これの前はfoundationでやっつけで作ったのですが、思ったよりこのサイトの人気がでてきたので
真面目に作ろうと思い実装をしてみました。

僕が今回開発で使った構成は、rails(まだ3.2)、htmlはslimで書いています。cssの実装は標準のscssにscssライブラリにcompassを使っています。 foundationよりtwitterbootstrapが良いなと思いbootstrapベースで開発を行いました。 あとliveloadというguardのプラグインを使ってファイルを更新すると勝手にリロードするようなgemも使っていました(超便利)

今回試みたのは scssのextendを使って,bootstrapを隠蔽してみました。
具体的にいうと、.containerとか大枠は使っているのですが、レイアウトを組むのに、
.col-md-3.col-xs-3.col-sm4 みたいなhtmlのクラスの振り方が嫌だったので、下記のように変えて機能だけもらうことを考えました。とりあえず、htmlも読みやすくなって、機能も標準でもらえるのでこれでいい感じと思い開発を進めていました。
.products{
// スタイル継ぎ足したり
@extend .col-md-3;
@extend .col-sm-4;
@extend .col-xs-3;
}
これで、twitterbootstrapのクラスは使わずになるべくhtmlで表現している領域の名前をなるべく使うことによって綺麗なHTMLを目指しました。。。。がしかし、、extendを多用してたら一回のcssの変換が急激に遅くなってしまって、すごいストレスになってしまいました。 scssの総量で言えばそうでもありませんが、一回のリロード5秒とかまたされると弊害になってきます。。。
まぁぶっちゃけてこれだけなんですが、今度はもっと純粋に軽量な形で自分のcssフレームワークとかつくれたらいいなぁとか思っています。

twitter bootstrapのやBEM,SMACSS等色々と見ていますが、自分の思考と合わないところもありなんかいい感じに描けないか模索していますが、浅く考えてるならフレームワークに乗っかるというのがチームで組んでいくには無難な手段なのかもしれません。

最近思うことは、cssを読んでる場合にクラス属性などを振らずにある程度の見た目になっているのがベストだとおもうので、smacssの考えに近いと思いますが、レイアウト関連とモジュール関連のみにして一つのベースに従うのがいいと思っています。いたって当たり前なことだと思うんですが、必ずここはもう少し余白が欲しいとか、フォントのサイズマニュアルで指定しちゃうとかバラバラになっていく解決策としてベースに100%頼るみたいなことができたら理想だとは思います。 最近のサイトはどこもcssの量が多い気がする。。 もちろん多少多くてもそんなパフォーマンスも変わらないとは思うけど、もっとシンプルになれると思うので、css周りはまだまだ進化の余力があるなと感じる今日この頃です。
駆け足で失礼しました。

この記事は、CSS Architecture Advent Calendar 2014の24日の記事です。
http://www.adventar.org/calendars/337

あぁ、シーサーブログめっちゃ書きにくい。。ブログ引っ越そうかな。
ラベル:CSS
posted by ヤミタケ at 23:55| Comment(0) | TrackBack(0) | プログラミング | このブログの読者になる | 更新情報をチェックする

2012年08月02日

railsでlessを使ってみる。 その1

Ruby on Rails ではcssを書くのにscssが標準ですが、最近流行のTwitter Bootstrap http://twitter.github.com/bootstrap/ がlessで書かれていたりするので、
twitter bootstrapをカスタムしつつlessを扱う為にrailsをless対応の手順を示します。

主にここのサイトに書いてある通りで行けます。
https://github.com/metaskills/less-rails/

まずはrails new (アプリ名は適当です。 -OはActive Record を作成しないオプション)
config.app_generators.stylesheet_engine :less


Gemfileを編集します。
gemfileの該当部を編集
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'therubyracer' # less-railsを使うのに必要
gem 'less-rails' # sass-railsを削除して、追加
gem 'coffee-rails', '~> 3.2.1'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platform => :ruby

gem 'uglifier', '>= 1.0.3'
end
終わったらbundle updateを叩く


config/application.rbを編集して下記を追加
config.app_generators.stylesheet_engine :less
ここまででganarateしてみます。
lestes]$ rails g controller top index
      create  app/controllers/top_controller.rb
       route  get "top/index"
      invoke  erb
      create    app/views/top
      create    app/views/top/index.html.erb
      invoke  test_unit
      create    test/functional/top_controller_test.rb
      invoke  helper
      create    app/helpers/top_helper.rb
      invoke    test_unit
      create      test/unit/helpers/top_helper_test.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/top.js.coffee
      invoke    less
      create      app/assets/stylesheets/top.css.less

しっかりとlessで出力されて、lessを使う事ができます。
この後、rails sでサーバを起動して、 http://localhost:3000/top/index にアクセスすれば、top.css.lessがコンパイルされている事が分かると思います。

基本的にはcssを書いて行くのと同じノリです。
scssだとcompass等を入れてmixinを補いますが、
lessだと twitter bootstarpのlessおw見るのが良いと思います。
https://github.com/twitter/bootstrap/blob/master/less/mixins.less



///////
lessとscssを比べると、(僕の感想的には)scssの方が高機能なんだけど、
普通に使う分にはどっちも変わらないと思います。
詳しくは下記を見てみると良いと思います。
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞ http://dxd8.com/archives/217/
SCSSとLESSのどちらを導入するか迷って、SCSSに決めたポイント - 眠る前に布団にはいろうか http://d.hatena.ne.jp/nenjiru/20111101/css_scss_less




ラベル:less rials
posted by ヤミタケ at 00:19| Comment(0) | TrackBack(0) | プログラミング | このブログの読者になる | 更新情報をチェックする

2011年10月16日

FizzBuzz問題を1linerで書いてみた。(javascript)

FizzBuzz問題を使って社内プログラミングコンテストを開催してみた - ITは芸術だ http://d.hatena.ne.jp/JunichiIto/20111007/1317976730

という記事があった、なんかFizzBuzz問題の趣旨が違う気がするけど、
用はこれぐらいシンプルにささっと書けないと開発者としてどうかと思うって問題(だと思う)。

遊びで書いたらスコンとできたので、記録用
for(var i=1;i<100;i++){console.log(i%15?i%5?i%3?i:"Fizz":"Buzz":"FizzBuzz");}

ちなみに有名な問題なので、何回もtryしてます。

シンプルにわかりやすく書くのが一番のプログラミングだと思います。
なので上記のソースはダメな例です。
posted by ヤミタケ at 03:58| Comment(0) | TrackBack(0) | プログラミング | このブログの読者になる | 更新情報をチェックする

2011年09月14日

mongodbの開発ツールをまとめてみた。

現在、大学院の修了課題に向けてサイトを構築してるのですが、
従来通りのMySQLではなく、mongodbを使うことにしました。

開発にあたり、mongoDBを閲覧するphpMyAdminのようなツールがないか探していて何個か見つけることができました。

rock-php - Best PHP based MongoDB administration GUI tool - Google Project Hosting
http://code.google.com/p/rock-php/
phpMyAdminのようにログインし、それぞれの操作を行うことができます。
少し使ってみて、目立った不具合はありませんでした。
※使い方等は、参考URLを参照してください。解説わかりやすいです。

phpmongoadmin - phpMongoAdmin - Google Project Hosting 
http://code.google.com/p/phpmongoadmin/
1ファイルをおくだけで閲覧やCRUDなどができますが、動かない部分があったり少々怪しいです。
あと、認証がないので明らかに公開するのはアウトです。

DataBase Master
http://www.nucleonsoftware.com/
これはwebアプリではなく、ソフトです。
かなり高機能なようですが、シェアウェアっぽいです。※お試し版が使えます。
本番サーバでポート解放してつなぐのが怖いので、使ってはいないです。

余談:
codeigniterで下記のプラグイン使っていますが、adminユーザでないとエラーをはいてしかもパスワードが表示されてしまう。
非常に怖いです。。。まぁミスらなければOKなのと、mongodbがややそこらへんはルーズな感じです。
kyledye/MongoDB-CodeIgniter-Driver - GitHub https://github.com/kyledye/MongoDB-CodeIgniter-Driver

mongoDbの利点は色々下記のURLで語られています。
Best of the MongoDB Blog - Docs-Japanese - 10gen Confluence http://www.mongodb.org/display/DOCSJP/Best+of+the+MongoDB+Blog

::参考URL
WindowsでRockMongoからmongoDBを使ってみよう | EIPラボ http://www.eiplab.com/2011/07/mongodb-winxp-use003/

MongoDB
http://www.mongodb.org/

MongoDB - Wikipedia 
http://ja.wikipedia.org/wiki/MongoDB
ラベル:MongoDB rock.php
posted by ヤミタケ at 00:10| Comment(1) | TrackBack(0) | プログラミング | このブログの読者になる | 更新情報をチェックする

2011年06月01日

eclipseでgithubを利用する:ssh鍵設定編

https://github.com/ でpush(subversionで言うところのコミット)をするには、sshの鍵を登録しないといけないらしい。

まず、公開鍵・秘密鍵とか分からない人はこちらで公開鍵と秘密鍵を作ってください。
 鍵交換方式によるssh接続( windowsから )|(2-2がお勧め
http://kazmax.zpp.jp/linux/lin_sshrsa_win.html

作成した公開鍵をgithubの[Account Settings]のSSH Public Keyに設定します。
初心者Git日記その五〜GitHubにSSH公開鍵登録〜
http://design1.chu.jp/setucocms-pjt/?p=580

作成した鍵をwindowでは、Document and Setting\user\sshのディレクトリに配置します。
※デフォルト位置になります。eclipseでこのディレクトリを変更することも可能です。

次にeclipseで作成した秘密鍵を参照できるように設定します。
eclipse_sshsetting.PNG

これで、githubにpushなどしようとしたときにパスフレーズを聞いてくるようになります。
自分の場合は、ここでハマッてしまいなんどもAuth Failになってしまいました。
GUI上での操作はまだ自分も触り始めたばかりなので、後日書きます。
ラベル:git Eclipse
posted by ヤミタケ at 18:37| Comment(0) | TrackBack(0) | プログラミング | このブログの読者になる | 更新情報をチェックする

eclipseでgithubを利用する:eclipse環境構築編

最近javascriptのライブラリなど、公開したいソースを置く場所としてgithubに登録してみようと思いました。
subversionの用にホイホイ使えると思ったら、いまいち概念の理解や設定でハマッてしまったのでメモしておきます。

gitはCUIで使っている人が多く、GUIで使っている人はいまいちgitのおいしい所を理解できてないとか(どっかのブログで言ってた。)
eclipseもEgitという公式のプラグインがあるので環境構築まではすぐにいけます。

その1は、eclipseの準備のみです。zen coading興味ない人は2を飛ばしてください。

githubでアカウント登録、repository作成しておく。
結構簡単。
https://github.com/

1.eclipse インストール
色々入ってるし、日本語なので楽なので下記サイトからDownload(自分は、3.6のUltimateにしました、重いです。)
http://mergedoc.sourceforge.jp/

どうやら、解凍はwinRarが推奨らしい。
ラプラスとかだと正常に解凍できてなくてもエラーを言ってこないのだとか。

2.zen coadingプラグイン導入
最近気になっていて、少しつかったらよさそうだったのでインストール。
やり方は、zen coadingのgithubに書いてあります。
書きサイトのInstllation参照
https://github.com/sergeche/eclipse-zencoding#readme

-参考リンク
Zen-Codingで楽々コーディング! + コツ1つ
http://3ping.org/2010/02/23/1816


3.Egit導入
eclipse ヘルプ>新規ソフトウェアのインストール
「Egit」と入力すれば、updateサイトがあたる。
EgitとJgitの2種類があり色々あるみたいだけど、
Egitが公式でJgitベースで開発しているということでEgitを選んでインストール。


とりあえず、eclipseでgitを使う準備はできました。
gihub等、git関連は次の記事から書いていきます。
ラベル:git Eclipse
posted by ヤミタケ at 17:48| Comment(0) | TrackBack(0) | プログラミング | このブログの読者になる | 更新情報をチェックする

2011年05月29日

ニコ動のタイトル画像1000枚を表示するjs書いてみた。

ニコニコ動画のタイトル画像って毎回変わって面白いですよね。niconicore.PNG

バリエーションどれくらいなのだろうと思って画像を見たら連番でしたw。
全部並べたら面白いかなーっと思って、javascript書いてみました。

表示して取ったスクリーンショットはこんな感じです。
niconicohead.PNG

javascript
firebug等で実行する場合はこちら。
for(i=0;i<1000;i++){ var img = document.createElement('img');    var digit = '';     if(i<10){        digit = '00';    }else if(i<100){        digit = '0';    }     img.src = 'http://res.nimg.jp/img/base/head/icon/nico/'+ digit + i +'.gif';    document.body.appendChild(img);}


コチラブックーマークレット版
ブラウザのアドレスバーに張り付けて実行してみてください。
1000枚の画像を読み込むため、重いです。
画面の最下部に追加されていきます。低スペックPCの方は数字を200など調整してみてください。
javascript:(function(){for(i=0;i<1000;i++){var img=document.createElement('img');var d='';if(i<10){d='00';}else if(i<100){d='0';}img.src='http://res.nimg.jp/img/base/head/icon/nico/'+d+i+'.gif';document.body.appendChild(img);};})();
ラベル:ニコ動 javascript
posted by ヤミタケ at 00:49| Comment(0) | TrackBack(0) | プログラミング | このブログの読者になる | 更新情報をチェックする

2010年09月13日

ShareKitの紹介 -iPhoneアプリライブラリ

とりあえずメモ。。

最近は、Flash liteとかiPhoneアプリの開発を行っています。

iPhoneでtwitterがやりたいっていうのは、めっちゃくちゃある要件で、
それを解決してくれるライブラリが存在しました。自分の場合は、設定にちょっとはまってしまいましたが、
実際に15分くらいでいけます(多分ね!)!

問題点は、日本語がないと言うことなのですが、しっかりローカライズの実装が出来ているので、
自分で言語ファイルを用意できれば置くだけでOKです。勝手にやってくれます。

コレで、twitter,facebookなど有名なサイトの認証と投稿が行えるようになります。
ほんとに便利なので、iPhoneでtwitterとか投稿系を実装したい人は是非使ってみてください!

ShareKit
http://www.getsharekit.com/install/#download


※使い方については、ググレばたくさん出てきます。(↓たとえば)
http://phpspot.org/blog/archives/2010/07/iphonesharekit.html
http://ameblo.jp/dokugakumono/entry-10624938271.html
http://d.hatena.ne.jp/tomute/20100714/1279122524




ラベル:iPhone ライブラリ
posted by ヤミタケ at 00:17| Comment(0) | TrackBack(0) | プログラミング | このブログの読者になる | 更新情報をチェックする

2010年05月01日

iPhoneアプリをノリで作成中

ぶっちゃけて、ジャストアイデアで思いついたネタなんですが、
仕事でiPhoneアプリを作る機会がありまして、実はノリで作れるんじゃないかということで始動中です。

やっぱ、アイデアは人に言うとリアクションもわかるし、自分のモチベーションにもつながるので大切。
ちなみにブログ上だと完成までネタもタイトルも発表しません(とある事情が在離磨氏手)

とりあえず、プレイ画面はこんな感じ〜ってイメージはあったんですが、
絵描きさんに頼むより実写で撮ってしまえとやってしまいましたwww

下北沢の古着屋で衣装をそろえて、適当な路地で撮影しました。
基本的にはプレイ画面、ヘルプ画面、ランキング画面など主要なカットをノリで
こんな感じにお願いって、モデル(役者?)の方にやってもらいました。

下記はヘルプ画面で使用予定の一部、だいたいこんな感じで遊びます。
ai_how_to.jpg

ゲーム主演:大貫アイ(http://orz.cc/)
宣伝:ドキムネ 〜「もっとして。」〜 / iPhoneで撮ったTwitter動画‐ニコニコ動画(9)
http://www.nicovideo.jp/watch/sm10552244

あと、広告枠がもらえるならこの写真で、、
ai.jpg


ちなみに、ちょっとネタがわかる人に見せるとほどよくウケはいいので、
ちょっとリリースまで頑張ってみようと思います!
権利周りとか売るまでが実は手ごわいらしいので、そこら辺もブログにアップするか、
されない場合は妥協して投げ出したんだと思います。

みんな発売したら買ってね! 115円でうれたらいいなぁ。
posted by ヤミタケ at 01:44| Comment(0) | TrackBack(0) | プログラミング | このブログの読者になる | 更新情報をチェックする

2007年07月21日

じゃんけんアルゴリズム、プログラミングコンテストとか開催しませんか?

こんな記事が有りました。じゃんけんに勝つための7つのテクニック

とりあえずまとめると、、、、
初心者はグーを出す
最初はチョキ
2回連続の罠
宣言する
考えるより先に手を出させる
出す順番を固定させる
どうしようもなくなったらパーを出せ
ということになります。結構心理戦ですね、、本来じゃんけんて33.33%ですが、実際にはチョキが最も低く、出される確率は29.6%。だそうです。

 話は変わりますが、プログラミングを初めて4年目ぐらいになりました。初心者の人には何が楽しくて、学べるかなぁ〜なんて考えてたら、ありました、、じゃんけんを作る。。これは自分も最初の頃課題でやりました。if,for,変数,コンソール入出力,非常に総合的かつ簡単、、結構いい課題だとおもいました。

 そこで、本題、じゃんけんて単純ですよね?でも結構戦略がありますよね?実装も簡単そうですよね?心理戦になると実際やるしかないんですが、アルゴリズムで勝負できそうなので、とりあえずの形で遊べる感じの物をjavaで実装してみました。 さらに詳しく
ラベル:じゃんけん java
posted by ヤミタケ at 01:58| Comment(2) | TrackBack(0) | プログラミング | このブログの読者になる | 更新情報をチェックする

2006年07月10日

プロキシ経由でのプラグイン更新

 eclipseで開発されてるひとはプラグインを多く使ってると思います。でちゃんとしたプラグインはちゃんと登録してあって、ヘルプ→ソフトウェアの更新とかすると勝手にプラグインを更新してくれるという。。・・・・なんと便利な!?

 でどうもいつも学内でできないなぁ〜とか思いながら、直接つなぐとこで更新とかしてたんですけど、普通にプロキシを設定すればいけるそうですorz.

ウィンドウ→設定で「インストール/更新」を選択で適当に設定すればいけます。

 分量が少ないのでeclipseのお勧めショートカットでもどうぞ。

* Ctrl + o 今開いてるファイルの変数もしくはメソッドを検索する。
* Ctrl + f 今開いているファイルの検索・置換
* Ctrl + h ワークスペース内の単語検索、拡張子を指定すると絞れます(*.js,*.propatersなど)。
* Ctrl + space 補間(字がわからんので修正してね)
* Ctrl + e タブで開いてるファイルの検索
F11 前回の実行と同じものを実行する。



これはいらんかも

* Ctrl + m 最大化
* Ctrl + / カーソル行をコメントアウト、ドラッグの場合はその範囲
* Ctrl + Shift + f フォーマット、インデントつけたりはなるべく自分でやりましょう。


あたりまえ

* Ctrl + c コピー
* Ctrl + x カット
* Ctrl + v ペースト

 あとデバッグ中にコードを書き換えたり、。

あとチラッとだけ実行してみたいとか思うときにいちいちtest.javaとかつかわなくてもスクラップブック・ページという機能を使うと部分的にテストが可能です。。メソッドのテストとか。。。

 あと動的Webプロジェクト重すぎでもうつかいません!だれか軽くする方法おしえて、、あと普通にPCに依存するからSVNできねーよこのあろー。
posted by ヤミタケ at 23:33| Comment(0) | TrackBack(0) | プログラミング | このブログの読者になる | 更新情報をチェックする

2006年07月05日

textareaの文字数を数える。。。

 やはりどこぞのブラウザは怠慢というか、ブラウザ依存はどうにかしてほしいとこですなぁ〜。こういうとこは標準化しないのか?まぁされてるんでしょうけど、微妙なとこがまだまだだめっすね、Web2.0とかいってんだから…まぁ7.0に期待しよう、、昔のと同時に使いたいもんですなぁ〜。

 ていうことで本題です。よくアンケートフォームとかコメントでは何文字まで送れますとかありますけど、限界ギリギリを試したことありますか?送ってそれ以下を切るとかならまぁ問題ないかも知れませが結構困りますよ。
 もちろん普通に全角半角とかは最近のブラウザはあまり気にしなくて良いのですが、改行コードが\r\nなのがどこぞの老舗ブラウザで、だいたいFIREFOXとかは\nなんですよ、これをjavascriptでチェックとかtomcatとかのサーバに送って文字を数えると同じ分を送っているのに(改行コードのせいで)片方では送れて、もう片方では不可なんてことがおこってしまうわけです。

 もうどうにかしてくださいよぁ〜ちなみにtextareaはmaxlenghとかはつかえません(たぶん)、改行なければ普通だけどシビアなひとはどうかな?
 もちろんprototype.jsとかつかいつつ取り除くことはできなくもないけど、また別の場面で不具合が来る可能性があるのであまりしたくないのです。もちろんservlet側でもがんばればできるかもしれんがやらん!
posted by ヤミタケ at 23:07| Comment(0) | TrackBack(0) | プログラミング | このブログの読者になる | 更新情報をチェックする

2006年07月01日

プログラマに必要なもの。。。

 某先生がいってふと話題にしておりました。プログラムを始めてやる人には何が必要だろうと(を教えればいいのか)。。。
一言でいうと
・やりたいことに対して道具(知識)を調べそろえられる力
 があること(だったかな?)あと経験とかいってましたが、まったくその通りだと思いますよ。。。。

 それと、自分が考えてもうひとつ継ぎ足すとすれば、どこぞのマンガをパクッて「思考の瞬発力」であると思いました。物事に対して解決方は結構あります。しかし一番スマートで適切な処置を取捨選択するのは経験なのかもしれません…(センスか?)

 そしてまた一言,javascriptをやると変数名の大切さに気づきます。。。Web2.0 が熱い!?

 みなさんはどう思いますか。
posted by ヤミタケ at 01:33| Comment(2) | TrackBack(1) | プログラミング | このブログの読者になる | 更新情報をチェックする

2006年06月09日

お勧めfirefoxツール

 カテゴリとはちょっと違うんですが、一応プログラムを勉強して2年ちょいがたちました。まぁプログラムならeclipseを極めろって感じですけどやや思考をデザイナーより(?)にかえてツールを紹介しましょう。今あついAjaxとかやるにはかなり役立つものばかりです。

ていっても、作る基本はIEです。ブラウザ依存がいちばんつくっててうざい・・うざすぎる。SlapnirやらOperaやら(MACの人はsafari?マック版IEもいるかな?)ありますが管理人はfirefoxを断然押します。


Get Firefox


gspace
GmailをFTPのように使えるようにしてくれます。超便利!10M以上のものは分割うpだそうですが、普通に2.7GBあるしAjaxすばらしいし文句なし!?

FireBug
HTMLをリアルタイムで弄れたり、javascriptのデバックできちゃったりイベント情報とかXML情報とか抜けます。あとマウスのあわせた位置のソースを表示とかもできる。

Web Developer
こっちはCSSをリアルタイムで弄ったり、一部削除したりアウトライン表示したり、はたまたHTML、XML、RSS、CSSなんかのヴァリデーションチェックもしてくれるとか優れもの!日本語版あるらしいけど、まぁコンぐらいなら英語で


VideoDownloader

まぁYoutubeの画像ひっこぬいたりね…

View Sorce Char
階層を見やすくHTMLソースを表示してくれる。

あんま関係ないけど、ルックスもFirefoxはテーマの変更とかでWebからさがしてきて簡単にデザインかえれます。もち自分でつくれます(がそんな気力はない)。管理人は今noia(かな?)とかつかってますが、2週間ぐらいで変えます。
 ぜひWebデベロッパのみなさんというか、呼んだ人、FireFoxいいよ〜!ロボフォーム嫌いw orz
posted by ヤミタケ at 23:45| Comment(1) | TrackBack(0) | プログラミング | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。