  |
はてなキーワード: スクロールとは
トップページの新デザインからすれば、エントリーページは当然こうなるだろう。
特に悪いとは思わない。
これまでは背景が灰色だったので、「元ページの裏側」的イメージが強かったが、
白背景の新デザインはそれをある程度払拭しているのではないか。
スペースを贅沢に使って、ページが縦に長くなっている点には、おそらく批判が集まるだろうが、
我々はもういい加減、広い画面とフルスクリーンアプリ、そしてタッチ操作によるスクロールに慣れるべきなのだ。
アイコンと表示位置のせいで、そのコメントを非表示にするボタンにしか見えない。
気軽に押しまくる人が出てくるだろう。
もう少し目立たなくしてほしい。
あなたがすべき事は
はてなブックマークを投げ捨てる
の二つに一つであるとここで告げよう。
なぜこんな事を書いているかというと
＞追って1月30日には、ブックマークのコメントが一覧表示されているページを刷新いたします。
1月30日にはてブのマイページあたりのデザインが変わるという
しかも戻せない。
そこで
はてなﾌﾞｯｸﾏｰｸ
しかし、一度に表示される記事数が少なく使いづらい。
そこで
http://www.google.co.jp/intl/ja/chrome/browser/
とそれの拡張機能で
自動的に次のページを表示してくれる
Infinite ScrollかAutoPatchWorkを使う。
Chrome ウェブストア - Infinite Scroll for Google Chrome™
https://chrome.google.com/webstore/detail/infinite-scroll-for-googl/ffnoklnododdkbbnaolmpclkjlldginl
https://chrome.google.com/webstore/detail/autopatchwork/aeolcjbaammbkgaiagooljfdepnjmkfd
Chromeに限定した話ではなく、
FirefoxやOperaなどでも同様の機能のプラグインが見つかれば
はてブのリニューアルについて、どっちかというと反論が多いのだけど、僕は大賛成なんですけどね。
http://enator.hatenablog.com/entry/2013/01/09/232843
論点がまとまっているので、ここを軸に行きます。
→(1)可読性、一覧性の喪失
別に良いんじゃないか? というより、前のテキストサイトの成れの果てみたいなごちゃごちゃしたデザインは、ちょっとキモかった。はてなって、がんばっているけど、どこかであか抜けない所があって、それをようやく払拭できた感じ。最初の一画面で見える情報量が少ないという意見も多いけど、デザインの潮流がどちらかと言えば減らす方向にあるし、別段スクロールすれば見ることは出来る。一方でページ下部の情報は多くなっていて、多分、トップページにある件数は増えたんじゃないかな。
ただ、フォントサイズを必要以上に小さくするのは止めてほしい。せめてブラウザの設定の90%くらいにしてほしい。コメントとかみづらい。
→(2)はてな枠
これも特に気にならない。はてな自身がキュレーションする方向は前からあったし、それを前に押し出しただけ。平等とかどうでも良くて(誰もそんなこと標榜もしてなければ、期待もしてない)、これもそれほど以前とは変わってない。掘り出し物記事の方が面白くなる可能性はある。
→ (3)動画枠の扱いの悪さ
これは賛成。せめて中段に持ってきて、ライトボックスエフェクトで、その場で再生とか出来てもいいんじゃないかな。Yahoo!Jの動画検索は、検索結果からその場で再生できるので、そういう機能を期待。
→(4)旧デザインに戻れない
→ (5)全体的なデザイン
?? デザインセンスみたいな話をしているのかな? それなら、Pinterest風のタイルデザインになっただけでは。今のウェブはどっちかといえばシンプルな方に動いているのだから、これでいい。
ほとんど不満はないし、そもそも「ヘビーユーザー」様方はどうせTwitterやRSSで利用しているのだろうから、トップページの与える影響は軽微だし。
そんなんじゃないんですかね。
昼前に出先で見たhttp://anond.hatelabo.jp/20130108203837がどうなってるかと帰って来てから見ようと思ったら、見事にホッテントリから消えてて驚いた。
1日で怒涛の勢いでブクマされたわけだから、少なくとも今日中は残っているべきだと思うが...。
そしてスクロールしてみると30ブクマもない記事がホッテントリに上がってきている。ヘタをすると、1桁台すらある。何がホットなのだろう。
そんなものまでホッテントリページに上げては消え、をしていたら何がホットなのか分からないし、とてもじゃないが追いつけない。ニートじゃねぇんだよ。
夜7:30頃にパソコンではてブトップページに飛んだら目が点になった。
なんだこのサイト？知らないページだ。
最初は飛ぶページ間違えたかな？と思ってurlを確認したらたしかにはてなだ。
で、あー…デザイン変更したのか。迷走してるなあと思いながら
「旧デザインに戻す」ボタンを探してスクロールしたのだが見つからない。
いやいや、仮にもはてなだよ？そんなはずはあるまいと幾つかページを漁ったが見つからない。
えーー…
ニコニコだってgmailだってデザインをもとに戻すことできたじゃん。
移行期間設けたじゃん。
今回のデザインの気に入らない点を書こう！と思ったらもう書いてあった。
http://anond.hatelabo.jp/20130108194533
ありがとうございます。兄貴！もっといってやって下さい！（小物並の感想）
正直白くてオサレなだけで自分の興味ある話題が見つけづらいです。
スクリーンにエントリーが３つか４つしか紹介されてないのが利便性下げてる。
スクロール量多いし一覧表示にできないし。
前は大体画面の中央やや左に視線をおいてスクロールすればエントリーを一覧できた。
あと元のサイトに画像があるとエントリーのタイトルが下がるのやめて下さい。
左から右に視線を動かした際タイトルを読もうとするとエントリーごとに上にいったり下にいったり。
よーみーづーらーいー
社内でだれもテストしなかったわけじゃないだろうに。
リロードしていくうちにもうトップページの竹中平蔵が恨めしくなってきちゃうよ。完全にトバッチリだけど。
で、解決法として早急に
それでとりあえず鎮火すると思います。
はてなにはモヒカン族のおじさんたちが生き残っているはずなので
http://b.hatena.ne.jp/entry/anond.hatelabo.jp/20121205121545
dambiyori はてな, 政治 右上ははてなが直接出してる広告欄っぽいから、はてなが直接受けた政党広告が共産党しかなかっただけでは。右下はアドセンスでほかの政党も出てくる雰囲気。 2012/12/05
この通りだった。個別ブクマページの右上広告のアドレスは、http://red.st-hatena.com/
他の政党の広告とか、他の広告を右上で見たことがある人っている？
偏向していないと、絶対に言い切るのか？そこはダブスタで叩き出すのは目に見えているが。
右下にスクロールしたのはアドセンスだから、民主党とか政党以外の広告も出てるけど。
パーソナライズド広告とか言ってるのは、アドセンスのことを言ってるんじゃなくて
http://b.hatena.ne.jp/entry/anond.hatelabo.jp/20121205121545
↑
こういう個別ブクマページのこと。右上に共産党の3択クイズの広告とか出てるよね。
ショウガの何たらとか料理のブックマークの右上広告でも、日本共産党の広告ばかり。
政党の広告と言えば、日本共産党「のみ」しか表示されないんだが。
もちろん、その政党のサイトであれば、その政党を宣伝するのは当たり前だが。
これって、一般の人から見れば、ものすごく変なサイトと思われるんだが、
はてなは、そこのところは分かってるのか？
２ちゃんがどうたらとか言っても、
２ちゃんって、そもそも共産党の板でさえも、日本共産党の広告を表示していないんだが。
はてなサヨクの見えない敵叩きのニコニコ動画は多種多様な広告が表示されているから、
政党広告ではこんなに日本共産党の広告「のみ」しか表示されないんだろうね。
はてなサヨクがいたけど、
やっぱり、ネットで一番に偏っているな。
遥かに偏ってなく、一般感覚に近いな。
表示速度やスクロールやズームのパフォーマンスは Androidのブラウザと比べて最も優れた部類に入ると思う。
ユーザーの声がどの程度反映されているのか分かりにくいし、新機能の導入にはかなり消極的な印象がある。
不満をつらつら書いてみる。
ウェブページにアクセスすると、ロケーションバーのファビコンがクルクル回るアイコンになる。プログレスバーはない。
これではいつになったらロードが終わるのか検討もつかない。ロードに時間がかかる原因も分からない。
Javascriptの処理が終わらないのか、あるサイトからのレスポンスが極端に遅いのか。
原因がわかれば、利用者は前のページに引き返したり、違う方法でアクセスすることを試みることができる。
例えば「firefox addon」と調べた後、「firefox addon android」と単語を追加して調べたいとき、Firefox では全て入力しなおしすることになる。
ソフトキーボードが使いにくい スマホ/タブレット では、これがどれほど面倒でイライラする作業か。
Google Chrome では以前に検索した文字列を記憶していて、次回検索するときにそれをサジェストしてくれる。
Firefox は Androidネイティブのコピペ機能を使わず独自に実装しているため、現状はコピーとシェアくらいしかできない。
選択して新しいタブに検索結果を表示する機能は、当然のように他ブラウザには実装されている。Chromeなどは最短２タップでできる。
Firefox で同じ事をやろうとする場合、タップ長押し、コピー、ロケーションバー長押し「Paste ＆ Go」するしかない。
せっかく複数の検索プラグイン用意してあるんだから、検索エンジンを選択して検索とかあればいいのに。。
Google は Webkit でしかレイアウトの確認をおこなっていないようだ。というか意図的に Webkit 依存のレイアウトにしているんじゃないかと感じる時がある。
スマホ版の Firefox のGoogle検索結果はフィルタリングもできない簡易レイアウトで、タブレットにいたってはレイアウトが崩れたままだ。これが数ヶ月放置されている。
どうせ先頭十数文字しか表示されないんだから、ドメイン名を表示したほうがフィッシング対策的にもよっぽどいい。
しかもタイトルが表示されているのに、タイトルの文字列をクリップボードにコピーできない。
ファビコン（サイトアイコン）はほとんどの端末でピンぼけしてるし、表示領域狭くなるし、表示しなくてもいいんじゃないかと思う。
なんにせよ有効活用できていない。
設定項目の一番上にでかでかと About Firefox って... それは一番下でいいだろう。
そんなことが気になるくらいに設定項目が少ない。Firefox 19 でテキストの再配置項目が増えたくらいか。
「パフォーマンス情報を送る」とか、「追跡拒否をサイトに通知」とか、インストール時にしか使わないであろう「Androidからインポートする」とか。
あんまり重要じゃない設定項目がほとんどだ。しかも字が大きくて一覧性が悪い。
利用者にとって必要なのは「ホームページを変更する」とか、「終了時の動作を変更」と「ユーザーエージェント」を変更するとかさ、そういうのなんだよね。。
Firefox の強みって何だったけ。
アドオン数では Dolphin ブラウザよりも圧倒的に少ない。アドオンサイトもインストールしづらいし、目的の物を見つけづらい（というかそもそも無い）。
現状ではアドオンの質もあまり良いとは言いがたい。それに、Firefox本体の設定項目が少ないせいで UA も変えられなければ「選択して検索する」機能さえもアドオンに頼らざるを得ない。
Android 版 Firefox は驚くほど機能が少ない。
これは主に Firefox OS のためのアプリストアだ。方針や理想は理解できるし、面白いと思う。
でも Firefox OS で利用するなら理解できるものの、より良いアプリが揃う Playstore の存在する Android 端末で一体誰が利用しようと考えるのだろうか。
Webアプリの理想を追うのはいいが、Android に向けた Firefox を作るのならば、身近なユーザビリティを向上させるのに優先的に力を注いでほしい。
これは Firefox に限ったことでは無いけれど、縦に長いページでは、一番下までスクロールするのに結構頑張ってスワイプし続けなければいけない。
こういう機能はサイト側がJSで用意すべきだとか思っているんだろうか。
リンクやフォームをタッチした時に背景がオレンジ色になる。Chromeのように灰色ならいいのだけれど、オレンジ色は目に刺激が強すぎて、チカチカする。about:config で探してみたけどそれらしい設定項目もなかった。
端末のバイブが鳴るのも必要ない。そういうのを有効無効にする設定項目が欲しいんだけどなぁ。。
Nexus 7 のことだ。スマホ UI を拡大しただけなので、タブの切り替えにあれほどまでに大げさなアニメーションは必要ないと感じてしまう。
画面に余裕がある分にはタブは常に表示されていて欲しい。
できない。これは開発版で検討されていて、初期設定無効になっているらしいので、安定したら使えるようになるんだろう。
Do Not Track (DNT) 機能。利用者がトラッキングの可否を選択できるのは素晴らしいことだと思う。
けれども世間のほとんどのサイトがこの機能を無視している現状で、この機能を大々的に宣伝に使うのはどうかと思う。
about:feedback でフィードバック送れるのだけれど、Chromeみたいに設定項目あたりに書いといてくれないと気づかない。
Playstoreのレビューが荒れるのもわかる気がする。
==
以上いろいろFirefoxへの不満を書いてみたけど、なんだかんだ多分 Firefox は使い続けると思う。デスクトップ版は大好きだから。
でもAndroid版の現状の使い勝手はひどいよ。イケてない。永遠のサブブラウザだ。Android 4.1以降が普及したらChromeにとって替わられるのは目に見えている。
デザイン的にも曲線を多用した今のデザインはあまりAndroidのHoloテーマに合っているとは思えないし。
先日の「週6フリーターもWEBサービス作ってみました。」に触発されて、
IT系サラリーマン。別に仕事でWebとかプログラムとかはやってない。IT系企業に務めているというだけ。
でもそれだとこの先が無さそうなので自分でも何か作れないかと思ってるところに、１０００を作ってみた〜を読んで奮起。
会社のエンジニアさんに「どんなの作るのが勉強になりますか」と相談したところ
「とりあえずそれ（１０００Userアンテナ）と同じようなものを作ってみれば？」と投げやりに言われ、今に至る。
以前に「HTMLでWebサイトを作ろう！」みたいな本を読みながら、
何のプログラムも入っていないゲームの攻略サイトを作ったレベル。すぐ放置した模様。
上記の事を話したら、仕事で練習がてらに触らされる。四則演算ができる程度。
活かす場は無いが、情報収集は好きなのでそれをテーマにすることに。
カラダアンテナ
普段RSSを使っていて一番イライラする「違うタグなのに同じ記事をいくつも拾ってきやがる」を解消したいのが目的。
「なるべくAPIとかjQueryのプラグインとかを使うようにしてみたら？」という神（社内エンジニアGさん）の発言により、無駄に色々使って見ることに。
参考サイト
・Google AJAX Feed APIの使い方メモ →ぐぐって最初に出てきたサイト。お世話になりました。
ただこれだと複数のRSSを読み込んだ時に、例によって例のごとく同じURLの記事が別のタグのRSSからいくつも出てくる。
これを解消するにはRSSをマージして重複するのを消せばいいらしい。
解説：複数のRSSをまとめて、更に色々抜いたり加工したりしてくれるサービス
参考サイト
なんというかやりたいことが８割がた解決してしまった。
GoogleとYahooが手を組むとこんなに凄いのかと関心。本当はもっと色々出来るらしい。
参考サイト
記事のfaviconも出せないかな？と思ったらそれもはてブのAPIと同じようなサービスがあるらしい。
参考サイト
ソーシャルリンクのボタンが欲しかったので、1000Users超えさんのところでも紹介されていたのをそのまま使う事に。
参考サイト
最近はただでこんな動画が見れるサービスもあるんですね・・・エンジニアさんはほんとすごいです。
公開するにあたって色々用意したもの達。
解説：サーバー。
レンサバ探してたら何故かサーバーエンジニアのSさんからここを進められた。
安かったし評判もぼちぼちなのでこだわりもなく決定。
Webサービスって言ったら独自ドメインだろ！ということで４８０円セールをやっていたので取ってみる。
参考サイト
せっかくなので広告もつけたくなったので調べてみた。
GoogleAdsenseって結構簡単に設置できるんですね。
参考サイト
・AdSenseアカデミー →Google先生の公式ガイド
解説：iPhoneアプリのリンクを貼れる。楽天がやってるんですね。
解説：書籍のアフィリエイトはAmazonさん。思ったより簡単でした。
https://affiliate.amazon.co.jp/
あと、スクロールしたらついてくるってのをやってみた。カッコいい。
参考サイト
解説：作ったWebサービスを投稿できるサイト。アンテナサイト多いですな・・・。
解説：Webサービスをつぶやいて宣伝してくれるWebサービス？ありがたいです。
http://inajob.no-ip.org:10080/tsukutter/
参考サイト
正直全然面白いWebサービスではないのはわかってるのですが、
それでも非エンジニアでもそれっぽいものができるんだなあというのと、APIって凄いと思いました（小学生並みの感想）
色々調べながら「あ、こういうWebサービスがあったらいいかも」というアイデアはいくつか浮かんだので、
こんどはそれを実現できるようにもっと勉強してみたいと思います。
サイト作ったよー！ - はてコま！ | はてブコメまとめ B!
このサイト作っていろいろ確認とかして「さーて公開」って思った矢先に自分の作ったサイトからこんな記事見つけて「うひゃー！」ってなりましたｗ
はてなブックマークのトップページって、正直なんか飽きちゃったし、スクロールせずに表示できるのが数エントリーだけで、やたらヘッダがでかかったり、広告がでかかったり、欲しい情報がほんのちょっとしか表示されないし、気のせいかエロいサイトのサムネイルが表示されなかったり、デザインもまじめくさいし、改善したらもっともっと使いやすくシャレオツになるし、アクセスも稼げるんじゃないのって思います。
私も自分のサイトを作ろうと思った経緯はこの方とほぼ同じです。。公式って少し見辛いって思っていました。
そんなときにはてブ1000users超え記事アンテナ(´・ω・)｜トップページを見つけて「あぁ自分で作るか」ってなりました。
週6フリーターさんがいろいろと使用したものを紹介してくれて、あまり技術のない自分でも作ることができました！
この場をお借りして、お礼を申し上げます。ありがとうございます！
では、恒例化している感じがする、サイト作成にあたってのご報告です。
使い方はいたって簡単。タグを選ぶか検索すると最近のはてブ100以上の記事があがってきます。
最初、サイトを作るにあたって「フリーターさんのものと差別化したいなぁ」と思ったので、私は"はてブエントリーのコメント"を"見る"ものに仕上げようと思いました。
なんでコメントを見たいと思ったかという原因はこちらの記事です。
この記事を読んでる人にも感じた人がいると思うのですが、タイトルを読んで「？」となりませんか？
記事を読み進めていくと更に「NSLog」が問題なのか？？と混乱しませんか？
最初のタイトルの印象が強すぎて、はてブのコメントを読んでやっと正確に判断できました。
なので、コメントをもうちょい読みたいなーと思い、こういったサイトにしました。
それと、フリーターさんのとこに書いてあるものを参考にさせてもらってます。
本当にありがとうございます。
Webサービスを作ったことがなかったのですが、HTMLやCSSは知っていましたので、ほとんどVimでコーディングし、ブラウザで確認するという普通の作業をしていました。
phpは勉強したことがなかったので、わからないことがあれば都度ネットで検索していました。
JavaScriptでFeedを取得したり、PHPを使ってAPIからJSONを取得など、ファイルがまとまっていない感があります。
実は、bootstrapで作ったナビゲーションバーのドロップボタンがスマフォだと押せないんですよね。。
こういう問題があるときにフレームワークを使ったのを後悔しますよね。
実に手軽に使えるbootstrapですが、なんとなく使うのはオススメしません。
ネット上には他にグリッドシステムだけや、違う素材を配布しているサイトがあるので、俺俺フレームワークを作ることをオススメです。（でも、まとまっているという観点でbootstrapは使いたいですよね。）
サーバーはさくらインターネットのホスティングサーバーを使用しています。
初めて、こういったサービスを作ったのですが、小さい微調整に非常に時間がかかりますね。
見難い、見易いを考えながらコードを変更して、ブラウザで確認して・・・を繰り返すのは時間がもったいないですね。どなたかいいノウハウをお持ちではないでしょうか？
みなさんも、こう立て続けにはてな関連のサービスが立ち上がると自分でも何か作りたくなりますよね。
思ったら作って便利な世の中にしましょう！えいえいおー！
はてなブックマークのトップページって、正直なんか飽きちゃったし、スクロールせずに表示できるのが数エントリーだけで、やたらヘッダがでかかったり、広告がでかかったり、欲しい情報がほんのちょっとしか表示されないし、気のせいかエロいサイトのサムネイルが表示されなかったり、デザインもまじめくさいし、改善したらもっともっと使いやすくシャレオツになるし、アクセスも稼げるんじゃないのって思います。
ホットエントリーに入った週6フリーターさんのはてブ1000users超え記事アンテナ(´・ω・)｜トップページは結構良くて、はてなブックマークのトップページよりも私には使いやすいのだけど、なんかおしい感じでもうちょっとかなーなんて思ったりしてました。
そんな中、最近仕事が忙しくて現実逃避になんか作りたくなって、お手軽でそんなに時間もかかりそうもなかったので、このサイトを作成することにしました。
はてなブックマークに登録されたエントリーを快適に閲覧することを目的として作成しましたが、一人で作成したため使いやすいのは私だけかもしれません。
私は職業プログラマーで簡単なサイトを構築する程度の知識は持っているため、作成時間はほとんどかからず機能的なところは１時間程度でしょうか。使用しているサービスやライブラリは普段使用しているものや「週6フリーター」さんが紹介していたものなので、ゼロから探していたらもっとかかったと思います。
レンタルサーバも既に契約していたものに相乗りしています。はじめは忍者ツールさんの忍者ホームページの無料プランにしたのですが、スマホで表示したら私には耐えられない大きさの広告が表示されたので、やめてしまいました。
また、サイト名をどうしようかとか、ドメインはどうしようとか、デザインを微調整したりとかは、会社からの帰宅後深夜にちょこちょこ行っていたので、そういう時間はもっとかかっているでしょうか。新しいサイトを立ち上げるときはみなさんそうだと思いますが、基本的な部分を作る時間よりも、その他このような作業に時間がかかっていると思います。
サイトの作成に利用したサービスなどを以下に記しますので、他の方のご参考になれば幸いです。
サイトを閲覧してくださった方は、こちらのコメントか、サイトに記載のメールアドレスまでご意見やご感想をいただければ、今後の参考にさせていただきたいと思います。
数百行、果ては数千行もある関数やメソッドが何故生まれるのか、どうしても理解できない。それ仕様の通りに動かそうと思ったら、テストもデバッグもライフワークになるよね？それとも未完成でも納品するってこと？もしかしたら「勝手に関数/メソッド作るな」司令が出てるのかもしれないけど、だったら「できません」と断ったほうが絶対楽だと思うぞ。あ、楽といえばこういうコードのレビューは楽だよ、「長すぎて読めない、書き直し」で終わるから。
条件分岐やループを何重にもネストしたコード。スクロールさせるとうねって見える。それさ、正常系の処理だとして一番最後の行の直前はどこ通るの？即答できないなら書き直せ。即答できても「こういう複雑なコードを書けるのがプロ」とか誇らしげな表情しちゃう人はただの勘違いバカだから、その姿勢改めるまで可愛がられるかサクッと見捨てられるかでしょう。
ANDやORが入り組みまくった条件式だけどさ、お前一体何がしたいの？それ多分お前しか理解できないから、システムがEOLになるまで面倒見てあげてね。
「1からnまでの総和」とか、公式がありそうなものをロクに調べもせず、n回ループする方法しか思いつきませんでした的に書いたコード。そんなバカ丸出しの実装で恥ずかしくないの？バカはプログラマに向いてません。それは前述の勘違いバカもそうだけど、頭を捻るセンスが無いのも致命的。
閏年を始めとする日付の計算アルゴリズムとか、標準提供されていそうなものまで手で実装したコード。お前それ辛くないか？てかマニュアルやヘルプはちゃんと読もう、な？
なんで同じコードをコピペするの？共通ルーチン作らなくてもgrepで直して回れば修正漏れも起きないって魂胆？同じ処理が出てくるたびに読んでてうんざりしてくる人も少なからずいることを理解して仕事してください。頼むよ。
DBのテーブルから全レコード取得して、必要なデータか判定して処理するコード。WHERE句って知ってる？データが数億件とかあってもそれでいいと思ってる？
その処理は本当にコードで書かないとダメなの？書かないで済みそうなことまで何故書くの？書かなきゃいけないとして、どうやって短く書くか工夫しないの？コードが増えただけバグも増えることを、もっと深刻に受け止めて欲しい。
最後にコードじゃないけど、巨大なディスプレイに高解像度で極小フォントという環境で開発ってどうなのよ。そこまでしてコード全部表示しないと書けないんだ？今まさに書いている部分なんて、変数もアルゴリズムも自分の頭の中にあるんだから画面に表示する必要なくね？確かに開発用のディスプレイは大きいものが複数あったほうがいいけど、それらはそういう使い方をするためにあるものじゃないと思うぞ。
いわゆる「スマホ専用サイト」ではなく、PC用サイト（という言い方は変ですが）をiPhoneで閲覧したときの使い勝手について。
カラムの横幅が広すぎると、ダブルタップで幅を合わせても文字が小さくて読めず、文字が読める程度まで拡大すると今度は横スクロールが発生する、というジレンマに陥ります。PCやガラケーの頃から、「適当に横幅を狭くしたほうが長文を読みやすい」という指摘はされていますが、iPhoneもそれに倣うべきだということでしょう。ページ全体の横幅についてはあまり問題になりません。
width:100%のヘッダーをpositionでページ上部に固定した場合、ページを拡大するとヘッダーの幅がそれに合わせて縮小し、内容物が折り返されて縦に長くなりページを半ば覆ってしまう、というような問題が発生します。
ブログやWikiでは、文中のキーワードにリンクをべたべたと張ることがよくありますが、スクロールやダブルタップズームのために画面のどこかにタッチしなければならないスマホでは、必然的に誤タップが多くなってしまいます。本文以外でも、なるべくタッチ用の余白を多く取るように心がけたほうが良いと思われます。
フォームにフォーカスするとそれに合わせて自動的にページが拡大されるiPhoneでは、フォーム入力中にはそのフォームに集中することを強いられます。フォームに文字を入力しながら変化していく本文を読む、という操作には向いていません。
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本ぐらいの更新でいく予定です。
アダルトサイト同士の相互リンクでアクセス増やしてなどはしない方向です。
新しいことに挑戦すると得られるものが多いなと感じました。
ウェブサイトを作る際、無意識のうちに自分のできる範囲の技術で構築しがちだと思うんですが、
そうすると成長はないですね。
長文失礼しました。
http://anond.hatelabo.jp/20120518154450とか、http://anond.hatelabo.jp/20120518195500とかを読んで思ったことを少し書いて見ることにします。
つたない文章ではありますが、読んでやろうという心の広い方は、そのままスクロールしていただけると幸いです。
私の身分を少しだけ明かすと、どうしようもない、どこにでもいる、何者にもなれない、地方大のいち学生です。
そんな私が、"StudyGift"とかいうものをみて、なんとかという女性をみていると、すごく、悲しくなります。「ああ、結局、そういう人だけなんだよね」と。結局、それなりに顔が良くて、アイドル的ななにかを持っているような人じゃないと、手を差し伸べてはもらえないんだろうな、私のような可愛くもない（「リア充」という単語からは程遠いですし。どうしようもないヲタですし……）、ただただ自分の興味のある分野についてガッツリ勉強がしたくて大学に来たような地味な人がそういうことやっても、彼女のようにはなれないでしょう？と思ってしまいます。実際にやっていないから、わかりませんが、やらなくても結果は見えているような気がします。
もちろんある程度親に援助していただいているとはいえ、バイトして、お金ためて、生活費とか払って、大学行って勉強して、ちゃんと単位とって、たまに先生に殴りこみにいって（わからないことがあるから）、っていう至って普通の大学生のような生活をしている者から見ると、「バイトしたり遊んだりしたから成績が下がった？ ちょっと、ふざけないでくれよぉ」と思ってしまいます。むしろ「テメ、ただのばかじゃないの？」と言いたくなりますがお口チャック。コレ以上汚い言葉を吐いたら、吐いただけ自分の中身が汚くなりそうなのでお口チャックお口チャックｗ
で、それはさておきまして。
なんで「こわいなぁ」と思ったかといえば、先程述べたとおり「結局そういう人だけなんだよね」ってことです。
お金を貢ぎたい人は貢げばいいさ。けれど、自分のアレコレを晒しているということは、少なくともインターネットが続いている間は、貢がれた方は何かしらの負い目を背負うことになっちゃうんじゃないの？と思ってしまいます。少なくとも、私がその程度のことで「お金を差し上げます」と言われたら、たぶん断ってしまうと思います。だって何もしてないもの。学業でなにかしらすげぇことしたわけでもないし。なにかすごい作品を仕上げたわけでもないし。すごい申し訳ない気分になってしまうと思うのです。
そして、もうひとつの理由。生活を晒して、もしかしたら、ストーカーのようななにかが生まれる可能性があるんではないの？と思ってしまったのです。これは彼女や彼女の生活を見ている人たちの良識が問われる問題かもしれませんが……。
坂口綾優は、学費を支援してくださるサポーターを探しています。 | http://studygift.net/home.php
彼女はGoogle+に写真をうｐしまくってフォロワー数1位となり、一時話題となった女子大生。
なんでも成績低下によって奨学金が貰えなくなったから、ネット住民が代わりに補填しろということらしい。
彼女の成績が地に落ちたのは、海外旅行のためのアルバイトと、インターネットに時間を取られたのが原因。
ネットにのめり込んで奨学金貰えなくなったって、ただのダメ人間じゃねえか。
海外飛び回ったりしてないだけ、大学やめたネトゲ廃人の知人のほうがまだ救えるわ。
いや、わかるよ。
本人というよりは、くだらない大人たちにそそのかされたんでしょう。
洗脳でもされてなかったら、こんな自己愛にあふれた写真を添えて、堂々と乞食行為をしようなんて思いつくものか。
このサイトのデザインといい、プロモーション方法といい、どうせ家入なんちゃらみたいなオッサンが関わってるんでしょ？
と思ってスクロールしてったらまんま家入って書いてあって正直笑った。
なーにがクラウド・ファンディングだよ、「物乞い」って書いたほうが伝わりやすいし正確だぞ。
そして一番下に偉そうに名前書いてるSupport memberの皆さん、ほんの100万くらいあんたらのポケットマネーから出せるだろうが（笑）
24時間テレビみたいな矛盾をネットの世界に輸入しまくるの、いい加減やめてほしいんだけど。
ま、こんなわけわからん学生と起業家の悪ふざけに付き合うお金があったら、
