「Bootstrap」を含む日記 RSS

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

2015-04-06

WEB製作している人に聞きたいんですが。

今年で社会人2年目です。

皆さんは、社会人になっても勉強し続けていますか?

どうやったら、日々新しい知識や技術を学ぼうという姿勢が持続すると思いますか。

当方webデザイナーを名乗っています

小さい会社WEB担当当方一人で、WEB製作のこと以外でも業務はあり、兼任で色々やっている感じです。

全部の時間WEB製作には使えないので、主要部分のコーディングを外部に委託するなどして、

なんとか日々の業務をこなしています

DTPデザイナーとして入社して、WEBデザインもこれから学んでいきますという時に

直属の上司web担当)が辞め、初心者同然の自分が、小さな会社web担当として、

自社のHP製作や他社のHP製作管理などを行っている状態です。

デザインしてもコーディングしても、毎回これでいいのかな、正しいのかなと思うことばかりです。

WEB製作で、自分ができることといえば、

html,

css(animationとか、あいまいな部分も多々あります),

jqueryプラグインを利用する程度),

eccube(全体のざっくりとしたいじり方、更新、ページの詳細編集)

php少し(worpressが少し編集更新できる程度)

seo(アナリティクスが少しいじれる程度)

×できないこと、これから学ばなきゃいけないこと

PHP、レシポンシブデザインec-cube/wp対応させるように)、bootstrap等、

WEB担当者が身につけるべき技術・知識を、恥ずかしながらまだもっていません。

くらいです。見ての通り、知らないことや、できても浅い知識、ばかりです。

もうどこから手をつければよいのでしょう。WEB製作者として一人前になりたいのに、

現実自分が追いつきません。周りの社員の方々はWEBについて疎いので、

その若さですごいねといわれますが、そのたびに心が痛んで仕方ありません。

もっと技術も知識も積むには、ひとつずつこなして毎日毎日勉強するしかないんですよね?

どれからやっていけばいいんですか?どうやって身に着けていけばいいんですか?時間の作り方は?

モチベーションの保ち方は?

追記;yahoo知恵袋で聞いたら常識にうるさい人々から揚げ足ばかりとられそうなのでここで聞きました。

2015-03-17

グリッドシステムってどれが一番強いん?

やっぱ無難Bootstrap使うのが安定なのかなぁ。

2015-02-02

結構まじめにエロサイト作ってみた

Twitter Bootstrapの使い方を覚えるのを兼ねて、無駄に持っている技術を使ってエロサイト作ってみた

サイト

三代目アナル将軍

http://anal.tonight-dish.com/

コンセプト

環境

サイト機能

検索タグ検索等々まだまだありきたりなエロサイト構成です。

ngx_pagespeedでCSS圧縮したり画像最適化してくれたりdefer_javascriptしたりと、

ページの表示速度を優先したつもり。

Twitter BootstrapレスポンシブWebデザイン

裏側で動画タイトル入力したり、掲載掲載操作できるCMSも作って

スマホからいつでもどこでもサイト更新できるようにした。

更新してもキャッシュ残りで残念な感じにならないように、キャッシュパージ機構も作った。

ついでにpubsubhubbubへPublishも作ったけどいまいちうまく行っているかわからん

アナルについて

人間が産まれから初めて感じる快感は、排泄によるものらしい。

やっぱり男女問わず誰しもアナルが好きなんじゃないかな。

アクセスについて

リリースしてから1週間ほどだけどGoogleインデックスイマイチ

100/日ぐらい。

2014-12-18

元週6フリーターWEBサービス作ってみました。

こんにちは。2年前に『はてブ1000users超え記事アンテナ(´・ω・)』というWEBサービスを作って記事を書いたものです。

当時はWEB業界で働くことを目標にしていましたが、いろいろあって今はまったく関係ない業界会社でお世話になっています

※カーちゃんには温泉じゃないけど一応孝行出来ました。

 2年前に応援してくださった方々、ありがとうございました!

以前作ったサイトと説明記事がこちらになります

当時1000ブクマ取って感激していた記憶があります

サイト:『はてブ1000users超え記事アンテナ(´・ω・)』

 http://hatebu-1000users-over.com/

・説明記事:『週6フリーターWEBサービス作ってみました。 』

 http://anond.hatelabo.jp/20120914214121

おかげさまで少し時間が空くようになったので久々になにかWEBサービス作ってみたいなあと思って今回新しくWEBサービスを作ることにしました。

以前今回ははてなユーザーに絞って作ったサービスでしたので、今回は反対に万人受けするものを目指して作ってみましたので、ひっそりとご報告したく思います

といっても相変わらずif文を書くのがやっとのPHP初心者なので大したことは出来ないですが。。。

下記が今回の製作物になります

今回の製作

 『@漢字の読み方(β)』

 http://kanjinoyomikata.com/

 ・このサイトについて

 タイトルのまんまです。難読・人名地名熟語などの読み方を提供するサービスになります情報の取得元については、後述しますがYahoo!さんから頂いております。また、それとは別に下記二つのページへの直リンクを貼らせて頂いております

①他サイト様で同キーワード検索した場合の結果

検索したワード翻訳サイトでの翻訳結果

