「Scss」を含む日記 RSS

はてなキーワード: Scssとは

2023-09-22

anond:20230919054140

リボテなんだよね~マジで

ケイケ系のwebデザイン会社がつくったサイトとかまじでこれ

見た目は面白くて楽しそうだからバカは騙せるんだけど

コードが最悪で、カスタマイズゼロ

クライアントドヤ顔で「XDボタン一つで生成しました」って出してきたコーディングとか、もう意味不明マークアップしててゴミのものだった。

素人の本人もプロでも、ちょっと気になるところの数値いじると総崩れみたいな

SCSSとか、拡張性の高さを重視して改良重ねてる世界

貼り付ける以外の編集ができないコードで「誰でもすぐできる」とか誤魔化す技術価値ないよ。

wiki常識コピペして量産するブログみたいなもの。あれって本当にありがたい?邪魔じゃない?ない方が便利じゃない?

2022-04-12

anond:20220412170357

scss嫌いだったから死んでくれて本当によかった。

anond:20220412170357

たとえばJSであればもう誰も使っていないgulpであったりとかscssであったりといった時代遅れ技術

今はみんな何をつかってるの・・・@@;

「未経験から100話でキラキラWEBデザイナーを諦めるかけだしちゃん」を読んで

https://twitter.com/kakedashi_chan/status/1495050350629322752

私はエンジニアちゃん立場なのだが、同じような経験したことがあったので悲しいなあと思った。

以前ともだちと旅行した際にプログラミング話題になった。わたしは当時から自分ウェブアプリを開発したり、ネイティブアプリを開発したりするのが趣味だったので、プログラミングスクール (Zeroplusというところだった)に通っている友達の話を興味深く聞いた。

そこで教えていたのは、たとえばJSであればもう誰も使っていないgulpであったりとかscssであったりといった時代遅れ技術で、とにかく顧客を捕まえて案件をゲットしようという内容だった。

わたしネイティブアプリ開発者なのでウェブ門外漢だが、それでもウェブ開発という観点からはあまりに頓珍漢で時代遅れなことを教えていて面食らった。

わたしはともだちに「営業をやりたいのだったら良いスタートアップがあるから紹介するよ」といったが、ともだちはフリーランスエンジニアになりたいの一点張りだった。

ウェブアプリ開発をやりたいのだったら、無料で良いチュートリアルがあるよ。お金を払うんだったらudemyとかの動画にしなよ。」

HTMLJavaScript関係はわかっている?今はReactやVueといった仮想DOMでの開発が主流だよ」

HTTPサーバーというのが何を指しているのかわかっている?」

嫌味にならないように遠回しに「メガベンチャーに入れる」レベルの開発経験の積み方を話した。ともだちは残念なことにGoogleIndeedなどに入れるような地頭の良さはないので、アルゴリズムよりも開発経験を積むように勧めた。

フリーランスエンジニアになるにしたって、誰がまともな開発をできない人に頼むのだろう。少なくともわたしの知り合いに業界経験が全くなくて、フリーランスエンジニアとして活躍できている人は一人もいないと伝えた。

ココナラクラウドソーシングサイトで請け負う低単価の案件はいくらやっても、そもそも全く稼げないし、キャリアとして意味がないことも伝えた。

今ではWFHはどの会社でも当たり前だし、週4日勤務のような自由度の高い働き方がしたいのならマイクロソフトなんかがそういう取り組みをしていることも伝えた。

とにかく、エンジニアになると決めたのならちゃんと開発経験を積んで一般就職をいちど目指そうと伝えた。

1年後。

結論わたしの言ったことは全く伝わっていなかった。

ともだちはその場では「ありがとう教えてくれて!やってみるね!」と話していたが、その後Twitterでは「らくして稼ごうウェブ制作!」といった標語を抱えている詐欺師ツイート積極的RTし、初心者コミュニティ自己啓発いたことを1年間言い続けていた。

ともだちはその後事務員としてどこかの会社就職したらしいが、音信不通になってしまってなにもれんらくがとれない状態になった。

2022-03-03

本日バグ

環境

next.js

scss

tailwindcss

