  |
はてなキーワード: Scssとは
https://twitter.com/kakedashi_chan/status/1495050350629322752
私はエンジニアちゃんの立場なのだが、同じような経験をしたことがあったので悲しいなあと思った。
以前ともだちと旅行した際にプログラミングの話題になった。わたしは当時から自分でウェブアプリを開発したり、ネイティブアプリを開発したりするのが趣味だったので、プログラミングスクール (Zeroplusというところだった)に通っている友達の話を興味深く聞いた。
そこで教えていたのは、たとえばJSであればもう誰も使っていないgulpであったりとかscssであったりといった時代遅れの技術で、とにかく顧客を捕まえて案件をゲットしようという内容だった。
わたしはネイティブアプリの開発者なのでウェブは門外漢だが、それでもウェブ開発という観点からはあまりに頓珍漢で時代遅れなことを教えていて面食らった。
わたしはともだちに「営業をやりたいのだったら良いスタートアップがあるから紹介するよ」といったが、ともだちはフリーランスエンジニアになりたいの一点張りだった。
「ウェブアプリ開発をやりたいのだったら、無料で良いチュートリアルがあるよ。お金を払うんだったらudemyとかの動画にしなよ。」
「HTMLとJavaScriptの関係はわかっている？今はReactやVueといった仮想DOMでの開発が主流だよ」
「HTTPサーバーというのが何を指しているのかわかっている？」
嫌味にならないように遠回しに「メガベンチャーに入れる」レベルの開発経験の積み方を話した。ともだちは残念なことにGoogle・Indeedなどに入れるような地頭の良さはないので、アルゴリズムよりも開発経験を積むように勧めた。
フリーランスエンジニアになるにしたって、誰がまともな開発をできない人に頼むのだろう。少なくともわたしの知り合いに業界経験が全くなくて、フリーランスエンジニアとして活躍できている人は一人もいないと伝えた。
ココナラやクラウドソーシングサイトで請け負う低単価の案件はいくらやっても、そもそも全く稼げないし、キャリアとして意味がないことも伝えた。
今ではWFHはどの会社でも当たり前だし、週４日勤務のような自由度の高い働き方がしたいのならマイクロソフトなんかがそういう取り組みをしていることも伝えた。
とにかく、エンジニアになると決めたのならちゃんと開発経験を積んで一般就職をいちど目指そうと伝えた。
１年後。
ともだちはその場では「ありがとう教えてくれて！やってみるね！」と話していたが、その後Twitterでは「らくして稼ごうウェブ制作！」といった標語を抱えている詐欺師のツイートを積極的にRTし、初心者コミュニティで自己啓発めいたことを１年間言い続けていた。
ともだちはその後事務員としてどこかの会社に就職したらしいが、音信不通になってしまってなにもれんらくがとれない状態になった。
東京電機大学を卒業後、VisualBasicを用いた会計支援ソフトウェア開発、自社サイトの制作に従事するなど、アプリケーションエンジニア、フロントエンドエンジニアとして5年にわたって業務をおこなって参りました。
今後は、その中で得られたVisualBasicの予約語暗記の実務経験を活かして、VB.NETによる開発に取り組んでいきたいと考えています。
VisualBasicを用いた会計支援ソフトウェア開発
VisualBasicを用いた内製ソリューションの引き継ぎ・バージョンアップ開発。
特に、複数の法定通貨をないまぜに扱うため、レート換算と端数処理が至るところに発生する困難な会計処理でした。
社長がホームページ・ビルダーで作成したプロトタイプを元に、HTML5/CSS3で再構築した自社コーポレートサイト。
プロトタイプのコードは全く利用せず、スタイルデザインのみを参考にいちから構築しました。
また、その2年後にスマートフォン対応も行っており、SCSSやflexboxを利用したモダンなHTMLコードを構築できたと自負しております。
とある受託開発の会社を経営してんだけど、まぁ俺が元々フリーでエンジニアやってた時の延長線上みたいな会社でさ。
と言っても、もう20年目で社員は25人で小さいながらもまぁまぁな規模なんだけど、売り上げは安定しないし、給料はうなぎ登りだし。。
5年前にとある製品を俺主導で開発して、毎年本業の受託の30％くらいの売り上げが立つようになっていい感じだったんだけど、
一昨年あたりから売り上げが下がり出して、もう今はほとんど０になってしまい、次の製品の開発が必至な状態なんだけど、
ほとんどの社員は本業の受託で一杯一杯だし、手が空いてる人といえば俺くらいしかいなかったのね。
まぁなんだかんだで、営業もマネージメントも仕組みとしては回ってて、俺はキャッシュフローの管理と、勤怠が悪いような
元々Webエンジニアなので、NodeJSとかReactとか勉強し直して、今時のアーキテクチャーでまぁ今時のスタートアップ的な
サービスを作ってさ、今日社員みんなに次期製品のPoCとして発表したんだけど、アラフィフで元々ASP(Active Server Page)とか
JavaでWebシステムを開発してたのが、フロントエンドもWebpackから始まって、SCSS、ReactのHookとか理解して、バックエンドも
ちゃんとRestfulなAPIで設計してさ、DBもMySQLで結構頑張ったんだけど、反応がそれはもう微妙で。
まぁそれまで誰にも言ってなかったのも悪いんだけど、長い付き合いの社員に社長がやるんじゃなくて社員からボトムアップ的に
やらないと盛り上がらないよと言われて、まぁ至極正論なんだけど、ただでさえ受託でパツパツなのに、誰がやるねん見たいなさ。
だったらトップが自ら動こうと思ったらこんなんで。ちなみにアイデアは本当に悪くなくて、実装も綺麗にしたんだけど、
まぁ多分社員的にはつまらない受託の仕事の傍ら、イケイケの技術で自社プロダクトの開発をやりたいんだろうなぁ。
それが社長がやっちゃったから気にくわないんだろうなと思ったわ。
01. ハンドルネームは?
03. xyzzyについて何かwebサイトを持っていますか?
持っていません
0.2.2.253
15年くらい
昔のことすぎて忘れましたが、学校の UNIX 演習で Emacs を使っていたので、Windows でも使おうと思っていて見つけたんだと思います
07. xyzzy 以外に使っているテキストエディタはありますか?
Atom, McEditor
08. xyzzy を使う前に Emacs 系のテキストエディタを使ったことはありますか?
プログラムを書いたり設定ファイルをいじったり、テキストに関することならだいたい
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円くらいなら買う
じじー
14. xyzzy の好きな点・嫌いな点はどこですか?
嫌いな点：動作をカスタマイズするときに不自由なところがある点
15. パソコンを立ち上げている時間の内、xyzzy をどのくらい使っていますか?
16. キーバインドは Windows風ですか? Emacs風ですか? オリジナルですか?
17. .xyzzyに書く派ですか? .siteinitに書く派ですか?
必要に応じてそれぞれに
してます
実際にさわりながら。Lisp は Google 先生さまさま
22. xyzzy を使うにあたって一番苦労したことは何ですか?
xyzzy 自体の Lisp API がマニュアル化されていないところ
23. xyzzy を使って目からウロコだった機能は何ですか?
Buffer Menu
24. 今の xyzzy に望むことはありますか? またそれは何ですか?
矩形機能に影響が出そうだけどプロポーショナルフォントへの対応と、絵文字など最近 Unicode に追加された文字への対応
26. Lisp のほかに読み書きできるプログラム言語はありますか?
JavaScript, ES 2016, Coffee Script, Action Script 3, C, C++のごく一部, Objective-C, Rust, Swift, Perl, PHP, Python, Ruby, bash, xyzzy lisp
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 の五目並べはやったことがありますか? また、結果はどうでしたか?
たまに。テキストの整形処理なら正規表現でゴリゴリやるほうが多いです
使っていません。国語、英和・和英、英英辞典は iPhone のアプリを使います
毎日の仕事に欠かせません。便利にカスタマイズしすぎてむしろファイラだけのために新しく xyzzy 自体を起動することもあります
あまり使いません。新しく（Windows における）ウィンドウ
使っていません
42. メーリングリストには参加していますか? また、メールを送信したことはありますか?
ありません
43. 2ch の xyzzy 関連スレッドに書き込みをしたことはありますか? また、その頻度はどのらいですか?
大昔にどうしてもわからないことがあって書き込んだ記憶があります
44. xyzzywikiに書き込みをしたことはありますか? また、その頻度はどのくらいですか?
たまにほしくなるので表示しています
隠しています
47. xyzzy のファンクションバーは表示していますか?
表示していません
表示していません
49. 色、フォントなどは変更していますか? またそれは何ですか?
色は暗い背景色、ハイライトカラーはできるだけ色相を離したパステルカラーです。
フォントは Consolas に源新ゴシック Regular を組み合わせています。
まだまだ xyzzy は不滅です
HTML/CSSはリファレンスなしで書けるし、WAI-ARIAを用いたアクセシブルなコーディングもできる。
CSS設計を意識して保守性を大切にしたコードを書いているし、CSSアニメーションでインタラクションも操作できる。
SVGを一から書く方法やいくつものブレイクポイントを持ったページのコーディングスキルも身につけた。
Gitでバージョン管理をしたり、モジュールバンドラーやタスクランナーでscssのコンパイルやリントを通したりする能力も得た。
インプットが大好きで、毎日毎日様々なWebに関する知識を頭に詰め込んだ。
だけどJavaScriptは書けない。
JQueryをコピペして簡単なDOM操作を行うのが限界だった。
然しながら、昨今のフロントエンドエンジニアはJavaScriptが書けて当たり前だし、
各種JSフレームワークやWeb Assembly、Web Componentsを使いこなして開発している。
SSG, SSRが主流のこの時代、生のHTMLを書いているような人種は淘汰され、
バーティカルリズムや余白設計、配色理論を意識した整ったレイアウトをXDやIllustratorで作れるようになった。
でも「整った・整然としたレイアウト」は作れても、その先に進むことはできなかった。
だけど、藻掻き続けても道が拓けない。
もうこの先、どのように歩み進めればいいのかもわからない。
助けて欲しい。
何者にもなれない自分は嫌だ。
エロが好きです。
ボクはDMM.R18のヘビーユーザーなのですが、どうしても自分の好みの中だけで、グルグル回ってしまい、
世の中にAVは山ほどあるはずなのに、知らないなんてもったいない！もっとたくさんのエロに出会いたいという思いがあって日々悶々としていました。。
そんな中、AVというのは毎日の気分によってオナニーしたい見たいものが違うわけだから（例えば毎日食べたいおかずが違うように）、
今の自分の気分を簡単に答えれば、それに対してオススメのAV動画を紹介してくれるというサービスはどうだろう？とモヤモヤと考えていました。
ある日、会社の人に相談したら、それ「いいね！」ということになって、「そういえばDMMのAPIってのが公開されたから、それ使ってできるんじゃね？」ってことになり、
本格的にサービス開発を行うことになりました。
そしてこの度無事リリースすることができました。
「今夜のおかず」
３つの質問に YES / NO で答えるだけで、今のあなたに最適なアダルト動画を紹介するサービスです。
・フレームワーク：express（node.jsのフレームワーク）
・クライアント：jQuery、CoffeeScript、SCSS
・ビルドツール：grunt
node.jsは少し趣味でやった程度で、今回やってセッション管理やルーティング周りが勉強になりました。
データベースにはMySQLを使っています。node.jsならばmongoDBというイメージが強いですが、質問をランダムに表示する機能で、
mongoDBは現時点で正式な機能としてはランダム検索が出来なかったので、MySQLを選びました。
あと、CoffeeScriptやSCSSはJavaScriptやCSSの記法を簡単にしてくれるやつで、慣れてしまうと離れられません。
あとはTwitter Bootstrap。これなしでは生きていられません。
スマホでもなるべく早く結果ページまでたどり着けるようにしたつもりです。
オススメの動画が表示された後に、今日はこの動画の気分じゃない！と思ったときはチェンジボタンにより、同じ条件で他の動画にチェンジ！できます。
質問からやり直したいときは、さいしょから！ボタンで他の質問からやり直せます。
一刻一秒を争うエロビ探しですのでパフォーマンスには気を配りました。
最初はサーバーサイドでHTMLテンプレートを使わずに完全にREST API化して進めていましたが、
最初の表示までの若干のライムラグとSEO対策の為、最初の質問だけnode.jsでHTMLテンプレートを使用して組み立てています。
また、シンプルなサイトなのでライブラリはjQueryのみ使用し、concat/minify化はgruntのタスクとして登録しています。gzip化はNginxで行なっています。
我らがDMM様への敬意を払い、白ベース＋ポイントで赤のシンプルなデザインにしています。
・CSS（SCSS）が初めてだったので、微調整するのが大変でした。
・質問のパターンを考えるのと、紹介する動画が偏りすぎないようにするのが難しかったです。（これはまだ要調整）
・質問に対するおすすめ動画の精度をもっとあげていく。 （ユーザーの癖を把握して、機械学習とかできればいいかなと）
・おすすめ動画を表示した後に、その商品を誰かにつぶやいたり。
今回、同じ会社に勤めるエンジニア3人が約2ヶ月で作成しました。
実験的なサービスでもありますので、今後も色々と機能追加をしていくつもりです。
Rails3 と jQuery で、真面目にオシャレなエロサイトをつくってみました。 - h300
http://d.hatena.ne.jp/inouetakuya/20120331/1333192327
に触発されて、オシャレエロサイトを作ってみました。
オシャレエロサイトを作ろうと思ったのはいいのですが、デザインは苦手なので途方に暮れていました。
h300の方はペパボのソフトウェアエンジニアらしいのですが、こっちはただの素人プログラマー。
そこで何か裏ワザみたいなものはないかとググっていると、Twitter Bootstrapという文字が目にとまりました。
Bootstrapの名前は知っていましたが、深い内容までは知りませんでした。
ですが、紹介記事を読んでみると自分の理想に近かったので早速使ってみることにしました。
Twitter Bootstrapはある程度有名だと思うんですが知らない方のために説明すると、
CSSフレームワークの一つで、ウェブデザインの作成を手助けしてくれるものです。
色々なCSSフレームワークを見ましたがTwitter Bootstrapが一番完成度が高いと感じました。
ウィキを見ると最初のリリースが2011年8月なので比較的最近のものですね。
普段、みなさんがウェブサイトを作る時、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が固定化されていると、HTMLも自動的に固定化されます。
CSSに合わせて記述するので当たり前といえば当たり前ですね。
CSSの記述は一定、HTMLもある程度一定なので、メンテナンスが格段にやりやすくなります。
個人プログラマーの方だと、サイトごとにHTMLもCSSもグチャグチャという方も多いのではないでしょうか？
フレームワークを使えばそういうこともなくなるということです。
Twitter Bootstrapの凄さはそれだけではありません。
現在、ユーザーがどんなデバイスでウェブサイトにアクセスしてくるか分かりません。
PC、スマートフォン、iPad、TV、3dsなど全てのデバイスに合わせてデザインを作るのは時間がかかりすぎます。
でもTwitter Bootstrapならbootstrap-responsive.cssというCSSを選ぶだけで、
デバイスの横幅に合わせてデザインが変わるレスポンシブなウェブサイトができます。
もちろんデメリットもありまして、サイトのデザインが似てしまうというのが難点です。
ですが基本はBootstrapを使って、ちょっと自分でカスタマイズしてオリジナルっぽくすることもできますので、
一度Twitter Bootstrapを使ってみる価値はあると思います。
http://twitter.github.com/bootstrap/
Bootstrapの説明が長くなってしまいましたね…。
1.エロいサイトを巡って、XVIDEOSやFC2動画などのリンク、embedされたものがあれば取得。
3.データベースに登録。
一連の作業をクローラーにやらせるプログラムをRubyで書く。
RailsでBootstrapを使うにはtwitter bootstrap railsというgemを使うらしいです。
しかし、使おうと思ったのですが、windowsでは上手くインストールできませんでした。
仕方なく、代わりに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/
railsでは3.1からcoffee scriptと共にsassがデフォルトで使えます。
このあたりがRailsの素晴らしさですね。
Bootstrapは画像を綺麗に並べて表示することにも向いているので、
アダルトサイトと相性がいいなと感じました。
AV女優名とか女子校生、人妻などのジャンルのタグがあれば便利ですよね。
Railsではacts-as-taggable-onというgemを使い実装しました。
動画のタイトルが事前に用意したAV女優名リスト、ジャンルリストと合致すればタグ付けするという感じです。
AV女優リストはDMMから、ジャンルリストは大手アダルトサイトから作成しました。
タグ付けするときに あおいそら-蒼井そら みたいな感じでタグ付けするようにしました。
もっとスマートな方法があるはずですが思いつかなかったので仕方ないです。
ア行、カ行…のように行別にわけて、なおかつアイウエオ順で表記してますので
クッキーを使ってログイン不要のブックマーク機能を作りました。
jquery.cookie.jsを使って、cookieを配列に直してごにょごにょしてという感じで実装しました。
削除ボタンを押すと非同期で通信して…などいろいろ面倒でした。
でも、動画の数はかなり増やしていこうと思っていましたので頑張って実装しました。
動画の下のブックマークするボタンを押していただければブックマークできます。
ブックマークするボタンの表示などにBootstrapの便利さを感じました。
実はこれが一番やりたいことでした。
多くのアダルトサイトは広告だらけで、肝心の動画がポツンと小さくあるだけというのが多いです。
戦場で疲れた兵士たちに、そんなせせこましい画面でアダルト動画見ろって？
そんな野暮なこと言いませんよ。
PCスクリーンの画面いっぱいに、大画面で、ドカーンとエロ動画を楽しんで下さいよ。
動画はできるだけ大きく表示しています。もちろんレスポンシブです。
全画面表示にすりゃいいじゃん…っていうのは違うんですよ。
全画面表示だと逃げれないじゃないですか！
不意に誰かが部屋に入ってきたらどうするんですか？
そう考えております。
Bootstrapでデザイン面はスマホ対応にはなっているのですが、
加えてjpmobileというh300で紹介されていたgemを使って、
CPU 2.66GHz、メモリ 2.2GB HDD200GBです。
Railsは遅いので少しでも速くするためにApacheの代わりにNginx使おうと思ったのですが、
PC用のキャッシュとスマホ用のキャッシュを別々に保存して使う
ということがどうしてもできませんでした。
PC用のキャッシュがある場合、スマホ用のキャッシュがなくてもキャッシュがあると認識されるなど、
もともとNginxとrailsのページキャッシュは相性が悪いようです。
Nginx側でキャッシュする、もしくはスマホ用のアドレスを別にすればできるかもしれないですが、
http://m.サイト名 みたいにするのが嫌だったので最終的にNginxを使うことをやめました。
Nginxに関するネット上の記述も少ないので運用するのは危険かな、ということもあります。
Nginxを少しだけ使ってみた感触はかなり速いというものだったので残念でした。
バージョンが変われば、また挑戦したいですね。
【追記】
やっぱNginxでもいけるかもしれないですね。
紹介しないと終わらないということで紹介します。
http://nukisen.com （エロ注意）
サイト名はオシャレに横文字でNukisenにしました。読み方はヌキセンです。
http://bootswatch.com でダウンロードできるBootstrapのテーマそのままですが、
Bootstrapを使うと自動的に細部まで凝ったデザインになるので最高ですね。
下にスクロールしていくと背景のグラデーションが変化したりとか、とても一人ではできないですよね。
長々と説明してきましたが、
ぜひNukisenで大画面のアダルト動画を体感してほしいです。
しばらくは一日30本ぐらいの更新でいく予定です。
アダルトサイト同士の相互リンクでアクセス増やしてなどはしない方向です。
新しいことに挑戦すると得られるものが多いなと感じました。
ウェブサイトを作る際、無意識のうちに自分のできる範囲の技術で構築しがちだと思うんですが、
そうすると成長はないですね。
長文失礼しました。