今回のサイトでは、descriptionタグ自動的に該当の漢字の読み方を表示する仕様にしてあるため、例えばGoogleで『鬱』と検索した場合、ページタイトルの下に『鬱の読み方:うつ/utu』まで表示されるようになっています。要するに別にサイトのページをクリックしなくても読み方自体は調べ終わるようになっています。ですのでクリックしてくださった方への付加価値意味を込めてこれらのメニューを用意しています

サイドメニュー

ニコニコ大百科(β) / weblio(類語辞典) / 人名漢字辞典 / Wikipedia / NAVEまとめ / OKWave / はてなキーワード / goo辞書 / Twitter検索 / GoogleMAP /

流行サービスからちょっとヲタものまで。

この部分に関しては今後の評判を見て取捨選択していければと思います

例えば当サイトで『破面』と検索しても『アランカル』とは表示されませんが、ニコニコ大百科さんやwikipediaさんならユーザーが満足のいく反応を返してくれるだろう、といったように、当サイトではどうしてもカバーしきれない単語の補完をしたいという目的があります

GoogleMAPについては、例えば『竜胆(りんどう)』『小鳥遊(たかなし)』といった珍しい地名検索する機会があった場合せっかくだからどこにある地名なのかもすぐに見てもらえればと思って貼らせて頂いてます

翻訳については完全に友人のアドバイスで、

アニメマンガ流行りで海外の人も漢字の読み方や意味に興味を持ってる人が多いと思う。もちろん翻訳ソフトを使って確認とかもしてるとは思うけど、簡単に調べられるに越したことではない』

とのことだったのでそれは面白そうだと採用させて頂きました。

インスパイア

・『人名漢字辞典 - 読み方検索

 http://kanji.reader.bz/

・『読み方は?』

 http://yomikatawa.com/

・『漢字辞典オンライン

 http://jiten.go-kanken.com/

・『漢字辞典

 http://kanjitisiki.com/

『読み方』サイトの先輩サイト様方。今回の製作物では大きな違いは文字を大きめにしたことや、先述のとおりdescriptionタグ漢字の読み方を組み込んでネタバレ式にしたことなどが大きな違いになります

先述とは別の友人からは『読み方系のサイトなんていくらでもあるから今更参入しても意味ないよwww』と笑われましたが、それでもまずとにかく作ってみる、やってみるというのが大事だと思います

使用した技術