リロードするとtailwindcssの@layerが適用されるんだけど遷移とか初回アクセスだと全く読み込まれないみたいなバグに遭った

@layer書いてる所にたまたまtailwindcssとは無関係スタイルも書いててそこで使った!importantが原因だった

!important消したら治った

2021-09-03

職務経歴書

職務要約

東京電機大学卒業後、VisualBasicを用いた会計支援ソフトウェア開発、自社サイト制作従事するなど、アプリケーションエンジニアフロントエンドエンジニアとして5年にわたって業務をおこなって参りました。

今後は、その中で得られたVisualBasic予約語暗記の実務経験を活かして、VB.NETによる開発に取り組んでいきたいと考えています

 

活かせる経験スキル

  1. VisualBasic予約語暗記についての1年の実務経験
    独力で業務遂行しました。必要に応じてチームや組織に協力を仰いだり、時には主導するなど、他者と協力してプロジェクトを進めることを心がけました。
    また、スキルの習熟を目的として、業務外で暗唱・復唱・間隔反復学習に取り組みました。
  2. エンジニアとして組織をまとめた実務経験
    ぞうさんチーム(開発部)に責任を負う立場で、3年にわたって業務遂行しました。
    加えて、エンジニアとしては、VBエンジニアリングに率先して取り組みました。
  3. クリティカルシンキングでの実務経験
    1日あたりの創出アイディア数が100片という特徴を持つ環境で3年にわたり取り組みました。
    日々働く中で、問題に関わることのみを洗い出す看破力に注力しました。

 

職務経歴

グッドサムシング株式会社アプリケーションエンジニア

プロジェクト

VisualBasicを用いた会計支援ソフトウェア開発

プロジェクト詳細

クライアント企業の社内システム

VisualBasicを用いた内製ソリューションの引き継ぎ・バージョンアップ開発。

特に複数法定通貨をないまぜに扱うため、レート換算と端数処理が至るところに発生する困難な会計処理でした。

 

グッドサムシング株式会社フロントエンドエンジニア

プロジェクト

自社サイト制作

プロジェクト詳細

社長ホームページ・ビルダー作成したプロトタイプを元に、HTML5/CSS3で再構築した自社コーポレートサイト

プロトタイプコードは全く利用せず、スタイルデザインのみを参考にいちから構築しました。

また、その2年後にスマートフォン対応も行っており、SCSSやflexboxを利用したモダンHTMLコードを構築できたと自負しております

 

学歴

東京電機大学卒業

 

LAPRAS Smart CV Creator β

2020-12-15

CSSレガシーから新しいソリューションがほしい

CSSセレクタかいう万能すぎて容易に共通スパゲッティを生むターゲット指定方法

レイアウト(外枠のデザイン)と色味や画像指定(中身のデザイン)が分離しきれておらず可読性が低い

・ついでにアニメーションまで入ってきてカオスアニメーション指定できる事自体は素晴らしい)

しかアニメーション文法なんか無理やりCSSに合わせててとっつきにくい(繰り返すがアニメーション指定できる事自体は素晴らしい)

SASSだとかSCSSだとか色々でてきたけど根本CSSなので辛いところは辛い

エコシステムJSにどっぷりなのもなんか気持ち悪い

2020-02-01

社長が自らWebサービスを開発したら社員批判された

とある受託開発の会社経営してんだけど、まぁ俺が元々フリーエンジニアやってた時の延長線上みたいな会社でさ。

と言っても、もう20年目で社員は25人で小さいながらもまぁまぁな規模なんだけど、売り上げは安定しないし、給料うなぎ登りだし。。

5年前にとある製品を俺主導で開発して、毎年本業受託の30%くらいの売り上げが立つようになっていい感じだったんだけど、

一昨年あたりから売り上げが下がり出して、もう今はほとんど0になってしまい、次の製品の開発が必至な状態なんだけど、

ほとんどの社員本業受託で一杯一杯だし、手が空いてる人といえば俺くらいしかいなかったのね。

まぁなんだかんだで、営業マネージメントも仕組みとしては回ってて、俺はキャッシュフロー管理と、勤怠が悪いような

