「レスポンシブデザイン」を含む日記 RSS

はてなキーワード: レスポンシブデザインとは

2017-10-10

anond:20171010221709

WordPress国産レスポンシブデザイン対応テーマ思考停止で使ってるサイトのことだろ

PCなんだったらStylishとかでid指定して要素自体display none でもしとけばええんじゃね

2017-09-11

https://anond.hatelabo.jp/20170910205249

まじな話をすると、N予備校プログラミング入門コースやるのがオススメ

https://www.nnn.ed.nico

一日8時間勉強時間があるなら、だいたい一ヶ月で終わる内容。

月額1000円だけどしっかり勉強すれば一ヶ月の無料間中に終わると思う。

もともとN高等学校のノンプログラマーの生徒をWebエンジニアとして就職させるために作られたカリキュラム講師曰く去年はこれで二人エンジニア就職を決めたらしい。

内容も相当親切に説明していて、プログラミングで何か作るだけじゃなくて、就職必要な環境構築やセキュリティまでみっちりやる。

http://qiita.com/sifue/items/7e7c7867b64ce9742aee#%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%97%E3%83%88%E3%82%92%E3%82%82%E3%81%A8%E3%81%AB%E6%A7%8B%E6%88%90%E3%81%95%E3%82%8C%E3%81%9F%E3%82%B3%E3%83%BC%E3%82%B9%E3%81%A8%E5%86%85%E5%AE%B9

講師が書いてる入門コースで習うことがまとめ。テキスト教材もあるけど授業も1項目を2時間で説明している。授業は週2の生放送とそのアーカイブがある。

↓みたいなことが学べる

----

Webプログラミング入門コース

Web ブラウザとは (Chrome, デベロッパーコンソール, alert)

はじめてのHTML (VSCode, HTML, Emmet)

さまざまなHTMLタグ (h, p, a, img, ul, tableタグ)

HTMLで作る自己紹介ページ (HTMLタグ組み合わせ, コンテンツ埋め込み)

はじめてのJavaScript (JS, ES6, エラー)

JavaScriptでの計算 (値, 算術演算子, 変数, 代入)

JavaScript論理を扱う (論理値, 論理積, 論理和, 否定, 比較演算子, if)

JavaScriptループ (ループ, for)

JavaScriptコレクション (コレクション, 配列, 添字, undefined)

JavaScript関数 (関数, 関数宣言, 引数, 戻り値, 関数呼び出し, 再帰)

JavaScriptオブジェクト (オブジェクト, モデリング, プロパティ, 要件定義)

はじめてのCSS (CSS, セレクタ, background-color, border)

CSSを使ったプログラミング (transform, id, class)

Webページの企画とデザイン (企画, 要件定義, モックアップ, 16進数カラーコード)

診断機能の開発 (const, let, JSDoc, インタフェース, 正規表現, テストコード)

診断機能組込み (div, 無名関数, アロー関数, ガード句, truthy, falsy)

ツイート機能の開発 (リバースエンジニアリング, URI, URL, URIエンコード)

Linux開発環境構築コース

LinuxというOS (VirtualBox, Vagrant, Ubuntuインストール, OS, CUIの大切さ)

コンピューター構成要素 (ノイマンコンピューター, プロセス, lshw, man, ps, dfの使い方)

ファイル操作 (pwd, ls, cd, mkdir, rm, cp, mv, find, ホストマシンとの共有ディレクトリ)

標準出力 (標準入力標準出力標準エラー出力パイプgrep)

vi (vimtutor)

シェルプログラミング (シバン, echo, read, 変数, if)

通信ネットワーク (パケット, tcpdump, IPアドレス, TCP, ルーター, ping)

サーバークライアント (tmux, nc, telnet)

HTTP通信 (http, https, DNS, hostsファイル, ポートフォワーディング)

通信をするボットの開発 (cron, ログ収集)

GitHubウェブサイトの公開 (GitHub, リポジトリ, fork, commit, 情報モラル)

イシュー管理とWikiによるドキュメント作成 (Issues, Wiki)

GitとGitHub連携 (git, ssh, clone, pull)

GitHubへのpush (init, add, status, インデックス, commit, push, tag)

Gitのブランチ (branch, checkout, merge, gh-pages)

ソーシャルコーディング (コンフリクト、プルリクエスト)

Webアプリ基礎コース

Node.js (Node.js, nodebrew, Linux, REPL, コマンドライン引数, プルリク課題)