①ルビ振りWeb API

 公開URLhttp://developer.yahoo.co.jp/webapi/jlp/furigana/v1/furigana.html

 ・解説:

 「漢字かな交じり文に、ひらがなローマ字ふりがな(ルビ)を付けます。」(該当ページより引用

 「そもそも漢字の読み方サイトなんてどうやって作るんだよ?」という問題を解決してくれるのがこのAPI。これがないと始まりません。知らない人に説明すると、APIというのは、

APIとは、アプリケーションプログラムインターフェイス略語で、プログラミングの際に使用できる命令規約関数等の集合の事を指す。 ソフトウェア開発の際、いちから全てを作ることは困難だが、APIを利用すればもともとあるプログラムをもとにして、自分プログラミングすることなくそ機能を利用したソフトウェア作成することができる。

というもので、これで他所からサービスデータの一部を借りることで新しいサービス製作の助けになってくれます。いろんな所から出ているのでぜひ探してみてください。

 ・参考サイト

  『Yahoo!デベロッパーネットワーク』 : http://developer.yahoo.co.jp/sitemap/

  →公式サイト

twitterbootstrap

 ・解説:前回も使用したものTwitter社が提供するCSSフレームワークサイトデザイン(外見)に使用。

  自動レスポンシブ、適当に組んでもそれなりの今風サイトになるので便利。

 ・参考サイト

  『Twitter Bootstrap』 : http://twitter.github.com/bootstrap/

  →公式サイト

  『Bootstrap 3.0入門 (全18回)』: http://dotinstall.com/lessons/basic_twitter_bootstrap_v4

  →超有名な初心者向けプログラミング学習サイトドットインストール様。

   HTML,CSS,PHPの基礎習得もこちらで。PHPhtml素人自分でも何とか今回も乗り切りました。

忍者ツール

 ・解説:前回も使用させて頂いていますソーシャル要素はやはり外せないので今回も採用しました。

 ・参考サイト

  『忍者ツールズ』 : http://www.ninja.co.jp/

  →今回使用させていただいたサービスの他にも便利なツールが盛り沢山です。

Favicon

 ・解説:前回も使用させて(ryお気に入りとかの横に出る画像のあれですね。

 ・参考サイト

  『Favicon Japan!!』:http://www.favicon.jp/favicon_auto_create/ :

  →前回も(ry 任意画像自動Faviconに変更してくれます。便利。

⑥その他

 ・使用サーバー

 『エックスサーバー』 : http://www.xserver.ne.jp/

  →前回も(ry やっぱり信頼出来るレンタルサーバー様です。

もし良かったら一度使ってみてくださると嬉しいです。ご意見感想頂ければなお幸いです。

読み方を複数表示したいのにどうしても1パターンしか出せませんでした。今後改善していければと思います

自分PHPはif文がギリギリ書ける程度の力量しかないので今回もヒーヒー言いながら作ってました。もし『WEBサービス作ってみたいけど敷居高そう』って人がいたらとにもかくにも作り始めてみてください!まずはじめるのが大切だと思います

それではありがとうございました!

2014-09-16

スクレイピングサイト作成

前に一度作成したエロサービスサイトリニューアルしてみた。

http://kawasaki.soapjou.com

ソープ嬢のスクレイピングサイト

前回の反省を踏まえて少し見やすくできたと思う。

前回の反省

 広告クリック率考えるとPCの方がおまけになってしまうかもしれない。

 詳細ページに回遊率を上げる仕組みが必要、逆にTOPページとかはアクセスないしどうでもいいっぽい。

デザイン

もうあきらめた。

Bootstrap使っても自分では無理なのでフリーテンプレートを使用。

クローラー

「simple_html_dom.php」最高だと思う。

Librahack事件を忘れないように相手のサーバーを思いやる設定(時間と頻度)にする

また、画像バイナリ比較をして更新された画像のみを取得。

サーバー

無修正サイトなど国内法に触れるもの以外のアダルトサイトGMO一択だと思う。

安いしサポート充実してます

ドメイン

お名前.com 安いし代行サービスがタダ(重要

たまにエロサイトWhoisダダ漏れの人いるよね。怖いね

アフィリエイト(予定)

前回はDTIを使用していた。

コレは動画の紹介とかやる気のある人以外効率よくないと思う。

前回は誰にも買われなかった。放置サイトPPCがよいのかな。

忍者、i-mobileなどの大手アダルトPPCを予定

おわり

Webデザインには

「はじめにAdobeありき。」

である

全てのサイト合わせて月5000円以上儲かったら(道のり遠い)買ってみる。

スクレイピングサイト作成

前に一度作成したエロサービスサイトリニューアルしてみた。

http://soapjou.com

ソープ嬢のスクレイピングサイト

前回の反省を踏まえて少し見やすくできたと思う。

前回の反省

広告クリック率考えるとPCの方がおまけになってしまうかもしれない。

詳細ページに回遊率を上げる仕組みを作って、逆にTOPページとかアクセスないしどうでもいいっぽい。


削除してしまった為再登録します。

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

http://anond.hatelabo.jp/20120708161051

に感化されてサイト作ってみた

bootstrap使ってもカッコよくできないよ?

プログラマー向けじゃないの?

http://searchjou.com

デザイナーって好きなサイト作れていいよなー。

デザイン

bootstrap3 の公式サイトを見ながら

CSS,Components,Javascriptタグにあるサンプルを全部作ってみた

デザインわからん。一度諦めた。

クローラー

一番経験のあるPHPを選択。

最初正規表現でガリガリ書いていたのだが

まりの面倒臭さに一度諦めた。

その後色々調べたら「simple_html_dom.php」の存在を知る。

スクレイピング作業が一瞬にして終わった。

サーバー

Root欲しいのでVPSを探す。

GMOアダルトOKっぽい、安いので決定。

postfix + dovecotメールサーバー構築

メールの設定がどうしてもできない。

仕事で何度も設定しているのに意味不明

エラーも出ていない。

一度諦めた。

しかし、サーバー代払ったので再度トライ

info@xxxx.com

メールアドレス作成していたのだが

システムエイリアスで「info」を使用していたため

メール転送出来ずに受信できなかったもよう。

危ない名前は使わないのは基本だよね。

/etc/aliases は確認しましょう。

データベース

Mysqlを使用、一応クエリキャッシュ設定

MyIsamだとインデックスに容量制限があるのでInnoDB使用

表示

php + Smarty

キャッシュSmarty実装

プログラマーからデザイン出来ないんじゃなくて

自分センスがないのが原因な事が判明。

出来あがったサイト

川崎ソープ嬢を検索 - サーチ嬢

http://searchjou.com

数1000件のデータなのでキャッシュインデックスいらなかったかも。

プログラマデザインやるのと

デザイナープログラムやるのって後者の方が敷居は高いとは思う。

でもプログラム勉強できるけどデザインってセンスがなきゃどうしようもない。

おわり

もう少しデザイン頑張ってみる。

デザインの教本読んでみると

最初に「Adobe」ありき。で話が始まるけど敷居高くない?

Adobeクラウドの月5000円でも高いよー。

2014-09-02

最近Web開発に感じる大きな谷(主にRails

10年くらいWeb開発業界にいて、ここ最近Railsアジャイルな高速開発的なものの周辺にいる。今は開発者マネージャの間を行き来しつつ顧客窓口〜実装まで一通りこなしている。

あちこち渡り歩いて色々なエンジニアと一緒に仕事をしたり、お客さんに頼まれてエンジニア面接やらに顔を出したりすることがあるのだが、ここ最近Web開発はますます主力級のゴリゴリ書けるエンジニア(いわゆるフルスタックエンジニアと呼ばれるものも多分ここに入る)と大したことのないエンジニアの差が開いてきたように思う。

主力級エンジニア

主力級のエンジニアは1〜2回がっつり打ち合わせしてプロジェクト重要点とざっくりラフイメージを共有すれば、どんなに遅くても1週間もすればプロトタイプが上がってきてお客さんに見せつつ微調整し、いわゆるアジャイルとかスパイラル開発的なことができる。デザイナがいなくてもBootstrapでとりあえず最低限の見た目を作ってくれるので、とりあえずデザイナ無しで開発して最終的にお客さんが気に入らなければWebデザイナに見た目整えさせてテンプレ取り込み、という開発がここ最近のメイン。

ソースコードフレームワークRESTfulの基本概念理解されているコードなので、後日の機能修正の時にそのエンジニアが動けなくても自分フォローして修正することもできる。

仕事もしやすいし、実質1〜2人の稼働でサクサク進められるのでコミュニケーションロスもなく楽しい

大したことなエンジニア

一方、大したことなエンジニアは前述した流れが全くできない。

まず決定的なのは、開発が遅い。ちょっとしたデザイン無しのCMSリッチUIなし)をRailsで書くのに1週間かかっても終わらなかったりする。これじゃ生PHPで書くのと変わらないかそれより遅いので、Rails使う意味がない。

次に、品質が低い。できあがったと言われて念のためチェックすると、基本的CRUDレベルエラーが出たり、お客さんに見せるプロトタイプだと言っているのに初期データseeds)の整備すらされていなかったりする。本人のローカル環境で動いてるけどstaging環境にdeployすると動かないとかはよくある。

パッと見に分からない部分もひどくて、ソース確認すればあちこちどこかからコピペしてきたコードのつぎはぎで、HTML規約違反JavaScriptエラーまで放置されていたり。あと実装しましたと口頭で言っていた機能ソースコードコメントではTODOになっていたこともあった。

最後に、成長しない。開発上詰まった所なんかを主力級エンジニアに聞くのは構わないのだが、表層的な理解に留まり応用が利かない。30分〜1時間も主力級エンジニア時間を浪費しながらもまた同じ様なところで同じ様なミスをする。自分もよくプチ勉強会みたいな状態になったときには参考図書や技術資料ポインタを投げたりしているのだが、参照先を見て深掘りすることはほぼない。

なぜ「大したことなエンジニア」がはびこるのか?

厄介なのは、こうした大したことなエンジニアも、Railsであればあちこちのチュートリアル記事書籍を参考に、そこそこそれっぽく見える自作サービスくらいなら作れてしまうという点にもある。

彼らの作るサービスはまさに書籍チュートリアルサイトコピペ集大成だが、個人が趣味でやっているサービスとしては十分に動く。そして周りには「エンジニアです。個人でWebサービスも公開してます」となる。サービスの外からは内部のコード品質などはわからない。

プライベートで開発するのはむしろ奨励しているのだが、彼らはその拙い(あえて「拙い」と書く)サービスでもって「俺はもういっぱしのエンジニアだ」と勘違いしてしまっている様に思える。

だが違うのだ、お前が書いているシステムは「とりあえず動く」レベルのものであって、受託開発としてお金をもらってお客さんに納品するシステムや、数千万〜数億の売上を左右するような業務システムではその素人クオリティでは話にならないのだ。

適切な例外処理担当者ミスしにくい管理画面の設計、お客さんの想定ユーザ数に耐えられるレベルでのスケールする設計開発者が入れ替わっても保守が続けられるようにするための最低限のドキュメントなど、production level qualityに足りていない部分がいくらでもあって、そこまで考えられて「主力級エンジニアなのだ

感じる「谷」

こうした主力級エンジニアと大したことなエンジニアの谷は以前から感じていたが、ここ最近ではさらに顕著に感じるようになってきたように思う。

例えば、主力級エンジニアRailsだけでなくミドルウェアやprovisioning(chefとかansible)、最近ではdockerCIAWS新サービスなどについても各自追いかけていて、自分も含めてちょいちょい議論をすることがある。「最近のアレってどうなん?」とか「はてブでやたらXXX流行ってるけど、これって結局数年前のYYYの焼き直しじゃん」みたいな。

そんなところに大したことなエンジニアはてブRSSなどで用語は聞いたことがあるので混じってくるのだが、まず前提知識がなさすぎて議論にならない。大体「XXXマジすごいっすね〜(意訳)」で終わっていて、その技術の背景や今後どうなりそうか、自分達が取り入れることで業務効率や開発の楽しさが改善するのかといった視点がない。

他にも、ちょっとしたトラブルシューティングの際も、基礎がなさ過ぎて問題の切りわけができない。問題の原因がネットワークレイヤなのか、ミドルウェアなのか、アプリなのかすら判断できなかったり、そもそもアタリを付けるのが絶望的に遅かったり勘が悪い。

単に作業が遅いというのではなく、問題の切りわけというエンジニアとして最低限できないといけない事すらおぼつかないケースも見かける。

「大したことなエンジニア」の今後

こうした大したことなエンジニアは速度・品質難易度面で新規開発プロジェクトアサインするリスクが高いので、必然既存サイト運用メンテちょっとしたページデザイン文言修正)といったタスクが回されるのだが、最近この辺りも仕事がなくなってきているように思う。

というのは、お客さん側にRails Tutorial程度の開発知識を持っている元エンジニア趣味ちょっと触ってみましたレベルの人が増えてきたから。これは恐らくRails特有な所(自作Webアプリ簡単に作れる啓蒙がなされている)がありそう。

ちょっと考えてみれば、文言修正デザイン修正する程度の作業、外注に頼むと数万かかる上に見積やら稼働確保やらで数日〜数週間待たされるのに対し、担当者自分でやってしまえばすぐに済む話というのはちょっと考えれば分かるわけで。

# もちろんそれでも保守契約責任分解点の関係外注するケースはあるだろうが、Rails採用するようなWebサービスは速度重視のことが多い

そんな中、この「大したことなエンジニア」の人達はどうなるんだろうなあ、と思う。開発会社ではなくRailsシステム運用しているユーザ企業に行けば多少は需要あるのかなーとも思うけど、ユーザ企業はできないエンジニア雇うほど余裕もないだろうし。

せめてコミュニケーションスキルが高いとかそういう利点があればいいんだけど、変に自分が「エンジニア」というプライドがあるのか、窓口とか管理方面は率先してやろうとしなかったりもするし。

早めに「エンジニア向いてないよ」と言ってあげるのが良いのだろうか?

2014-08-01

一発当てた個人開発者をまとめるWebサービス作った

http://individualist.link/ (←ドメインかっこいいでしょ)

居酒屋にて 〜

A「やっぱり若者が稼ぐにはアプリ作るしかないと思うんですよ」

B「あー分かる」

B「スマートフォンアプリWebアプリでもいいの?」

C「ゲームは当たると大きくていいよね」

A「Webアプリでもいいです」

B「当ててそれで暮らしてる人見ますね。羨ましい。」

A「いいですよね」

A「そういう人の話聞いてみたいんですけどなかなか出てこないですね」

B「当てた人が人前で自慢するメリットないからねえ…」

B「どういう人がどういうサービスで当てたのかまとめたい」

A「いいですねえ。Wiki 的な」

B「Google Docs とかでやってみる?」

A「おお、やりましょう」

B「Webサービスにしてもいいかも」

帰宅 & 1時間後 〜

B「できた」

B「ドメイン取ろう」

B「http://individualist.link/

アルコール入ってるから話のディティールうろ覚えだけどこんな流れで作りました

やっぱり若者が稼ぐにはアプリ作るしかないと思う。

当てたいなら先例を見るのが一番参考になるはずだし、僕は個人で作ったもの流行っているのを見るのが好きだし、そういうのとても興味ある。

このサイトを見ていると、どういう人がこのサービス作ったんだとか、これ個人で作ってたんだという発見があっておもしろいと思います

時間で出来た

時間で出来たというのはほとんど誇張ではなくて、デザインに拘る時間サーバーに設置する時間を抜かせば本当に1時間でできます

せっかくなのでちょっと開発について書きます

このサイトコーディングに使う大まかな作業をまとめると

データベース接続

Twitterアカウントユーザー登録

画像保存

タグ付け

JavaScriptで動き付ける

CSS整える

HTMLマークアップ

デザイン

というような感じになる。これらを実直にいちいち実装してたら1日で終わるか分かりません。

本を読む一番はやい方法は、文字を読まないことです。

コーディングせずにライブラリを使いましょう。

ちょっとコードが書けると実装する道筋が思いついちゃうからライブラリを探す考えに及ばず実装しちゃう事があると思います

そういう事は避けて、アプリを書くならアプリ本体を最小に済ませるか、ライブラリ自体を作ることに力を入れましょう。

こちらのサイトではRailsのレールに乗っかって開発しました。

以下の例はRailsを使った方法ですが、モダンフレームワークを使っているのであればだいたい似たような話になると思う。

ライブラリで組み立てよう

Rails

手に馴染んだフレームワークがあるならなんでもいい。

クソ小さなロジックと数ページしかないならPHPでもいいけど、

とにかくはやく作ることがしたいなら何かしらフレームワーク使ったほうがいい。

秘伝の Rails Application Template を用意しておくのも良い。

データベース接続

モダンフレームワークなら何も考えずにデータベース接続できるはず。

Rails なら config/database.yml に接続情報書いて rake db:create && rails g model User name:string です。

scaffold 使うと更に早くできます

Twitterアカウントユーザー登録

OmniAuth gem を使います

ソーシャルアカウントログインする要件が出たら、何も考えずに「あ、OmniAuth」となりましょう。

Device gem を使うと更に早くできます

画像保存

Paperclip gem を使います

画像保存が必要になったら反射的に「Paperclip か CarrierWave どっにしよう」となりましょう。

ファイル保存とか変換をいちいち実装してたら朝が来ます

タグ付け

ActsAsTaggableOn を使います

has_many :through のめんどくさいタグの実装ですが

これ入れて rake acts_as_taggable_on_engine:install:migrations && rake db:migrate を打てば一発で完成します。

JavaScript で動き付ける

早くつくりたいんなら JavaScript は捨てましょう。

少なくとも生の JavaScript 書く時代ではないので CoffeeScript 使うと良いです。

CSS 整える

とりあえず Bootstrap 入れましょう。

クラスの付け方を覚えちゃうCSS 弄って HTML リロードして確認なんてことしなくても形は整います

Bourbon gem 使って mixin ライブラリ組み込んじゃうのもいいですね。

HTML マークアップ

HTML 書くのやめましょう。

Haml や Slim のようなテンプレートエンジンを使います

Slim が一番タイプ量少なくておすすめ

Zen Coding でもいいけど、結局出力されるのが HTML じゃ見通し悪くて辛いと思う。

Web Components の時代になったらもっと簡単になるんだろうな。

デザイン

こればかりプロっぽいものつくる自信はない…

ただ、Webページやアプリというのはだいたい決まったパターンがあるので、いろいろな事例を見るとよいでしょう。

正直レイアウト自体は他のサイト真似るのは悪くない判断だと思います

しろその方がユーザーにとって慣れ親しんだ分かりやすサイトでもあります

http://individualist.link/場合http://www.producthunt.com/ を異常なほど参考にしました。

まあここまで書いてなんだけど、前提知識として Rails が使えるようになってないといけないのは敷居高くて悪かったと思う。

僕も最初アプリ作るのに途方も無い時間かかってた。

慣れればはやくなるから、たくさんアプリ作って一発当てよう。

思いついたときにすぐ作れるようになれるといろいろ捗るぞ。

なお、今回つくったこのサイト、ぜひともみなさんにも投稿していただきたいのですが現在投稿者承認制としております

質を保ちたいので、捨て垢に荒らされても困りますからね。

私本当に個人が作って運営しているというアプリサイトというのが好きでして、

こちらのサイトリストアップする行為に儲けやがってといった悪意は一切ありません。

私にとっては好きな人達をまとめるサイトなので質はしっかりしておきたいのです。

2014-07-14

働きながら、エロエロによるエロのためのWebサービスをつくりました

テクノブレイク.jpという、エロ専用RSSサービス公開しました

これは、自分お気に入りエロサイト更新動画を、サイトすべてに訪問して確認しなくてもチェックすることができる、というエロのための時間効率化させるWebサービスです。

http://technobreak.jp

僕は誰か

僕は、大手IT企業で働くゆとり社会人です。

今年文系大学卒業し、まったくの未経験大手IT企業入社し、研修を経て初めてプログラミングを触ることになりました。

それでも少しはできるようになったため、「ゆとり」でも「未経験」でも「文系」でも自分webサービスが作れるんじゃないか?と思い至り、ちょっと力試しということでやってみるか!!!とこのサービス作りました

僕は以下のような人間ですが、「仕事」を通じてプログラミングを学びました。もちろん今も勉強中です。

まだまだ働き始めたばかりなので、僕はプログラミング初心者が数ヶ月勉強したという方と同じような人間です。

なので現在上記にあてはまる人でも作ろうと思えば「自分サービスを作れる」ということがわかっていただけたらと思います

テクノブレイク.jpで解決したいことってなに?

僕はオナニーをする時は、スマホアプリで必ずエロ動画を探すのですが、だいたい以下のようなステップを踏むんですよね。

(1)動画ダウンロードアプリを開く
(2)ブックマークしたエロサイトを開く
(3)エロサイト更新記事を見る
(4)気になった更新記事を新規タブで開く
(5)あとでそのタブを見るため消さずに、元のタブ(更新記事一覧が表示されたタブ)に戻る
(6)また気になった更新記事を新規タブで開く
(7)(4)〜(6)を繰り返す
(8)溜めておいた気になる記事のタブを一つずつ開き、動画ダウンロード
(9)ダウンロードした動画を見る

このように1つの動画を見るために、9つのステップを踏むんです。

もう何がいやだって、(7)ですよ。これが面倒くさい。

それから(2)のブックマークからエロサイトを開くことも面倒じゃないですか。

だって(1)〜(9)をサイトごとにやらないといけないわけですから

これらを簡単にすることができないもんかなと。

で、テクノブレイク.jpを使うと、、、、

(1)動画ダウンロードアプリを開く
(2)RSSサービスを開く
(3)登録したエロサイト更新記事を見る
(4)気になった更新記事を「あとで見る」に登録する
(5)(3)と(4)を繰り返す
(6)「あとで見る」溜めておいた記事を一つずつ開き、動画ダウンロード
(7)ダウンロードした動画を見る

どうですか。2ステップも楽になる!!!!!!!!!

テクノブレイク.jpの特長

採用技術

これでわかる通り、必要最低限の技術で済みます

採用ツール

制作プロセス

すべてそこそこで、80%でリリースしろ

社会人には、自分時間を取ることが難しい方が多いはずです。

から、毎回だらだら開発を進めると時間がかかり、最終的にモチベーションが下がり、何もしなくなってしまうんです。

でもやることはすごくたくさんあります(笑)

プログラムだけじゃありません。デザインを考えたり、仕組みを考えたりしないといけません。

あとで、このプログラムじゃ、仕組みじゃダメだったな、ってわかり手直しをすることだってあります

から、毎回100%を目指すと時間が足りないんです(笑)

すべてをそこそこ、80%におさめてください。

それでさっさとリリースしましょう。

それからサービス改善していくんです。

テクノブレイク.jpもそうです。

最初はすべて80%です。

ここで言う100%とは、あなたの考える理想を100%叶える、という意味です。

Webサービス完璧はありません。日々、改善必要です。

そういった意味では100%はありませんが、あなたにとっての理想の100%はありますよね。

それを最初から目指すのはやめましょう。

走りながら、目指してください。

そうすると、本当に求められるものが早くわかる

早くリリースすればするほど、ユーザーからの声を早く拾うことができます

ユーザーの声こそ、そのサービスの目指すべき姿のことが多いです。

80%完成してリリースすればいいのに、残りの20%を埋めようとあなたが頑張ったとします。

しかしたらその自分勝手な20%は、ユーザーに取っては不必要な20%かもしれませんよね。

だと、20%のために使った時間と労力が無駄になります

から、80%の法則で頑張りましょう。

ドメインは先、サーバーはあと

ドメインを先に取ると、開発をせざるをえないと考えます

なぜならドメイン代を支払ってるんですから。その金を無駄にしたくないですよね。

で、サーバーは後、というのは開発が無駄に3ヶ月かかったとすると、その3ヶ月分のサーバー代金が無駄ですよね。

サーバーテストは、テスト環境テストを終えてからやればいいかなと思ってます

目標、計画を立てる

まずどんなコンセプトか、どんな機能必要か、どんなUIにすべきかという目標をたてましょう。

それから、その目標を達成するための方法を考えましょう。

そして、その方法を実行するスケジュールをたてましょう。

なぜこうするかというと、常に自分が何をすべきかが明確になるからです。

なにも決めずにやろうとすると、

なんてことになります

今日は何をするのかを明確にしましょう。

そして、今日はそのことだけに集中しましょう。

から、頑張りすぎなくていいんです。

スクレイピングについて

Webスクレイピングとは、サイトコンテンツから欲しいデータを取得する方法です。

僕がどうやってRSSサービスを作ったかというと、このwebスクレイピングのおかげなんです。

まずサイトの主要コンテンツ部分を検知します。

主要コンテンツとは、更新記事一覧部分です。

広告、注目動画アーカイブなどのそのサイトコンテンツははじきます

で、その主要コンテンツから、記事の画像タイトルURLをゲットしてきます

やり方としては、主要コンテンツからそのサイト内部のリンクが貼られたimgタグを探し出します。

そして、そのリンクタイトルまたは記事のタイトルを取得します。

こうすることで、そのサイト更新一覧から更新記事のURLタイトル画像がわかります

bootstrapについて

BootstrapウェブサイトWebアプリケーション作成するフリーソフトウェアツールであるタイポグラフィフォームボタン、ナビゲーション、その他構成要素やJavaScript拡張などがHTML及びCSSベースデザインテンプレートとして用意されている。

Wikipediaによると上記の説明となります

これを利用すると、基本的Webサイトデザインhtmlcss)が手に入れることができ、そのまま利用できたりします。

デザインを作る上で、非常に助かります。なぜなら最初からすべて自分コーディングする必要がないからです。

いつ僕はサービスを開発していたのか

僕は以下の時間に開発をしてました

上記の時間で、「え?」って思う時間は恐らく

だと思います

僕は外出中はノートパソコンを使わないで開発をしています

どうしているかというと、Readdleの「Downloads」というスマホアプリを利用しています

これは写真ファイルクラウド上に保存したり、Dropboxや外部サーバーファイル共有をすることができるアプリです。

filezillaスマホで利用できる、みたいな感じです。

画面は小さくてストレスがかなーーーりありますが、僕は外出中はこれでプログラミングをしています

通勤中にこれでプログラミングをし、降車した後の徒歩で続きのプログラミングをキリが良いところまでする、という感じです。

また、歩きながらでもテストはできると思うので、歩きながらプログラミングは難しいという方はテストだけでもやってみはどうでしょうか。

最後

だまされたと思って、テクノブレイク.jpを使ってみてください(笑)

本当にオナニー時間が快適になりますよ。

Webサービス俺もやってみようかなーと少しでも思ってくださった方へ、

僕は開発をしながら、本当にやりたいことがあったら、時間はいくらでもつくりだせるなって感じました。

歩いてるときだってトイレにいるときだって電車にいるときだって、いつだって今の時代はできるんですよ。

それだけ現代って便利で、生きやすくて、なんでも挑戦しやす環境のある時代なんです。

恐らく、少し前の時代スマホが出る前の時代では歩きながらプログラミングなんて考えられないと思います

そう考えると数年前と今って格段に何かを始めることができやす時代なんですよ。

それでも挑戦しないって、もったいないねーなーって思ったんですよね。

から、なにか本当にやってやりたい!!!ってことがあれば、まず一歩を踏み出してみてください。

意外と手段っていっぱいありますから

ググれば、一発ですよ。

こんなことGoogle日本に来るまでは考えられないことですよ。

だって、昔の検索エンジンって十分に欲しい情報が手に入らなかったですもんね。

僕も高校時代とかCROOZ?とかヤフーカテゴリー?とかで携帯ぽちぽち検索してた記憶があります

まぁとにかく、Googleもあるしスマホもあるし、なんでもできる時代ですから安心してやってみてください。

2014-04-26

Twitter Bootstrap使ってるくせにダサいサイトって何なの?

デフォルトのまま使ってればダサくなるはずないのに、わざわざ変なカスタマイズするから...

2014-04-20

SIerを辞めさせてくれなかったのでエロサイト作りました

結論から申し上げますエロサイト作成いたしました。

ゆーすけべーさんが以前に作ってたimeeroみたいな感じです。画像Blogスクレイピングしてエロ画像効率的に見るサイトです。

だらだらエロ画

なお、先程解約手続きを済ませたので4月末くらいに見れなくなりますエロサイト自体にあまり興味がなく、ローンチしたらやる気が無くなったのです。

主要な技術

生産性よりも憧れの昇華を重視しました。

テスト駆動開発がやりたく、DSLに強いロック魂を感じたRSpec

はやりに乗ってBootstrap

特にCapistrano名前キュートでやっていることがカッコイイのでどうしてもやりたい技術でした。

あと、メインとなるRailsこの記事に書いているスキルの中で唯一経験が無かったというのが一番の理由です。Rubyが好きなのもありますけどね。

辞めたい理由
会社を辞められない理由

いやぁ、退職しようとすると会議室で8時間説教されるって都市伝説じゃないんですね〜。

ところで転職活動をした感覚だと、今より給与が2倍出るところでも簡単に内定が出ることが分かりました。

転職活動やエロサイト作成を通して精神的な余裕も出ましたので、もう少しSIerのものの問題、仕事の進め方などを熟考した上で、本当に正しいSIerのあり方を考えたいと思います。無理そうなら逃げます

以上、よろしくお願いいたします。

2014-03-18

アダルトサイトを流れにのって作ってみた

[アダルトサイト][rails]でアダルトサイトつくってみた

彼女に振られたのことと、就職がうまくいかなかったのに打ちひしがれて昨年、railsアダルトサイトつくってみました。。

(ふられたらオナニーがとまらなかった。)

公に誰にもいうことができないので、こちらのほうでエントリーさせてもらいます

すでに動画はたくさん!!!

スペック

大学4年

• [プログラミング]未経験

高校生の時にHTMLCSS触ってた。

はてブみるのが趣味

作ったサイト

Xvideos大奥

http://www.xvideos-av-adult.com/

動機

• ふられたら[オナニー]がとまらない

2ちゃんねるだったりはてブが好きなのに物を作れないのが悔しかった。

• [webサービス]とか詳しい方なのにものがつくれなかった。

開発環境

Mac OS X 10.8

Rails 3.2.8

ruby 1.9.3p194

エディタ

sublime text 2 

を使ったみました。

使いごこちはちょっとよくわからないですけど、vimとかもろもろうまくなりたいなーって思ったりしました。

gem

twitter-bootstrap-rails (https://github.com/seyhunak/twitter-bootstrap-rails)

• nokogiri (http://nokogiri.org/)

スクレイピング。いろいろ効率よくデータがとってこれます

• kaminari (https://github.com/amatsuda/kaminari)

◦ ページング。

• sunspot_solr

• sunspot_rails (https://github.com/outoftime/sunspot_rails)

全文検索タグを調べたり。

• bullet

mysql的に遅延が起きそうなコードがあるとポップアップだしてくれる

流れ

RubyRails勉強

http://railstutorial.jp/

http://openbook4.me/projects/92

↑こんなサイトをみながらrails勉強しつつ、ネットrubyの文法を調べたりしました。

おそらく初心者はここで一番時間かかるんじゃないんでしょうか。。

多対多のDB設計とか最初なにいってのかマジでからないし、それをrailsで再現する方法もわかりませんでした。

デザイン

bootstapをあてつつ、自分で良さそうなデザインコードを読みながら合わせていきました。。

サイトにすごい似てると思います

サーバを借りてデプロイする。

herokuを使いました。初心者でも使いやすい。しか無料

sunspotが有料オプションでしたが使ってみました。(泣ける)

完成品

それ自体は高スペックでもなんでもないですが、基本的xvideosしかとってないので、個人的に快適に見れてます

これからタグ付けと動画の量を増やしていくつもりです。(動画すでに8000とかあるかな?)

http://www.xvideos-av-adult.com/

やること

タグ付け強化

レコメンド強化

キュレーション強化

時間

毎日4時間ぐらいさわって、rubyとはなんぞや、railsとはなんぞやと調べつつ、やっていきましたら3ヶ月ぐらいでできました。

完成したらしたでオナニーがただはかどって、[彼女]振られた悲しみは増幅していきました。

彼氏いなくても人生ノシからいらない!って言われたらかなしいですよね。

俺が楽しませてあげられなかったのかな、、と半年たった今もずるずるひきずってますね。

アクセス

ちょこちょこ増加してきてリピーターがいる感じです。

海外からアクセスも多く、滞在時間も長いです。

動画を6本ぐらいみて離脱されていきます

最後

プログラミング教育に!と言ってる流れでこういうことを自力でもできたのはよかったです。

かなりロジカルものを考えることができるようになった気がします。(むしろ就職活動前にやっておけばよかった)

必要であれば追記で詳しくかけたらな、と思います

2013-06-08

アマゾン商品をいい感じに検索できる「あまけん」をリリースしました

ますだでリリース報告すると、いいことあるかもよと聞いて、やってきました。

サイトは以下から

あまけんβ- アマゾン商品の検索をいい感じに使えるサービスを開発中。


「あまけん」はアマゾン商品検索をいい感じにできるサービス目標に開発しました。

「あまけん」ではアマゾン商品検索後、レビュー数などによる並び替えや、星の数でのフィルタリング画像や簡易表示など表示モードの切り替えが可能です。

また検索後の並び替えなどでは、非常に高速に動作するため、商品比較などに向いていると思います

特徴

  • 情報を絞り込んだ簡易表示や画像のみの表示が可能。一覧するのに便利です。

開発の流れ

ますだ報告デフォルト(?)の、開発の流れや開発環境を簡単に。

  • 期間
    • 1カ月程度

「あまけん」おすすめの使い方

検索後、お好みの星の数でフィルタリングした上で、レビュー数や売上ランキング順で並び替えて商品比較するのがお勧めです。特にレビュー数は本家サイトにない指標なので、おすすめです。

表示モード情報量と一覧性のバランスのいい”簡易”モードお勧めです。お好みに合わせて、情報量の多い”詳細”モードや一覧性が高い”画像モードの使い分けも可能です。

アマゾン内で検索する前や後に併用して、あまけんの高速性を活かして、商品比較用にといった活用おすすめです。

今後の予定

お気に入り登録機能など、様子を見ながら機能追加や改修などのアップデートを行っていきたいと思います

機能追加予定やリリース情報は、開発ブログツイッターにて報告予定です。

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