不真面目な社員をガミガミ怒るくらいしか仕事はないわけよ。

元々Webエンジニアなので、NodeJSとかReactとか勉強し直して、今時のアーキテクチャーでまぁ今時のスタートアップ的な

サービスを作ってさ、今日社員みんなに次期製品のPoCとして発表したんだけど、アラフィフで元々ASP(Active Server Page)とか

JavaWebシステムを開発してたのが、フロントエンドWebpackから始まって、SCSS、ReactのHookとか理解して、バックエンド

ちゃんRestfulAPI設計してさ、DBMySQL結構頑張ったんだけど、反応がそれはもう微妙で。

まぁそれまで誰にも言ってなかったのも悪いんだけど、長い付き合いの社員社長がやるんじゃなくて社員からボトムアップ的に

やらないと盛り上がらないよと言われて、まぁ至極正論なんだけど、ただでさえ受託でパツパツなのに、誰がやるねん見たいなさ。

だったらトップが自ら動こうと思ったらこんなんで。ちなみにアイデアは本当に悪くなくて、実装も綺麗にしたんだけど、

まぁ多分社員的にはつまらない受託仕事の傍ら、イケイケの技術で自社プロダクトの開発をやりたいんだろうなぁ。

それが社長がやっちゃったから気にくわないんだろうなと思ったわ。

もう社長やめてまたフリーエンジニアやりたいなぁ、

バックエンドも、フロントも、AWSで超簡単サーバー作ったりめちゃくちゃ楽しかったわ。。

2019-11-27

anond:20191127113234

SCSSで各ページごとに、CSSを作るのが最強。

全ページに適用されるcommonとかがあるからややこしくなる。

2018-08-09

xyzzy 使いに 50 の質問

01. ハンドルネームは?

  増田

02. ご職業、年齢はいくつですか?

  なんでも屋さん、アラサー

03. xyzzyについて何かwebサイトを持っていますか?

  持っていません

04. 現在使用中の xyzzyバージョンは何ですか?

 0.2.2.253

05. xyzzy 使用暦はどれくらいですか?

  15年くらい

06. xyzzy を使うようになったきっかけは何ですか?

  昔のことすぎて忘れましたが、学校UNIX 演習で Emacs を使っていたので、Windows でも使おうと思っていて見つけたんだと思います

07. xyzzy 以外に使っているテキストエディタはありますか?

  Atom, McEditor

08. xyzzy を使う前に Emacs 系のテキストエディタを使ったことはありますか?

  はい

09. xyzzy を主に何に利用していますか?

  プログラムを書いたり設定ファイルをいじったり、テキストに関することならだいたい

10. xyzzy が関連付けされているファイルタイプは何ですか?

  txt, md, log, ini, bat, html, xml, css, less, scss, sass, styl, js, coffee, pl, php, py, rb, java, sqlかにもあるかも

11. xyzzy他人に勧めたことはありますか? また、結果はどうでしたか?

  使い始めた当時同級生が何人か使っていました

12. xyzzyフリーじゃなかったとしたらいくら位の値段になると思いますか?

  今なら3000円くらいなら買う

13. xyzzy を何と呼んでいますか?

  じじー

14. xyzzy の好きな点・嫌いな点はどこですか?

  好きな点:動作をほぼ自在カスタマイズできる点

  嫌いな点:動作カスタマイズするとき不自由なところがある点

15. パソコンを立ち上げている時間の内、xyzzy をどのくらい使っていますか?

  業務ときは3割くらい?

16. キーバインドWindows風ですか? Emacs風ですか? オリジナルですか?

  Emacs

17. .xyzzyに書く派ですか? .siteinitに書く派ですか?

  必要に応じてそれぞれに

18. 拡張Lispバイトコンパイルしますか?

  してます

19. セレクションリージョン、どちらを多く使いますか?

  リージョン

20. xyzzy を使っていて挫折したことはありますか?

  はじめのころ五目並べになかなか勝てなくて挫折しました

21. xyzzy の使い方をどうやって学びましたか?

  実際にさわりながら。LispGoogle 先生さまさま