集計処理を行うプログラム (集計, 人口動態CSV, Stream, for-of, 連想配列Map, map関数)

アルゴリズムの改善 (アルゴリズム, フィボナッチ数列, 再帰, time, プロファイル, nodegrind, O記法, メモ化)

ライブラリ (ライブラリ, パッケージマネージャー, npm)

Slackボット開発 (slack, mention, bot)

HubotとSlackアダプタ (hubot, yo)

モジュール化された処理 CRUD, オブジェクトライフサイクル, filter)

ボットインタフェースとの連携 (モジュールのつなぎ込み, trim, join)

同期I/Oと非同期I/O (同期I/O, 非同期I/O, ブロッキング)

例外処理 (try, catch, finally, throw)

HTTPサーバー (Web, TCPとUDP, Webサーバーの仕組み, Node.jsイベントループ, リスナー)

ログ (ログ, ログレベル)

HTTPのメソッド (メソッド, GET, POST, PUT, DELETE, CRUDとの対応)

HTMLフォーム (フォームの仕組み, form, input)

テンプレートエンジン (テンプレートエンジン, jade)

HerokuWebサービスを公開 (Webサービスの公開, heroku, dyno, toolbelt, login, create, logs)

認証利用者を制限する (認証, Basic認証, Authorizationヘッダ, ステータスコード)

Cookie を使った秘密匿名掲示板 (Cookie, Set-Cookie, expire)

UI、URI、モジュール設計 (モジュール設計, フォームメソッド制限, リダイレクト, 302)

フォームによる投稿機能の実装 (モジュール性, textarea, 303)

認証された投稿の一覧表示機能 (パスワードの平文管理の問題, 404, テンプレートのeach-in)

データベースへの保存機能の実装 (データベース, PostgreSQL, 主キー)

トラッキングCookieの実装 (トラッキング Cookie, IDの偽装, Cookie の削除)

削除機能の実装 (データベースを利用した削除処理, 認可, サーバーサイドでの認可)

管理者機能の実装 (Web サービス管理責任, 管理者機能の重要性)

デザインの改善 (Bootstrap, レスポンシブデザイン, セキュリティの問題があるサイトを公開しない)

脆弱性 (脆弱性, 脆弱性で生まれる損失, 個人情報保護法, OS コマンド・インジェクション)

XSS脆弱性対策 (XSS, 適切なエスケープ処理, リグレッション)

パスワード脆弱性対策(ハッシュ関数, メッセージダイジェスト, 不正アクセス禁止法, パスワードジェネレーター, 辞書攻撃)

セッション固定化攻撃脆弱性対策 (セッション, セッション固定化攻撃, ハッシュ値による正当性チェック)

より強固なセッション管理 (推測しづらいセッション識別子, 秘密鍵)

CSRF脆弱性対策 (CSRF, ワンタイムトークン)

安全なHerokuへの公開 (脆弱性に対する考え方, HTTPの廃止)

Webアプリ応用コース

Webフレームワーク (Express.js, フレームワーク導入, 簡単なAPI, セキュリティアップデート, Cookie パーサー, ミドルウェア, 外部認証, ロガー)

ExpressのAPI (app, Properties, Request, Response, Router)

GitHubを使った外部認証 (Passport, OAuth)

スティングフレームワーク (Mocha, レッド, グリーン, リファクタリング)

継続的インテグレーション (CircleCI)

クライアントフレームワーク (Webpack, Chrome 以外のブラウザでもES6)

DOM操作フレームワーク (jQuery, jQueryアニメーション, this)

AJAX (jQuery.ajax, クロスドメイン, 同一生成元ポリシー, x-requested-by, CORS)

WebSocket (WebSocket, WebSocketの状態遷移, Socket.io)

RDBとSQL (DDL, DCL, CREATE, DROP, INSERT, DELETE, UPDATE, WHERE)

データモデリング (リレーショナルモデル, 正規化)

テーブルの結合 (外部結合, 内部結合, 片側外部結合, JOIN ON)

インデックス (インデックス, 複合インデックス, Bツリー)

集計とソート (SUM, COUNT, ORDER BY, GROUP BY)

「予定調整くん」の設計 (要件定義、用語集、データモデル、URL設計モジュール設計、MVC)

認証とRouterモジュールの実装 (Mocha, supertest, passport-stub, モックテスト)

