「scss」を含む日記 RSS

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

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本ぐらいの更新でいく予定です。

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

    最後

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

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

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

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

    長文失礼しました。

     
    アーカイブ ヘルプ
    ログイン ユーザー登録
    ようこそ ゲスト さん