22. xyzzy を使うにあたって一番苦労したことは何ですか?

  xyzzy 自体Lisp APIマニュアル化されていないところ

23. xyzzy を使って目からウロコだった機能は何ですか?

  Buffer Menu

24. 今の xyzzy に望むことはありますか? またそれは何ですか?

  矩形機能に影響が出そうだけどプロポーショナルフォントへの対応と、絵文字など最近 Unicode に追加された文字への対応

25. Lisp はある程度読み書きできますか?

  xyzzy自分の使いやすいようにできる程度には

26. Lisp のほかに読み書きできるプログラム言語はありますか?

  JavaScript, ES 2016, Coffee Script, Action Script 3, C, C++のごく一部, Objective-C, Rust, Swift, Perl, PHP, Python, Ruby, bash, xyzzy lisp

27. 自分で作った 拡張Lisp を公開していますか?

  GitHubGist にあるので探してください

28. 拡張Lisp で導入しているものは何ですか? (多い方は代表的ものをお答えください)

  clickable-uri, jscript-mode, markdown-mode など

29. これは外せない! という 拡張Lisp はありますか? またそれは何ですか?

  いろいろやるので今ある拡張機能がないと無理

30. NetInstaller を利用していますか?

  はい

31. 拡張DLL を導入していますか? またそれは何ですか?

  popup-dododo のための Cairo とか?

32. ドキュメント(info,reference等) は使っていますか? また、それは何ですか?

  使っていません。自分で改造してキーワードを全部 Web検索するようにしています

33. ネット関係拡張Lisp(www-mode,kamail等)を使っていますか?

  xyttr

34. アウトライン系のLispは使っていますか? またそれは何ですか?

  使っていません

35. メモ系(changelog-memo,howm等)Lispは使っていますか? またそれは何ですか?

  使っていません

36. xyzzy五目並べはやったことがありますか? また、結果はどうでしたか?

  今なら結構勝てます

37. キーボードマクロは使いますか?

  たまに。テキストの整形処理なら正規表現ゴリゴリやるほうが多いです

38. 辞書機能は使いますか?

  使っていません。国語英和・和英、英英辞典iPhoneアプリを使います

39. xyzzy のファイラは使いますか?

  毎日仕事に欠かせません。便利にカスタマイズしすぎてむしろファイラだけのために新しく xyzzy 自体を起動することもあります

40. フレームは使いますか?

  あまり使いません。新しく(Windows における)ウィンドウ

41. セッションは使いますか?

  使っていません

42. メーリングリストには参加していますか? また、メール送信したことはありますか?

  ありません

43. 2chxyzzy 関連スレッド書き込みしたことはありますか? また、その頻度はどのらいですか?

  大昔にどうしてもわからないことがあって書き込んだ記憶があります

44. xyzzywikiに書き込みしたことはありますか? また、その頻度はどのくらいですか?

  拡張機能実装に関してちょろっと書き込んだ記憶があります

45. xyzzyメニューは表示していますか?

  たまにほしくなるので表示しています

46. xyzzyツールバーは表示していますか?

  隠しています

47. xyzzyファンクションバーは表示していますか?

  表示していません

48. xyzzyバッファバーは表示していますか?

  表示していません

49. 色、フォントなどは変更していますか? またそれは何ですか?

  色は暗い背景色ハイライトカラーはできるだけ色相を離したパステルカラーです。

  フォントConsolas に源新ゴシック Regular を組み合わせています

50. 最後に、一言お願いします。

  まだまだ xyzzy は不滅です

2017-11-29

何者にもなれなかった

フロントエンドエンジニアにもデザイナーにもなれなかった。


HTML/CSSリファレンスなしで書けるし、WAI-ARIAを用いたアクセシブルなコーディングもできる。

CSS設計意識して保守性を大切にしたコードを書いているし、CSSアニメーションインタラクション操作できる。

SVGを一から書く方法やいくつものブレイクポイントを持ったページのコーディングスキルも身につけた。

Gitバージョン管理をしたり、モジュールバンドラータスクランナーscssコンパイルリントを通したりする能力も得た。

インプットが大好きで、毎日毎日様々なWebに関する知識を頭に詰め込んだ。