予定とユーザーの保存 (セキュリティ要件, UUID, 複合主キー)

予定とユーザーの一覧の表示 (非同期処理, Promise, then)

出欠とコメントの表示 (入れ子の連想配列, Promise.all, 子どもからデータを消す)

出欠とコメント更新 (Promiseチェイン, リファクタリング)

予定の編集と削除 (要件の衝突, 関数再利用)

デザインの改善 (this, グローバルオブジェクト)

セキュリティ対策と公開 (X-Frame-Options, Heroku環境変数)

2017-05-09

【追記あり】inside 売れないサービスの開発現場から

この二年間、ある一つの売れないサービスを開発し続けてきた。

GW実家に帰ったとき地元友達に話したら面白がってくれたのでちょっと書いてみようと思う。

今作っているアプリは、売れていない。

二年前に開発が始まって、リリースして一年半ほどになるが、一円も稼いでいない。

エンタメsnsのはずなんだが、アクティブユーザーが増えるはずの大型連休で、起動したユーザーがたったの三人だった日があるほど、売れていない。

売れてないが故に常駐しているエンジニアは僕一人だ。外部のエンジニアスポットでたまにタスクベースでお願いする程度。

ディレクターっぽい人が二人(マーケティング兼任)と、デザイナーが一人いて、

この3人と僕とのやりとりを地元の友人は面白がってくれた。

いわゆる「エンジニアあるある」ではあると思う。

例えば新機能の開発が始まったとき

ーーーーーーーーーーーーーーー

ディ「〇〇な機能が欲しいんだけど」(延々ぐらぐらのビジョン演説する。)

僕「ビジョンはだいたいわかったんですけど、どういう仕様にするつもりですか?」

ディ「ここはこう、Facebookみたいな感じで、Instagramのこういうのも入れたくて、twitterもやってるからこれも組み合わせたい。」(ふわっとした仕様で細かくは決まってない。)