だけどJavaScriptは書けない。

JQueryコピペして簡単DOM操作を行うのが限界だった。


然しながら、昨今のフロントエンドエンジニアJavaScriptが書けて当たり前だし、

各種JSフレームワークWeb AssemblyWeb Componentsを使いこなして開発している。


SSG, SSRが主流のこの時代、生のHTMLを書いているような人種は淘汰され、

数年後には食いつなぐことが厳しくなる未来しか見えない。

両者の間には旧石器時代現代程の格差を感じる。


デザイナーなら道はあるかと思い、UIデザインにも挑戦した。

バーティカルリズムや余白設計、配色理論意識した整ったレイアウトXDIllustratorで作れるようになった。

でも「整った・整然としたレイアウト」は作れても、その先に進むことはできなかった。


全ては自分怠惰性が招いた結果である

だけど、藻掻き続けても道が拓けない。

もうこの先、どのように歩み進めればいいのかもわからない。


助けて欲しい。

何者にもなれない自分は嫌だ。

2015-12-21

SCSS(Sass)とLESSってどっちがいいの!?

Web製作者のタマゴなんだけどSass使ってないとか信じられないってセミナーでよく言われるんだけど!

Sass便利そうだから使ってみようかなって思うんだけどLESSっていうのもあるらしい。

どっちがスマートなの!?

ナウいのはどっち!?

結果にコミットしてくれる方は!?

実務性、将来性、設計思想の3つで評価して!!!!!!

2013-03-03

DMM APInode.jsで今の気分に最適なエロ動画紹介サービスをつくってみた

作成の経緯

エロが好きです。

ボクはDMM.R18のヘビーユーザーなのですが、どうしても自分の好みの中だけで、グルグル回ってしまい、

世の中にAVは山ほどあるはずなのに、知らないなんてもったいないもっとたくさんのエロ出会いたいという思いがあって日々悶々としていました。。

そんな中、AVというのは毎日の気分によってオナニーしたい見たいものが違うわけだから(例えば毎日食べたいおかずが違うように)、

今の自分の気分を簡単に答えれば、それに対してオススメAV動画を紹介してくれるというサービスはどうだろう?とモヤモヤと考えていました。

ある日、会社の人に相談したら、それ「いいね!」ということになって、「そういえばDMMAPIってのが公開されたから、それ使ってできるんじゃね?」ってことになり、

本格的にサービス開発を行うことになりました。

そしてこの度無事リリースすることができました。

作成したサイト

「今夜のおかず」

http://okazunight.com/

つの質問YES / NO で答えるだけで、今のあなたに最適なアダルト動画を紹介するサービスです。

使ってる技術

サーバーサイド:node.js

フレームワークexpressnode.jsフレームワーク

CSSフレームワークTwitter Bootstrap

クライアントjQueryCoffeeScriptSCSS

データベースMySQL

ビルドツール:grunt

バージョン管理GitHubプライベート

HTTPサーバNginx

インフラ:某クラウドサービス

node.jsは少し趣味でやった程度で、今回やってセッション管理ルーティング周りが勉強になりました。

データベースにはMySQLを使っていますnode.jsならばmongoDBというイメージが強いですが、質問ランダムに表示する機能で、

mongoDBは現時点で正式な機能としてはランダム検索が出来なかったので、MySQLを選びました。

あと、CoffeeScriptSCSSJavaScriptCSS記法を簡単にしてくれるやつで、慣れてしまうと離れられません。

あとはTwitter Bootstrap。これなしでは生きていられません。