僕「(俺一人でやるってことわかってる???納期はいつですか?」

ディ「一ヶ月後くらいにリリースしたいんだけど」

僕「細かい仕様が決まるのはいつですか?」

ディ「今週には決めるよ。」

僕「わかりました。待ってますね。」

~~~~数日後~~~~

ディ「できた、もう一人のディレクターと話し合ってすごいいいものができたよ、これは本当に売れるよ。大逆転できる。」(毎回言う。最初はなるほど、と思っていたが一年半言い続けられる神経が理解できない。)

僕「だいぶ変わってますね、初めの大まかな仕様と。」

ディ「そうなんだよ、ここはこうでここはこうで」(新しいぐらぐらのビジョン演説

僕「(まあいいか・・・)こことここは難しそうで時間かると思うんですけど、納期は一ヶ月後のままですか?」

ディ「マーケット戦略的にそこがデッドだね。」

僕「わかりました、これだけならなんとかやってみますデザインはもうあるんですよね?」

ディ「まだない、すごく重要機能で本当に今後を左右するからこだわりたい。」

僕「(こだわり・・・)わかりました。じゃあ一旦機能から作りますね。」

~~~~数日後~~~~

ディ「デザインできたよ、本当にこだわって作ったからね。デザイナーから受け取って」

デザ「どうぞ」(PDF渡される)

僕「・・・・・」(PDFだとダメって二億回くらい言うてるけど、耳がついてないんだな・・・sketch存在知ってるはずなんだけどな。)

~~~~数日後~~~~

僕「ここ、スマホだとデバイスによって幅変わるんで、こう直しておきましたよ。割合的にずれてないので、問題ないと思います。他のサービスもだいたいこうやってますんで。」

デザ「え、なんでですか?」

僕「スマホだとデバイスによって幅変わるんで。iphone5iphone6だと幅違うじゃないですか、解像度も違うじゃないですか。」

デザ「え?なんでですか?」

僕「え?なんでですか?」

~~~~数日後~~~~

デザ「レスポンシブデザインにしたいんですけど。」

僕「いいですよ。」

デザ「こんな感じで」

僕「レスポンシブデザインだと、html変えられないので、こういう全く違うのは難しいと思いますよ。」

デザ「え、なんでですか?やってるところありますよ。」

僕「え、だからhtml自体をいじれないので、PCSPもどちらもデザイン段階から考慮して作らないとダメなんですよ。それに言ってるサービスレスポンシブじゃないですよ。」

デザ「え、なんでですか?」

僕「え、なんでですか?」

~~~~数日後~~~~

ディ「どう?」

僕「大体できました。これで大体仕様通りだと思います。」

ディ「どれどれ?」

ディ「え?なんでこここうなってないの?これは?ここは?これ何?これこうなってないのなんで?」(本当にくだらないボタン位置とか、fontの微妙な大きさとか)

僕「え?仕様に書いてます?それに俺それ確認してあなた納得してましたよね?それにPDFだとこれが限界です。」

ディ「うーん、大問題だぞこれは・・・」(一円も売り上げてないサービスで大問題とか起こりえないでしょ?)

~~~~数日後~~~~

ディ「昨日考えたんだけど、やっぱりこの機能、こうなるべきだと思うんだよね。」(根本から覆す意見を振りかざす。)

僕「え、明日リリースですよね?もうそのつもりなんですけど。その修正リリース後じゃダメなんですか?」

ディ「大丈夫だよ、本当に簡単修正で終わるだけだから。二時間だよね?このくらい」(簡単修正なんて、中身知らないお前がどうして言える。)

僕「いや、このレベルだと、作り直しですね。」

ディ「え?なんで?だってここチョロっと直すだけだよ?」

僕「ご存知ないかもしれませんが、あなたが途中で細かく仕様変更されたのに対応した際、説明したはずです。こことここは相関関係があるので、影響的には全部ですよ。」

ディ「なんでそんな実装になってんだよ!!!」(なんでそんな仕様にしたんですか?)

~~~~数日後~~~~

ディ「ここのこの仕様なんだけど、どうなってる?」

僕「そこはこうなってますね、どうしたんですか?」

ディ「そこ、やっぱりユーザーフレンドリーじゃないと思うんだよね、こう変更して」(中身が複雑で聞いた端から忘れるレベルユーザーフレンドリーとは。)

ディ「シンプルイズベスト!だからね。」

僕「もう僕がわからないんですけど、それ大丈夫ですか?」

~~~~数日後~~~~

ディ「あの、前にユーザーフレンドリーにしようって変更したところだけど。」

僕「はい問題ありました?」

ディ「ここの仕様ってこうだったっけ?」

僕「いや、そこはこうで、こことこことここと関係しているのでこうなっていて、コードレベルだとこんな感じですね。別のところにも影響あるのでそこもこう直してあります。」

ディ「え?そんな仕様だったっけ?」(ユーザーフレンドリーとは。シンプルイズベストとは。)

~~~~リリース後~~~~

ディ「お疲れ様ー。」

僕「お疲れ様でした。」

ディ「だいぶ遅れちゃったけど、なんとかリリースできたね。やりたいことの10%くらいしか実現できなかったけど。」(何作ろうと思ってるんだ。国か。)

僕「そうですね^^」

ーーーーーーーーーーーーーーー

もちろん売れているサービスも売れてないサービスも、同じような現場なのだとは思う。

ただレベルが違うだけで。

僕も全く優秀なエンジニアではないから、スキル不足の面も大きいのだと思う。

しかし本当に他の三人がwebというものを知らなすぎる。

これで全く売れないのだから、報われるところがほとんどない。

これがいつまで続くのか、という不安となんでも経験だろ、と突っ込んでしまった後悔しか残っていない。

~~~~~~追記~~~~~~

仕事の合間にみたら思ったより拡散されているので、ちょっと困惑しています

なのでちょっと言い訳というか、補足というか。

多少の誇張とごまかしはもちろんあります特定を避けるためです。

そして何より、これは半人前エンジニアの僕から見たものです。

ディレクター側の人の意見無視しています

そして、現状に対してキレているわけでもどうにかしたいと思っているわけではないです。

あ、これを書いた昨日は相当キレていましたが。

これらのことはだいたい普通だと捉えています人間のすることですし。プロジェクトは期間が長いですから、変化が当たり前です。変化の仕方が変なだけで。

エンジニアは発信する文化があるので、結構他のエントリでも読めますが、もっといろんな業界の人の専門職バージョンを読みたいので、見ている人がいれば、ぜひ投稿してください。

まだ溜まってることあるので、近いうちに続編書きます

最後に、胃が痛くなった人、古傷が痛んでしまった人、思い出したくないこと思い出させてしまった人、申し訳ありません。

同じような境遇で戦っている同士に捧げます

~~~~~~追記2~~~~~~

続編書きました。いくつか反応に返信させていただきました。

http://anond.hatelabo.jp/20170510224801

2017-01-31

レスポンシブデザインが嫌い

PCで小ウィンドウで開こうとしたときスマホ用の表示になる

スマホ用の表示になるけど、それがPCでは使いづらい

てか、PCスマホボタンの配置が違いすぎて、PCときは上、スマホときは下みたいなのがある

わざわざ解像度で分ける意味ある? しっくりくるサイトとか見たこと無い

解像度以外の条件(マウスを使っているかディスプレイの大きさなど)を全部無視して解像度で切り分ける意味は何よ

 

使いにくいサイトの例:はてな匿名ダイアリー

2017-01-21

頼むから、もうちょっとしっかりしてくれ

ウェブデザイナーとして働いている。他人製作物のチェックすることも多いんだが、もうね、ちゃんと自分でチェックしてる?と聞きたくなることが多い。

前に使った画像が残っていたり、そんなに作業ボリュームないのにテキスト間違ってる、リンク変更されてない、altが大量に間違ってる、レスポンシブデザインなのに、スマホになると見出しが不自然に改行されているデザインを作る・・・

最近では、ちゃんと目を見開いて確認しろよ!とキレそうになる。

wチェックっていうのは、セルフチェックをしっかりやった上での補足的なものだと思うんだけど、セルフチェックがザルすぎるんだよね。

ちなみに、毎回、ちゃんと指摘してますよ。

なのに、毎回同じようなことをやるんだよね。

どうしたらいいんだろ?関わらないのが一番なのかもしれないけど、仕事からそういうわけにもいかないし。あの状態で納品するのってめちゃくちゃ怖いし。

一回、失敗しないとわからないのかな?でも、失敗してわかってもらうのって、怖いんだよ。

2016-03-22

NHKニュースサイトレスポンシブデザインになった

これすごいよ。

異常なまでにアクセシビリティに気を使うNHKらしさを残しつつも新しいことに挑戦してる。

でも、連続再生ボタンが消えてPickUpNewsとかいう超短いニュースまとめ動画になったのはクソ仕様変更

2014-06-17

見ててツライ

レスポンシブデザインコーディング1つまともに出来ないのにプロ名乗んなっていう

2013-12-28

Webプログラミング素人のおじさんが、Flat UIぷりんデーターベース

webサービスを作ったので、ここで発表させてもらいます

作ったサイトはこちら、

ぷりんデーターベース

http://prindb.net

レスポンシブデザインなので、ブラウザを縮めたり、スマートフォンから見てもそれなりのデザイン

見れると思います。(まだ、ところどころ表示が崩れるかも)

僕について

おじさんというタイトルですが、まだ30代前半の男です。RubyとかPythonとかをがっつりやっている世代よりたぶん上なので、

おじさんとしました。

普段は組み込みOSを販売している会社サポートエンジニアとして働いています

なので、C言語についてはある程度理解でき、ハードウェアCPU(ARM,Intel,PPC,SH4 etc)の仕組みについては

普通の人より詳しかったりします。また、昔勤めていた会社家電製品の中のプログラムC言語で3年間程書いた経験があるので、

プログラミングについては全くの素人ではありません。あくまでwebプログラミング(php,ruby,python)が、という話になります

作ろうと思ったきっか

他の「素人作りました」を匿名ダイアリーで見ていて、自分も何か作りたいな~って思っていました。

で、どうしようどうしようって考えってた時に、”あれ、オレは毎日コンビニぷりん買ってないか?”って事に気づき

おいしいプリン情報がどっかにまとめったらいいなって思い、ぷりんデーターベースを作ろうと思いました。

デザイン

一連の「素人作りました」でTwitterbootstrapを使っている方が多くみられたのですが、そのまま使うのはなんだかな~だったので、

Flat UI というTwitterbootstrapベースのモノを利用しました。

これはWindows phoneデザイン採用されているようなFlatデザインをBootstrap形式で作成できてしまものです。

プログラミング言語

PHP

はじめはRubyでやろうとしたけれども、windows上でテスト環境を作るのが難しく途中で断念し、次に候補にしていたpython

なんか情報が少なそうだなって思ってやっぱり途中で断念し。最終的にphpになりました。

それで、wordpress使って簡単に会員制のサイト作っちゃえって思ってたら、wordpress動かしたらよく分からないエラーが出て、

時間程格闘して解決したんだけど、この事に疲れて、やっぱり1から自分でつくらないとダメだなと思い、

wordpressは諦めて、ログイン機能ユーザ管理などもphp自作することにした。

サーバー

さくらvps 2GBプラン

なんか2chひろゆきさんが薦めてたから、ここにしました。

いいのか、悪いのか、安いのか、高いのか、よくわからない。

データベース

MySQL

ぷりんデーターベースを作る際に参考にした”ドットインストール”というサイトのレッスンが、

phpMySQLが必ずセットだったので、これにするしかなかった。ほかのDBはよくわからない。

参考にしたサイト

ドットインストール

ツイッターログインするWebサービスを作ろう

http://dotinstall.com/lessons/tw_connect_php_v2

PHPで作る投票システム

http://dotinstall.com/lessons/poll_php_v2

さくらVPS入門

http://dotinstall.com/lessons/basic_sakura_vps

JavaScriptで作る残り文字数チェッカー

http://dotinstall.com/lessons/char_checker_js_v2

PHPで作る「画像掲示板

http://dotinstall.com/lessons/upload_image_php

【旧版】Twitter Bootstrap 2.1入門

http://dotinstall.com/lessons/basic_twitter_bootstrap_v3

ユーザー管理をするWebサービスを作ろう

http://dotinstall.com/lessons/sns_php_v2

PHP入門(基本編)

http://dotinstall.com/lessons/basic_php_beginner

PHPで作る「ページン機能

http://dotinstall.com/lessons/paging_php_v2

【旧版】PHPで作る「簡易掲示版」

http://dotinstall.com/lessons/bbs_php

コメント機能をつける時に参考にしたサイト

ブログを作る

http://ponk.jp/php/basic/blog

PHPマニュアル

PHPAPIが調べられるサイト

http://www.php.net/manual/ja/manual.php

twitter bootstrap

twitterbootstrapの記述方法などを確認

http://getbootstrap.com/getting-started/

Flat UI

Flat UIはBootstrapの拡張ですが、マニュアルが容易されていないので、

実際に下記ページをソースコード表示させたり、cssファイルを見てどんな定義をしているのかを確認しました。

http://designmodo.github.io/Flat-UI/

スマホでのデザインの確認

Responsive Checker

http://html5-lab.jp/checker/

作った感想

全部合わせて3ヶ月程で作ったんですが、かなり大変だった。

phpプログラミング部分はよくわからないなりに、なんとかなるなっとは思ったのですが、

デザイン面は本当によく分からなかった。PC上ではちゃんと表示されているけど、ウィンドウサイズを縮めると

グチャグチャになったり、全然レスポンシブにならないじゃないかって事が多々あった。

あと、Flat-UIが個人が作成したものなので、たぶんまだ全然揉まれていないCSSなんだなとも思った。

今まで、デザイン仕事ってプログラマより楽なのかと思ってたけど、全然楽じゃないですね。。

ごめんなさい。

本当は気楽に作ったわけじゃなく、現状の単調な毎日を変えたいと思って作りました

これをきっかけにいろんなものを作ってフリー仕事が取れるといいな。。

このサービスを作っている時に、自分を励ますために聞いていた歌です。

Mr.Children横断歩道を渡る人たち」

http://www.youtube.com/watch?v=6yTYBGM1KEk

ギターケースを抱えて歩くそ少年は仲間と楽しげに話している

好きな音楽の話か それとも好きな女の子の話か?

そのギター未来を変えるつもりかい?それならいつか仲間に入れてくれ

だって何もかもをもの分かりよく 年老いたくはないんだ

では、おいしそうなプリンにいいねでも押していってね。感想も聞かせてもらえるとありがたしです。

http://prindb.net

2013-08-21

コミックの新刊発売日をメールで通知する「ベルアラート」をリリース

開発するにあたりAmazon絡みの検索をしてる時にこの記事にたどり着き、10年近く運営しているサイトと同じくらいのはてブが一日で着くのを見て、やってきました。

サイトは以下から

コミック、小説、作者別に新刊・新作をメールにてお知らせ【ベルアラート】

ベルアラートは商品の発売日をメールで受け取ることを目的に開発しました。

機能的には、コミックだけではなく小説や専門誌を含むあらゆる書籍DVDゲーム家電の発売日もカバーをしていますが、ランディングページを作るのにあたりメーカー名などを調べ尽くすのが大変だと思いコミックに特化したサイトの構成にしています

特徴

コミック小説など書籍の予約開始日と発売日をメールで知らせます

タイトルだけでなく著者をアラートに設定できます

出版社タイトル名、著者を調べ回らなくても良いように雑誌一覧や連載中のタイトル一覧、著者一覧をランディングページとして作成しました。

開発経緯

自身は週刊少年ジャンプなど少数の雑誌を毎週購入して読んでいたので、あまりコミックを購入しないのですが、雑誌を読まずにコミックを購入している友人と本屋に行った時に出版社や連載誌によって発売日がまちまち 休載などがあったりでタイトル数が増えると発売日把握が面倒だと感じたから作ってみようと思いました。

まぁ、その時にしっかり似たようなツールが無いかしっかり探せばよかったのですが、なんとなく漫画に絡んでみたかったのもあって、きちんと探さなかったです。

開発の流れ

 

  • 開発期間:約1ヶ月半(たぶん)

  ・基本の設計AmazonAPIの調査に1週間

  ・当初想定していた最低限の機能の開発に2週間

  ・それをいじくり回して機能追加、修正を行うこと2週間

  ・バグ取りを行いつつ公開準備で1週間

 

 

 

 

  • 利用ツール:

  PhpstormPHP用のIDEとしては評判が良いので、今回の開発から利用開始。今まで秀丸やSublimetextなどのテキストエディタメインで開発してたけど、統合開発環境のありがたみを実感。

PHPに特化してるだけあって、痒いところに手が届く感が素晴らしい。

ちなみに、Phpstorm日本語ローカライズされてないので隅から隅まで英語でびっしり

  

  TwitterBootstrap:今回初めてCSSフレームワークを利用してみた。導入するだけでデザインがそれっぽくなるのは◎。またレスポンシブデザインも簡単に対応できるので、スマホPCの両方で使用することを前提にしたサイトを作るならすごくお手軽。

ただ、JQueryUIや部分的なハックを用いる際の競合には悩まされた...。

  VagrantChef-solo:使ってみた。便利だった。ホストゲストOS間の共有ディレクトリも簡単に設定できて、いやー、これで開発環境の仮想サーババンバン建てられるわー。

今回の案件で便利だったというより、今後の開発全般に対してメリットが大きい。

苦労(工夫?)した点

連載中のタイトルなんて、そんなにたいした数無いだろうし、まずはコミックタイトル一覧を作ろうと思いExcelファイルにまとめていきましたが、執筆時点で雑誌86タイトル数2012に達し連載中の数にびっくり。舐めてましたまだまだ増えそう・・

タイトル数がめちゃくちゃ多い

読み切りだけを掲載している雑誌もある

タイトルの読み方が解らない(菩提樹寮のアリアリンデンホールアリア

・ 正式タイトルコミックにする時の名前が違う(ソードガイ 装刀凱 → ソードガイ)

原作作画プロデューサーシナリオライターとかの名前を全て拾うとAmazonで抜け落ちてる場合がある

・ 新連載と連載終了の情報がつかみにくい。(特に打ち切りはひっそり終わってることが)

Amazon側で姓名の入力が一緒になっている著者と別れている著者がいるので著者によって姓名の間にスペースを入れる入れないでHitしたりしなかったりする

蒐集奇譚イットは座紀光倫を著者に入れるとHitせず座紀 光倫だとHitする)

・ 困ったことに2巻と3巻など巻によって著者の姓名が別れたり別れなかったり

オススメの使い方

検索ページで全てのアラート登録ができますコミックに関しては連載中タイトル一覧雑誌一覧から目的タイトルランディングページに行き緑色ボタン「◯◯」の発売日の通知を受け取るを押してメールアドレス入力すれば目的の商品のアラートが受け取れます

人気のタイトルは関連書籍が多数でるので、検索ページでアラート設定する場合は、タイトル、著者、ジャンルを指定しないと意図しない通知も来ます

専門誌とかであれば単純にキーワードに「wordpress」などと入力して設定してもいいかもしれません。

冒頭に書いた通り書籍以外も設定可能なので例えば「コーエー信長の野望」の新作発売日を知りたいのであれば、検索TVゲーム欄にタイトル信長の野望メーカーコーエーテクモゲームスにすればアラートを受け取れます

今後の展開

登録されたアラートメールドメインを見ると思っていた以上に携帯アドレスの登録が多く、スマホアプリ9月中にリリースしたいと思っています

最後

このベルアラートは貴方が所有しているAmazon アフィリエイトID入力すれば、ベルアラートからの発リンク、発売日や予約開始日のメール通知が全て貴方のアフィリエイトIDリンクになりますので、貴方のサービスとして利用可能です。

リンクする際にはURLの?aid=aaaa-22としてリンクして下さい。(aaaa-22部分は貴方のアソシエイトID

今後、楽天や他のプラットフォーム対応時には追加して頂くパラメーターが増える可能性があるのと貴方のサイトから登録されたアラート数やタイトル(登録メアドは非公開)などの実績把握のためにもユーザー登録して頂いた方がアソシエイトIDなどをまとめて入力できるので紹介リンクを変更せずにすみます。(ログインした状態でこのページにアクセスして下さい。)

ご紹介頂ければ幸いです。

2013-06-19

http://anond.hatelabo.jp/20130619181604

重い画像を使わないので処理が高速

つの時代の話?

レスポンシブデザインもそういうのあるよね。

モバイルファーストコンテンツを絞れ」てのは分かるんだけど、

PCより読み込み速度が遅いから」って理由はしっくりこない。

2~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/

    2013-01-09

    http://anond.hatelabo.jp/20130109125346

    タッチデバイス向けサイト(主にスマホサイト)については、

    デバイス毎にインターフェイスが異なるので操作に戸惑う

    ・内容や機能が大幅に簡略化されてしま

    URLが分散してしまう(レスポンシブデザインでない場合

    サイト制作更新の労力が増える

    といった問題があり、

    多少の見やすさと引換えに、使いやすさを大きく低下させていることが多い。

    今回の新はてブのように、リンクボタンを大きめにして、カラム分けをきっちりするだけで、

    タブレットスマホでも快適にウェブサイトを閲覧できるようになる。

    よって、デバイスデザインを分ける理由はない。

    もちろん、今後、タッチデバイス向けウェブデザインに一大革新が起こる可能性はある。

    何がなんでもダメだというわけじゃない、とは断っておこう。

    今回のはてブデザインに文句言ってるのって

    型落ちの低解像度ディスプレイ後生大事に使い続けていて、

    iPadなんか使ったことないような連中なんじゃないの。

    「usersが大きすぎる」というクレームなんか典型的で、

    リンクを大きくするのがタッチパネル時代ウェブデザインの基本であることが分かっていない。

    「そんなにusers数を強調したいのか」とか言ってる。見当違いも甚だしい。

    タイルデザインについても、

    あれはダブルタップによるフォーカスのためのデザインであって、

    新聞雑誌デザインなんかとは全くの別物だ。

    その次はおそらく「タブレット向けとPC向けのデザインを共通にするな」などと言ってくるんだろうが、

    デバイスによってデザインが異なるほうがバッドノウハウであることは自明だろ。

    しろ b.hatena.ne.jp/touch を速やかに無くしていただきたい。

    あとレスポンシブデザイン()も滅びろ。

    追記。

    情報密度

    デザインというよりコンセプトの問題だよな。

    しかも良し悪しじゃなく好き嫌いの。

    hotentryやentrylistはそこまで情報量減ってないから、

    そっちを(ブラウザの)ブックマークに入れたら。

    視線移動

    言うほど面倒か?

    あ、画像のありなしでラインが揃わないのは問題だと思ってますよ。

    2012-10-18

    http://anond.hatelabo.jp/20121018165328

    うむ、嘘だから信じなくていいよ。

    ググれば分かるけど、デバイスに応じてデザインが変わるのがレスポンシブデザイン

    たとえば、同じURLなのにPCで見た時とiPhoneで見た時とでデザインが違うサイトとかあるだろ?

    あいうのだよ。

    2012-10-16

    NHKスタジオパークレスポンシブデザイン

    レスポンシブwebデザインは、タブレットスマホ等にも対応するためのデザイン

    1個作れば色んなウィンドウサイズ対応できる

    見る側も色んなデバイスで最適なサイズで見ることができるメリットがある

    あと、タブレットスマホ等で見る場合、縦に横にするとウィンドウサイズはころころ変わる

    滑らかに動くと、どのコンテンツがどこに移動したか視覚的に分かりやすくなるので大いに意味がある

    PCブラウザウィンドウサイズグリグリ変える人のための設計ではない

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