こだわった点

    スマホでもなるべく早く結果ページまでたどり着けるようにしたつもりです。

    オススメ動画が表示された後に、今日はこの動画の気分じゃない!と思ったときチェンジボタンにより、同じ条件で他の動画チェンジ!できます

    質問からやり直したいときは、さいしょからボタンで他の質問からやり直せます

    一刻一秒を争うエロビ探しですのでパフォーマンスには気を配りました。

    最初サーバーサイドでHTMLテンプレートを使わずに完全にREST API化して進めていましたが、

    最初の表示までの若干のライムラグSEO対策の為、最初質問だけnode.jsHTMLテンプレートを使用して組み立てています

    また、シンプルサイトなのでライブラリjQueryのみ使用し、concat/minify化はgruntのタスクとして登録していますgzip化はNginxで行なっています

    我らがDMM様への敬意を払い、白ベースポイントで赤のシンプルデザインにしています

    苦労した点

    CSSSCSS)が初めてだったので、微調整するのが大変でした。

    質問パターンを考えるのと、紹介する動画が偏りすぎないようにするのが難しかったです。(これはまだ要調整)

    今後の展開(たぶん)

    質問に対するおすすめ動画の精度をもっとあげていく。 (ユーザーの癖を把握して、機械学習とかできればいいかなと)

    おすすめ動画を表示した後に、その商品を誰かにつぶやいたり。

    ・結果を自分お気に入りとして保存できたり。

    ユーザーからフィードバック。(これ早めに)

    最後

    今回、同じ会社に勤めるエンジニア3人が約2ヶ月で作成しました。

    実験的なサービスでもありますので、今後も色々と機能追加をしていくつもりです。


    それでは、今夜もあなたが美味しいおかずに出会ますように。

    http://okazunight.com/

    2012-07-08

    Rails3 とTwitter Bootstrapで、オシャレなエロサイトをつくってみました。

    Rails3 と jQuery で、真面目にオシャレなエロサイトをつくってみました。 - h300

    http://d.hatena.ne.jp/inouetakuya/20120331/1333192327

    に触発されて、オシャレエロサイトを作ってみました。

    以下は製作記になります

    オシャレエロサイトを作ろうと思ったのはいいのですが、デザインは苦手なので途方に暮れていました。

    h300の方はペパボソフトウェアエンジニアらしいのですが、こっちはただの素人プログラマー

    オシャレなサイトなんて作れるわけがありません。

    そこで何か裏ワザみたいなものはないかとググっていると、Twitter Bootstrapという文字が目にとまりました。

    Bootstrapの名前は知っていましたが、深い内容までは知りませんでした。

    ですが、紹介記事を読んでみると自分理想に近かったので早速使ってみることにしました。

    Twitter Bootstrapとは?

    Twitter Bootstrapはある程度有名だと思うんですが知らない方のために説明すると、

    CSSフレームワークの一つで、ウェブデザイン作成を手助けしてくれるものです。

    色々なCSSフレームワークを見ましたがTwitter Bootstrapが一番完成度が高いと感じました。

    ウィキを見ると最初リリース2011年8月なので比較最近のものですね。

    CSSフレームワークの説明は難しいんですが、

    普段、みなさんがウェブサイトを作る時、HTML + CSSで作られるかなと思うんですよね。

    この時、CSSが事前に用意されているとすごく楽じゃないですか?

    CSSフレームワークCSSの大部分を前もって用意してくれているんですよ。(フレームワークによりますが)

    ですので基本的にCSSに合わせてHTML記述するだけでウェブサイトが出来てしまます

    CSSに合わせてHTML記述するとはどういうことでしょうか?

    匿名ダイアリーでも似たようなことができるのでやってみます

    この文章は薄い青色ハイライトされていますよね?
    Bootstrapで似たようなことをする場合
    <div class="well">
    ハイライトしたい文章
    </div>
    という感じになります

    classにwellと指定しているだけですね。

    なぜそうするだけで文章がハイライトされるかというと、

    divのclassにwellが付いていたら、いい感じでハイライトしてねっていう指示が

    Twitter BootstrapのCSSに書いてあるからです。

    BootstrapのCSSには、divのclassにalert alert-errorっていうのがあったら警告文だしてねとか、

    button class="btn"ってあったらボタン表示させてねとか色んなことが最初から書いてくれています

    もちろん見栄えがよくなるように記述されていますので、classを指定するだけでモダンデザインになるわけですよ。

    CSSに合わせてHTML記述するだけでウェブサイトが出来るというのはこういうことです。

    でも、最近ウェブサイトHTML + CSS + JQueryという場合も多いですよね。

    安心してください。Twitter Bootstrapの場合JQueryの基本的な部分も用意してくれています

    ですのでドロップダウンメニューやタブ、スライドショーなどの実装も簡単にできます

    それに加えてBootstrapはよく使うアイコン数百種類まで用意してくれています

    至れり尽くせりですよ。

    神様ですね。

    CSSフレームワークを使うメリットはまだまだあります

    CSS固定化されていると、HTML自動的に固定化されます

    CSSに合わせて記述するので当たり前といえば当たり前ですね。

    CSS記述一定HTMLもある程度一定なので、メンテナンスが格段にやりやすくなります

    個人プログラマーの方だと、サイトごとにHTMLCSSもグチャグチャという方も多いのではないでしょうか?

    フレームワークを使えばそういうこともなくなるということです。

    Twitter Bootstrapの凄さはそれだけではありません。

    現在ユーザーがどんなデバイスウェブサイトアクセスしてくるか分かりません。

    PCスマートフォンiPadTV3dsなど全てのデバイスに合わせてデザインを作るのは時間がかかりすぎます

    でもTwitter Bootstrapならbootstrap-responsive.cssというCSSを選ぶだけで、

    デバイスの横幅に合わせてデザインが変わるレスポンシブなウェブサイトができます

    iPhoneiPad対応もすぐですよ。

    もちろんデメリットもありまして、サイトデザインが似てしまうというのが難点です。

    ですが基本はBootstrapを使って、ちょっと自分カスタマイズしてオリジナルっぽくすることもできますので、

    一度Twitter Bootstrapを使ってみる価値はあると思います

    http://twitter.github.com/bootstrap/

    Bootstrapの説明が長くなってしまいましたね…。

    ここからアダルトサイト作成の説明です。

    クローラ作り

    1.エロいサイトを巡って、XVIDEOSやFC2動画などのリンク、embedされたものがあれば取得。

    2.リンクから動画サイトアクセスしてサムネイルを取得。

    3.データベースに登録。

    一連の作業をクローラーやらせプログラムRubyで書く。

    RailsでBootstrapを使う。

    RailsでBootstrapを使うにはtwitter bootstrap railsというgemを使うらしいです。

    しかし、使おうと思ったのですが、windowsでは上手くインストールできませんでした。

    windowsRubyを使うとバグが多いです。

    仕方なく、代わりにsass-rails-bootstrapというものを使いました。

    違いはcssにLESSをつかっているかsass(scss)を使用しているかだと思います

    http://d.hatena.ne.jp/tkawa/20120219/p1

    の記事が参考になりました。

    ちなみにLESSとかSassってのはcss効率的に書けるすぐれたものです。

    最近webクリエイターボックスさんでも紹介されていました。

    http://www.webcreatorbox.com/tech/css-sass/

    LESSとかSass(Scss)もお勧めですよ。

    railsでは3.1からcoffee scriptと共にsassがデフォルトで使えます

    このあたりがRailsの素晴らしさですね。

    Bootstrapは画像を綺麗に並べて表示することにも向いているので、

    アダルトサイトと相性がいいなと感じました。

    タグリスト実装

    AV女優名とか女子校生人妻などのジャンルタグがあれば便利ですよね。

    Railsではacts-as-taggable-onというgemを使い実装しました。

    動画タイトルが事前に用意したAV女優リストジャンルリスト合致すればタグ付けするという感じです。

    AV女優リストDMMからジャンルリストは大手アダルトサイトから作成しました。

    AV女優タグ名前順でソートしたいと思ったのですが、

    漢字ソートできないのでしばらく悩んだ結果、

    タグ付けするときに あおいそら-蒼井そら みたいな感じでタグ付けするようにしました。

    もっとスマート方法があるはずですが思いつかなかったので仕方ないです。

    ア行、カ行…のように行別にわけて、なおかつアイウエオ順で表記してますので

    お気に入りAV女優名を探しやすいはずです。

    簡易ブックマーク実装

    クッキーを使ってログイン不要ブックマーク機能作りました

    jquery.cookie.jsを使って、cookie配列に直してごにょごにょしてという感じで実装しました。

    削除ボタンを押すと非同期で通信して…などいろいろ面倒でした。

    でも、動画の数はかなり増やしていこうと思っていましたので頑張って実装しました。

    動画の下のブックマークするボタンを押していただければブックマークできます

    ブックマークするボタンの表示などにBootstrapの便利さを感じました。

    アダルト動画を大画面で見れるようにする。

    実はこれが一番やりたいことでした。

    多くのアダルトサイト広告だらけで、肝心の動画がポツンと小さくあるだけというのが多いです。

    世の男達は疲弊しています。それは本当に疲弊しています

    戦場で疲れた兵士たちに、そんなせせこましい画面でアダルト動画見ろって?

    そんな野暮なこと言いませんよ。

    PCスクリーンの画面いっぱいに、大画面で、ドカーンエロ動画を楽しんで下さいよ。

    動画はできるだけ大きく表示しています。もちろんレスポンシブです。

    全画面表示にすりゃいいじゃん…っていうのは違うんですよ。

    全画面表示だと逃げれないじゃないですか

    不意に誰かが部屋に入ってきたらどうするんですか? 

    1クリックと2クリックは大違いですよ。

    コンマ一秒で守れる尊厳がある。

    そう考えております

    スマホ対応

    Bootstrapでデザイン面はスマホ対応にはなっているのですが、

    加えてjpmobileというh300で紹介されていたgemを使って、

    スマホアクセスされたら表示する動画の数を減らしてとか、

    広告の種類を変えるなどの微調整をしました。

    サーバー選び

    osukiniサーバーのGT2プランしました。

    初期費用1900円、月940円で

    CPU 2.66GHz、メモリ 2.2GB HDD200GBです。

    チューニングは正しいかからないですね。

    まぁ、アクセス捌けなくなってから考えます

    Nginx + Unicornを使おうとして結局やめる。

    Railsは遅いので少しでも速くするためにApacheの代わりにNginx使おうと思ったのですが、

    PC用のキャッシュスマホ用のキャッシュを別々に保存して使う

    ということがどうしてもできませんでした。

    PC用のキャッシュがある場合スマホ用のキャッシュがなくてもキャッシュがあると認識されるなど、

    もともとNginxrailsのページキャッシュは相性が悪いようです。

    Nginx側でキャッシュする、もしくはスマホ用のアドレス別にすればできるかもしれないですが、

    http://m.サイト名 みたいにするのが嫌だったので最終的にNginxを使うことをやめました。

    Nginxに関するネット上の記述も少ないので運用するのは危険かな、ということもあります

    Nginxを少しだけ使ってみた感触はかなり速いというものだったので残念でした。

    バージョンが変われば、また挑戦したいですね。

    Apache + passengerは遅いんですよ…。

    【追記】

    キャッシュの問題はRails側の問題だったので

    やっぱNginxでもいけるかもしれないですね。

    暇なときに試してみます

    出来上がったサイト紹介

    オシャレのハードルを上げすぎて紹介しづらくなったのですが、

    紹介しないと終わらないということで紹介します。

    http://nukisen.com  (エロ注意)

    サイト名はオシャレに横文字でNukisenにしました。読み方はヌキセンです。

    http://bootswatch.com でダウンロードできるBootstrapのテーマそのままですが、

    オシャレというかクールデザインです。

    Bootstrapを使うと自動的に細部まで凝ったデザインになるので最高ですね。

    下にスクロールしていくと背景のグラデーションが変化したりとか、とても一人ではできないですよね。

    長々と説明してきましたが、

    ぜひNukisenで大画面のアダルト動画体感してほしいです。

    動画の数をいきなり大量に増やすグーグル様に怒られるので、

    しばらくは一日30本ぐらいの更新でいく予定です。

    アダルトサイト同士の相互リンクアクセス増やしてなどはしない方向です。

    最後

    新しいことに挑戦すると得られるものが多いなと感じました。

    ウェブサイトを作る際、無意識のうちに自分のできる範囲の技術で構築しがちだと思うんですが、

    そうすると成長はないですね。

    新しい技術に柔軟に対応していきたいです。

    長文失礼しました。

     
    ログイン ユーザー登録
    ようこそ ゲスト さん