 
|
はてなキーワード: CSSとは
Webシステムとは縁遠い事務職のリーマンが、ある日思い立って、ニッチな用途の検索エンジンサービスを作ってみたので、ちょっと書いてみようと思います。
ちなみに、検索エンジンといっても、googleカスタム検索とかのお茶濁し系じゃなくて、apache Solrというオープンソース検索エンジンを、VPS上で動かしているという、それなりに本
気度の高いものです。
なんで素人がそんな物騒なものを動かす羽目になったかは、後述。
やりたい構想みたいなことを思いついたのは、もう6、7年前ほど前のこと。初めて独り暮らしを始めたときに、ひどく不便を感じたことがあり、こんなサービスがあったら便利だなあ、
ちなみにその妄想をふと高校の同期に話したとき、そのサービスはどこにあるのか？！と、えらくがっつかれたのを、覚えてます。まあ、俺と同じく偏執狂の奴だったからだと思います
が。
ただ、しがない事務職リーマンということもあり、当然、技術も無く、そのときは、やるならこんな名前のサービス名だろうなあ、とか、そんな妄想レベルで、話は終わっていました。
そんな感じで、5年ほど月日は経ち、なんとなくリーマン人生の流れも見えてきたところで、以前、妄想していたことを、ふと思い出しました。
5年も経ったら、さすがに自分が考えたようなこと、誰かがやっているだろうと調べてみたところ、意外なことに、競合になるようなサービスは存在せず。ちょうど異動があって、少し時
間が出来たこともあり、じゃあ、着手してみようかと思い立ちました。
やりたいことは、大手サイトの情報検索。ただ、商品ページ内の特定情報、それも、商品ごとに正規化されていない表記を、正規化して抽出する必要があったので、大手サイトの既設API
だけではとても実現不可能でした。
まあ、だからこそ、5年間、誰もやろうとしなかったんでしょうが。
ということで、とても一発では解決できなさそうな内容だったので、自分でなんとか実現できそうな機能に細分化して、各個撃破していくことにしました。
随分と考えた結果、
以上に区分できると考えて、これらを各個撃破していくこととしました。
また、技術もなく、プログラミングも出来ず、ましてやlinuxサーバのお守りをしたことなんて当然ないので、インターネット上に置くサーバですべての処理を完結させるのではなく、イ
ンターネット上に置くリソースは最小限に留め、できる限り、勝手がわかる自宅のwindowsパソコンで処理を行うことにしました。
ちなみにさらっと結論だけ書いてますが、ここまで至るまでに、いろいろと調べ続たり、考え込んだりしていたので、思い立ってから3ヵ月は掛かってます。。。
さて、やる方針を決めたあと、はじめに着手したのは、要の検索エンジンサーバです。
いろいろとググって調べて、mySQLというやつか、apache Solrというやつかに絞りましたが、結局、Solrを使うことにしました。
MySQLのほうが実績は多そうだったのですが、Solrのほうが検索専門で、滅茶苦茶動作が速いらしいということ、MySQLでも出来るが特に速度が遅いらしい全文検索機能も使いたかったこ
と、あとファセット機能がジャンル絞りこみに便利に使えそうだったので、というのが理由です。
ちょうどSolr本が発売されていたこともあり、それを参考に、自分が使うように設定ファイルを変更していきました。
しかし、初めは設定ファイルの内容も意味不明な上に、私の書き方も雑なのか、少しいじっただけでまったく動かなくなる。結局、設定ファイルを一文字ずつ変更しては動作検証、とい
った始末で、進捗は地を這うよう。ある程度思い通りにSolrを扱えるようになるまで、3ヵ月以上掛かったでしょうか。。。
さらに、検索エンジンのフロントエンド（Solrの検索結果を、htmlに変換するプログラム）も書かなければならない。プログラミングが出来ない人間には、これが本当に辛かった。
Solr本に、いろんなプログラミング言語でサンプルがあったのですが、迷った末に、わずか数行なら書いた（≒コピペした）経験があるという理由で、javascriptを苦渋の選択。
しかし、選択はしてみたが、基礎が本当に無いから内容がサッパリ頭に入ってこない。こちらも、わかるところから本当に1文字ずつ変えていくといった手探り状態。
プログラミングについては、今回のためだけだから、といった理由で、一切基礎をやらずに着手したのが裏目に出たのか、サンプルのソースをモノにして、書き上げるのに、ゆうに半年
以上。本当に時間が掛かりました。
さらに、Solr周りで計9ヶ月間ハマっていた頃、忘れもしない、kanzen21のおっさんが彗星のように現れて、衝撃を受けることになります。
大手サイトのページをクロールして検索エンジンを作る手法は、私と考えていた構想の枠組みとまさに「完全に一致」な訳で。。。
図書館事件に注目していたのも同じで、あまりの一致具合に衝撃を受けっぱなしでした。
その後の成り行き等も含めて、興味深く観察させて頂き、本当に参考になりました。
そんな感じで紆余曲折もありましたが、ようやく難題だった、プログラミング関連に目処が立ってきたので、あとはクローラと肝心のデータ処理です。ここからは、勝手知ったるwindows
まず、クローラですが、専用のクローラをwindows用に探してきたり、それを設定するのも大変なので、今回はテレホーダイ時代に使っていたような、フリーのweb巡回ソフトを利用する
こととしました。指定のhtmlをダウンロードしてくるだけなので、別に変に新しいものに手を出す必要もないので。
また、ダウンロードしてきたhtmlファイルについては、これまたフリーの日本語処理ツールでcsv方式に加工することにして、処理ルール部分を相当に作り込みました。
このあたりは、全体を通して見てもキモの部分なんですが、ある意味、ちょっとしたパズル感覚だったので、プログラミング言語の部分と違って、かなり楽しかったです。
あとは、msdosのバッチファイル（これは前から知っていた）で、これらの処理を繋ぎ、cygwinのcurlとかいうツールで、連続して検索エンジンサーバにcsvファイルをアップロードする
仕組みを作りました。
検索エンジンサーバには、容量は少ないが、安くて高性能という、今回の用途にピッタリだった、さくらのVPSを借りて設定。CentOSのサーバ構築ホームページを見ながら、サーバとか
Solr管理URLとかにセキュリティを掛けて、こちらも素人ながら、意外とすんなり設定。
ホームページは、vpsサーバに相乗りさせるのではなく、別にさくらのレンタルサーバを借りました。apacheの設定方法等を習得する必要がありませんし、vpsのリソースをapacheと分け
合う必要が無くなるので。ホームページのhtmlファイル、cssファイル等も調べながら設定し、画像も準備しました。
あと、構想を思いついたときに妄想していたサービス名の.comドメインは、すでに他者に取得されていたのですが、どうも使っている風にも見えなかったので、whoisで出てきたメールア
ドレスに連絡して交渉し、幾ばくか払って買い取りました。
結局、足かけ18か月。ようやく完成。
楽天市場の家具を、幅x奥行x高さ(家具サイズ)で検索できる、楽天市場・家具カテゴリ専門の検索エンジン
この商品数規模（データ収録約30万アイテム）で、1センチ単位で家具のサイズ指定検索が可能な手段は、商用サービスも含めて、ほかには存在しないと思います。
kanzen21と違って、エロじゃないから華はないけどね。。。
ちなみに冒頭で少し書いたきっかけですが、就職して独り暮らしを開始したときに、新しい家にピッタリサイズの家具が欲しかったのですが、これが楽天で探すのは至難の技でして。
楽天で家具を探してみようと思った人には判っていただけると思うのですが、楽天では、価格では範囲指定やソートができても、サイズでは検索出来ないんです。
これは、楽天では、商品のサイズ情報は商品の自由記述欄に記載することになっているためで、商品ごとにサイズの記載方法がバラバラのため、検索が事実上、不能となっています。
家電製品とかに関しては、種類が少ないこともあり、メーカーのホームページとかでサイズを確認した上で、商品型番で検索すればいいので、それほど問題にはならないのですが、家具
って、種類が非常に多く、型番もあったり無かったりで、家電のようにサイズを調べることができません。
・・・ということで、カグサイズでは、楽天の商品ページにいろいろな書式で書かれているサイズ情報を拾って解析して正規化し、範囲指定やソートして検索ができるようにしています
。
また、単に寸法サイズを拾うだけでは、梱包サイズとか引き出し内寸とかも引っ掛かってしまうので、それらは出来るだけ排除して、商品の外寸が優先して引っ掛かるよう、アルゴリズ
ムを調整しています。
単位（センチとミリ）に関しても、商品ごとにバラバラ（単に単位だけでなく、商品説明のどこに"センチ"とか"ミリ"と記載しているかについてもバラバラです。）なので、サイズ表記
の前後の状況をみて、正しいと思われる単位で拾うようにしています。
あと、変わった使い方としては、欲しい家具の価格比較みたいなこともできます。
家具は、同じ商品でも、店ごとに型番が違ったりすることがよくあり、簡単には価格の比較が行いづらいジャンルの商品です。
しかし、型番は違っても、同じ商品なら原則、サイズは同じですから、欲しい商品とまったく同じサイズで検索をかけると、同等商品があるのかどうか比較しやすい・・・といった使い
方もできます。
と、そんな感じで、しがない事務職リーマンが作ってみた、ニッチな用途の検索webサービスを、サービスインさせて頂きました。
一般に公開されていて、誰でもアクセスできる情報でも、ニーズが有りそうな切り口の条件で検索性を高めれば、新しい価値を創造できるんじゃないかという実験です。
もしよろしければ、ぜひ、使ってみてくださいー。それでは！
----------
ttp://ozpa-h4.com/2011/12/28/wordpress_how_to_make_original_theme_matome/
さて、自宅のMacにWordPress環境を導入するなどしてWordPressのテーマカスタマイズをしようしようと目論んでいるのですが、なかなかどうしてこれが進まない。
まぁなんていうか私にCSSやHTMLの知識がないのと、いまだに「M」と「W」の見分けがつかないのが主な原因なのですが、それでもコツコツと頑張ってはいるのです。
この記事を読んでいて、凄く驚いた。え、この人のデザインはオリジナルじゃないの？と。
shortcut icon" href="http://ozpa-h4.com/wp-content/themes/mystique/favicon.ico
ってある。つまり、テンプレート名が「mystique」に相当する。
http://wordpress.org/extend/themes/mystique
そして、リンク先には以下が貼られている。
http://wordpress.org/extend/themes/mystique
でも、ttp://ozpa-h4.com/ のフッターにはそんな痕跡が見られない。
「間違って消しちゃいました」と言えば済むと思っているんだろうけれど、
この方、グラフィックデザイナーでしょう？
制作者および制作物に関して、少しはリスペクトの気持ちはないのだろうか、と
同じくグラフィックデザインを生業にする者として不思議に思う。
先日「Flashエンジニアが今後10年食べていくには？」というテーマを元に
Flash に精通した Web 技術者達のディスカッションが行われる催し物があった。
http://www.publickey1.jp/blog/11/flash10.html
この記事だけでは内容が省略しすぎているため
時間があれば是非録画の模様もみていただきたい。前半初頭は音量が小さいので注意。
こういった催し物は面白いなと、私はとても楽しく見させていただいた。
http://www.ustream.tv/recorded/19073524
http://www.ustream.tv/recorded/19074357
ディスカッションでは Flash だけではなく HTML5 についても触れている。
ディスカッションの感想をディレクションや営業を行なっている知人に聞いたり、
ネット上の反応を見てみたところ以下のような意見がいくつかあった。
「『Flash が好きな人』だけではなく HTML5 派の人との対談もあればよかった」
「Flash 派の人の話だから HTML5 が使えないという話はいまいち参考にならない」
『Flash 派』『HTML5 派』という くくりで考えてしまう人は
まだまだ多いと実感する。
パネリスト達は
過去から現在までに様々なプログラミング言語を利用し、あらゆる技術に精通している。
Flash という表示媒体/環境開発がベター(時にはベスト)だと考え、
Flash をよく扱っている、という旨を話している。
最後の締めとして
Flash よりも優れたものが登場するのであればそちらに移行するでしょう、
とも言っている。
これだけの説明があったのに
ディスカッション内で触れた HTML5 に対する否定的な話は、
『Flash 派』とやらのポジショントークだと目に写ってしまったのだ。
Java やら C やら objective-c やら perl やら php やら
サーバサイドからスマホ用ネイティブ言語を用いてのアプリ制作まで
色んな事やってます、と言っても
現在世の中には HTML5 を推し、合わせて Flash を否定する記事が結構出回っている。
技術者が話す専門的な用語の飛び交う話よりも
HTML5 vs Flash 的な読みやすい記事に耳を傾けてしまう人はいる。
Apple 製品を好む人は「ジョブズがそう選択したのだから」と
なおさらこういった記事に目を向けてしまう。
「Flash vs HTML5 の話にのせられてしまうのは、よくわかっていない人だ。」
ディスカッション内では、
ネット上の煽り記事を読み不安に思ったクライアントから連絡を受け
きちんと状況をゼロから説明するハメになってしまった、という内容があった。
似たような状況になっている人もいるのではないだろうか。
当方周辺では、
「Flash は駄目だ」「Flash でなくても HTML5 ならできるはずだ」
「HTML5 は Flash の代わりになるものだと言われている」と
クライアント、あるいは仕事先の関係会社から耳にする機会が増えてきた。
技術者の及ばないところで
ベターではない技術が選択、あるいは勧められてしまう やっかい性。
その記事は世間の目には届かない。
TV CM でバンバン流れている iPhone や iPad では Flash を見ることができない
という状況に乗じた
勘違いを正すためには、今までよりもより一層
あるいはメッセージを発信するよう心がけていかねばならないと感じる。
パネリスト達のような
Flash を扱う事が可能な技術力を持ち合わせている人にとって
Flash が終わろうが、代わりの技術が HTML5 やらその他何になろうが
大した影響はない。
『プログラミング』についての話をしてみる事にする。
「世にあらゆるプログラミング言語があるが
「何か一つ言語を習得し
『Flash の事は全く知らないがプログラミングプロフェッショナルの人』
が近くにいるならば是非上記について伺ってみてほしい。
その通りだと答えてくれるはずだ。
他の言語で作ったものを Flash のプログラミング言語に移植することも容易いのだ。
ここで上記三行の「他の言語」を「JavaScript」に置き換えてみてほしい。
HTML の DOM 操作に必要な言語は JavaScript である。
言語は、Flash ならば ActionScript、HTML5 ならば JavaScript を用いる。
画面描画は
あるいは用意されている描画用 API を ActionScript で呼び出し、
あるいは用意されている描画用 API を JavaScript で呼び出す。
Flash と似たような技術として Java Applet や Shockwave があるが、
これらも一緒で
言語を変え、その技術に合わせた描画を行う処理を記述するだけだ。
Web 技術者が何かに属していて、何かには属していないかのような区別の仕方は
的がはずれている事を なんとなく感じていただけただろうか。
仕事に対し、あるいは表現したい事に対し、ベターな選択を行うだけの事なのである。
環境や表示内容に合わせ両方を採る選択もあるだろう。
パネリストの中に ActionScript が好きだ、という人がいた。
これは別に
Flash が好き(製品のファン)だから ActionScript が好き、と言っているのではない。
ActionScript が優れたプログラミング言語だと判断しての発言なのだ。
HTML5 を選択するだけの事であり、
その別の技術を選択し、
Flash より優れた技術が登場しなければ Flash を使い続ける、
ただそれだけの事なのである。
もう少し突っ込んだ話をすると
Flash のプログラミング言語である ActionScript(ActionScript 1.0)と
HTML 表示制御を行う言語 JavaScript は 実は同じ言語仕様である。
『ECMAScript』という単語で調べてみてほしい。
「Flash と HTML5 は対立するもの」と考えていた人、
あるいは ActionScript や JavaScript を触れたことがない人にとって
「え？そうなの？」と思う人もいる事だろう。
JavaScript は大規模開発に向いていない、という話は聞いたことがないだろうか。
同様の言語仕様である ActionScript 1.0 はこの問題を解決するため
ActionScript 2.0 から ActionScript 3.0 へと進化していった。
Flash は開発がし易い、という話がよく挙げられるが
その理由の一つがこれである。
現行の JavaScript と ActionScript 1.0 は ECMAScript 3 準拠に対し、
ActionScript 3.0 は ECMAScript 4 準拠である。
言語として進化しているものを Flash は採用しているので
開発は抜群にし易い。
ECMAScript 4 準拠の JavaScript も登場する日もあったかもしれなかったのだが、
ECMAScript 4 標準化が白紙、
ECMAScript 4 は無かったことになってしまったのだ。
ActionScript 3.0 で作成したプログラムが
ちなみに JavaScript は大規模開発に向いていない、という事に対し、
最近では Google が新言語 Dart というものを開発している。
位置づけとしては ActionScript 2.0 に近いと比喩した人もいる。
ActionScript 2.0 はコンパイル時 ActionScript 1.0 に変換されて出力される。
Dart も同じく JavaScript 変換機能を持つ。
先の事は誰にもわからない。
HTML5 が成長するとは必ずしも言えない。
技術者は身を持って知っている。
表示と動作の差異、技術者はずっと苦しめられてきている。
めんどくさい。コストがかかる。
HTML5 も同じ道を辿るのでは、と言われてしまうのも仕方がない。
実際に HTML5 の各ブラウザの実装具合はバラバラである。
Flash はといえば、
今でも 10年以上前のスクリプト言語 (ActionScript 1.0 よりも前の言語)で
Flash が動作するブラウザがいつまで携帯に搭載され続けるのか、
まだ誰にもわからない。
今後も当面携帯向け Flash を作り続ける事になるのかもしれない。
携帯向け Flash は一つの容量が小さいというのが救いである。
IE6 対応 HTML サイト制作にせよ、携帯向け Flash 制作にせよ
状況に応じて何を選択するかを判断できるほどの技術力を身につける事
選択する技術に何ができて何ができないのか、
どの技術を組み合わせるとよいのか、
自ら判断できるようになった時、一人前の Web 技術者になったと言えるだろう。
一つ何かをモノにしてしまえば前述の通り移行は容易い。
それを極めるくらいまでとことん勉強してほしい。
続けていくと見えてくるはずだ。自信という名の悟りの道が。
気になった点をいくつか。
現状の HTML5 の実装具合のバラバラさに対し、
「(HTML5の)表示の差分を埋めてくれる何かが登場するかもしれない」
と言う発言があった。
言った当人も会場にいる人達も、きっとこう思っただろう。
「それってなんて Flash Player？」と。
「あれはやめたほうがいい」という発言があった。
勝手に注釈するのであればこの発言は
「Flash で作られた重たい Web を HTML5 でまた再現するつもりなの？」
という皮肉であろう。
完全な初心者の状態から勉強を始めてから大体5ヶ月でウェブサービスが完成したので何を用意したり何をどうやって勉強したらいいのか色々書いてみました。
アイデアはあるんだけど、プログラムとか難しそうで自分にはウェブサービスなんて作れないと思ってる人がいたらその敷居を少しでも低くできたらいいなあなんてと思ってます。
ちなみにボクはぼんやり１年くらいはてなブックマークにのってる記事を見ていてプログラムとかできたらいいよなあなんて思っていてようやく重い腰をあげた人です。
さらに自分は文系で数学も英語もロクにできない人なので、基本的に誰でもサイトは作れると思います。
そもそも中学生でもプログラミングができるんだから大人に出来ないわけないですよね。
これからウェブサービスを作りたいっていう方の参考になればと思います。
※自分も初心者なのでまちがってることがあったら教えてください。
●何を用意すればいいのか
※自分がWindowsなので何個かWindows向けのソフトを紹介しています。
※Macの方は申し訳ないですが、Mac向けのソフトをご自分で探してください。
(1)メモ帳
アドビのdreamweaverっていう便利なソフトがあるらしいですがお金もかかるし別に必要もないと思います。
ただのメモ帳だと使いづらいのでボクは「TeraPad」っていうフリーソフトを使っています。
例えばプログラム言語ごとに表示を切り替えると、関数とかコメント部分の色が変わって見やすくなって便利です。
・TeraPad ： http://www5f.biglobe.ne.jp/t-susumu/library/tpad.html
サイトを作っても各ブラウザごとに見え方が違うのでそれぞれ確認するために何種類かブラウザをインストールしましょう。
ボクはIEとFireFoxとChromeの３つをそれぞれ表示して確認していました。
OperaとかSafariも本当は確認しないといけないと思うんですがこの3つで十分だと思います。
(3)XAMPP
ザンプって読みます。ざっくり言うとローカル環境(自分のパソコン)でプログラムを動かす環境を作るソフトです。
いちいちサーバーにアップロードしなくても、プログラムが動くかを確認できるので便利です。
またレンタルサーバーでプログラムが暴走してしまうと迷惑がかかるらしいのであらかじめ自分のパソコンで確認するのがいいようです。
・XAMPP： http://www.apachefriends.org/jp/xampp-windows.html
(4)ドメイン
何とかドットコムっていうやつです。ネット上の住所的なやつです。example.comとかexample.netとか。
ボクはお名前.comでドメインをとりました。ドメインの個人情報を隠せる？サービスがあるのが理由です。
まあどこで取っても大して変わらないと思うので目についたところで取るといいと思います。
「.com」だったら年間1000円くらいです。長すぎるドメインはとらない方がいいかもです。
(5)サーバー
ネット上にファイルをアップロードするところです。ドメインが住所だとすると土地みたいなイメージです。
ボクはさくらインターネットさんのレンタルサーバー(スタンダードプラン)を借りています。
理由はグリーの社長さんがほめてたから。お金も月額500円なので安いです。
同じ500円だとニコニコ動画のプレミアム会員になれますね。ちなみにボクは一般会員です。
さっきファイルをアップロードとかさりげなく書きましたが、そのファイルをアップロードするソフトがFTPソフトです。
ボクはFFFTPを使っています。最初使い方がわからなくて戸惑いましたが慣れれば簡単です。
・FFFTP ： http://www2.biglobe.ne.jp/~sota/
(7)FireMobileSimulator(FireFoxのアドオン)
携帯電話のサイトを確認するには基本的に実機で確認するのが一番ですが、個人で全部そろえるのは難しいです。
そこでFireFoxのアドオンのFireMobileSimulatorという拡張機能を使って簡易的に確認するのがおすすめです。
XAMPPのようなローカルサーバでも確認することができます。
・FireMobileSimulator ： http://firemobilesimulator.org/
FireMobileSimulatorで確認できるといってもやはり見え方は違います。念のため実機で確認しましょう。
ボクはiphone使っていてそれの確認はしてるんですが、androidの友達がおらんのでまだ確認してなくて実はまだ不安だったりしてます。
上と同じようにやはり実機で確認した方がいいです。特にガラケーは見え方もそうですが、プログラムがうまく動かなかったりします。
例えば、AUだけフォームに「enctype="multipart/form-data"」を入れてると文字化けするという謎の現象が起きたり。
他にも色々あって制作に時間がかかったのは正直このガラケーのせいです。色々３キャリアで統一とかしてくれないんですかねえこれ。。。
友達のY君とMさんとNさん本当にありがとうございました。匿名ブログだけど感謝してます。
●何を勉強すればいいのか。
さて具体的に何を勉強すればいいのかわからない人がいると思いますが、以下を勉強すればウェブサービスが作れます。
ということでひとつずつ説明。
マークアップ言語っていうらしいです。プログラムじゃなくてhtmlファイルを作る言語です。
とりあえずhtmlでサイトの文書の論理構造を書いて、cssでサイトの見た目をキレイにするものだと思ってください。
適当に検索すれば勉強できるサイトがたくさん出てくるのでそこで勉強してください。
本も売ってますけど基本的なところは難しくないので買う必要はないと思います。
調べると、html5とかxhtmlとかあって戸惑うかもしれませんが、とりあえずPCとスマホなら何でもいいと思います。
(ガラケーについては各キャリアごとに対応させる必要があります。書くとすごい長くなるのでガラケー用にサイトが作りたいなら調べてみてください。)
ただhtml5が一番新しいので今後勉強される人はそれの方がいいかもしれないです。
ちなみにボクはたまたま見たサイトがxhtmlの説明だったので今回はxhtmlで作りました。
まだボクは90年代初頭のホームページみたいなデザインしかできないので偉そうなことは言えないんですが(笑)
最初はhtmlだけでサイトが作れると思っていたんですが、はてなのような動的なサイトを作るときは何かしらプログラミングする必要があります。
んで、いろいろ調べるとperlやらRubyやらJAVAやら色々でてきて一体どのプログラム言語がいいのか悩むと思いますがウェブサービスが作りたいならPHPがいいと思います。
理由はウェブに特化した言語っていうのと他に比べると簡単で勉強時間が少なくて済むらしいので。
PHPなんかで本なんか買う必要はないらしいんですが、ネットのサイトだとよく理解ができなかったので本を買いました。
以下の書籍がとてもわかりやすくていいです。おすすめです。やっぱり本は体系的にまとまってるので勉強がしやすいです。
この本の通りやっていけばとりあえずプログラムが動く感覚が得られます。
あとすごい賢そうなことをやってる感覚になるので頭がよくなったような気がしますよ（笑）
MySQLもこの本で勉強ができます。MySQLというのはデータベースで、そういうソフトです。
他にもOracleとかPostgreSQLとかあるらしいですが、
とりあえずMySQLでSQL文っていうのを勉強するとデータの検索だったり、データのアップデートだったりが数行でできたりするのですごい楽になります。
決して簡単ではないですけど、思ったより難しくはなかったっていう印象です。
自分は大抵その時理解できなくてもだいたい一晩寝てから、もう一度頭からやり直すと理解できました。
(3)Apache
ボクはさくらさんのレンタルサーバーを借りていて今回はあまりいじってないんですが例えば「.htaccess」という名前のファイルを作るとapacheの設定をいじることができます。
例えばアクセスされたくないファイルがあったらそういう指定を「.htaccess」というファイルに書いておけばアクセスされないようになります。
基本的にパソコンと同じように作ればいいです。ボクは以下の本を見て勉強しました。
「iPhone+Androidスマートフォンサイト制作入門(たにぐちまこと)」
正直ネットの情報でも十分だと思いますが一度体系的に勉強するのもいいと思います。
ガラケー向けのサイトの制作は特殊で一度頭真っ白の状態で勉強した方がいいです。それだけPCとスマホとは全然違います。
ネットにも情報はたくさんありますが、断片的なものなので以下の書籍で体系的に勉強してから補助的にネットで調べた方がいいです。
この本は実践アプリケーション集というだけあってそのまま使えるコードが収録されているのがとてもいいです。
正直PHPのプログラミング自体はそこまで難しいという印象はなかったんですが、この本に出会わなかったら多分ガラケー向けのサイトは作れなかったと思います。
もしガラケー向けのサイトが作りたいならこの本を買うのが近道だと思いますよ。
CakePHPとかSymfontとかいうのがあるらしいです。
このフレームワークを使うとあらかじめある程度のところまでできてるんで、ボクみたいに全部TeraPadで手書きしなくてもいいみたいです。。。
(2)javascript
PHPはサーバーで動作するプログラム言語ですがjavascriptはブラウザ上で動作するプログラム言語です。
非同期通信なんていうよくわかんないけど何かすごいこともできたりするらしいですよ。
●もし調べまくってもわからなかったら
もし一日中検索してもよくわからなかったらそういう時はネットの頭のいい人たちに質問しましょう。
ボクは以下のサイトで質問していました。
(1)ヤフー知恵袋
巷ではヤフー知恵遅れなんて言われてますが、コンピュータ系の質問に関してはしっかり教えてくれる人がほとんどです。
ポイントを100枚くらい使うとカテゴリマスターなんていう天才が回答してくれます。
(2)２ちゃんねる
どういうスレッドなのかよく読んで質問しないとボロクソに言われますが、２ちゃんねるなのに皆さんすごい優しく教えてくれます。
たまにケンカしてたりすることもありますがそのときはケンカが終わるまで待ちましょう。ケンカの流れで質問がスルーされたりします。
ヤフー知恵袋も２ちゃんねるもそうですけど、質問するときは自分の環境をしっかり書いて何がしたいのか、どんなエラーがでるのか明確に書きましょう。
回答する人もわからないですし、自分がほしい回答がまず来ないと思います。
あと当たり前ですが回答してくれたらお礼をしっかりいいましょうね。
●こうして出来上がったウェブサービス
こうやって今回できあがったのが６人まで登録ができる招待制のレンタル掲示板です。
「ひそり-秘密共有ネットワーク」(http://hisori.com/)です。
なんだ掲示板かよー！！とか言わないでください(笑)これでもけっこうがんばったんで。。。
そういえばサイトを作ろうと思った経緯を書いてなかったんでちょろっと書いておきます。
ボクはミクシィとツイッターをやってるんですが、一瞬その時だけ仲のよかった人の更新とか見たくなかったりするんですよね。
でもマイミクを外したりフォローを外したり小心者のボクにはできなかったりするわけです。
そもそもあーいうソーシャルって自分のキャラに一貫性をもたせないといけないから窮屈なんですよね。
例えば、会社の同僚には真面目を絵を書いたようなキャラだけど学生時代の友達には下ネタ好きのどうしようもないキャラだったりすると
マイミクやフォロワーにその会社の同僚がいたら、下ネタなんか書きたくても書けないという窮屈さがソーシャルにはあるわけです。
だったらあらかじめ人数制限しておいて、例えば同じ学生時代の人しか見ることができないサイトがあれば
下ネタだって気にしないで何でも書けるよねっていう考えに至ったわけです。
今回６人までという人数制限と招待制っていう形にしているのはそういう理由と本当に仲のいい何でも話せるグループに使ってもらいたかったからです。
んで、ネットにそういうのがなさそうだったので勉強がてら自分で作っちゃえ！ってことで今回作りました。
ちなみに何で秘密共有ネットワークなのかというと「招待制無料レンタル掲示板」だとどんなサイトかイメージがつかないと思ったからです。
じゃあ何て名前にしようかと考えた結果、秘密でも何を書いても大丈夫ですという意味を込めて「秘密共有ネットワーク」って名前にしました。
とまあ、そういうことで初心者でボクみたいな完全文系の人でもこれくらいのサイトなら作れるんで
もしプログラムとか難しそうとかそういう理由でウェブサービスの制作を躊躇してる人はぜひチャレンジしてみてださい！！
※もしサイトが変な挙動がしてるとかあったら更新報告用にツイッターのアカウントを作ったんでよかったら教えてください。
http://twitter.com/#!/hisori_com/
ではでは。。。
ガチ無知というのは「HTMLとかの知識が全くない人」という意味です。他意はありません。
先日「WEBサービスを作りたい！」と思い立ったガチ無知の自分。まずHTMLから勉強した。そんな自分の理解を復習ついでにまとめてみる。
まあはてな界隈では少ないだろうけど、俺と同じガチ無知の人がいたら、HTML/CSSについてイメージが掴める、かも。間違ってたらごめんね。
HTMLをプログラミング言語みたいなもの？と思ってた人。（少なくとも俺はそうだった） 違います。
じゃあHTMLとは何か。文章を飾り付ける魔法だ。飾り付け。それ以上でもそれ以下でもない。
世の中には数多のサイトがある。数多のデザインがある。アレ全部文章の飾り付け。画像？Flash？飾り付けだ。
HTMLは、ずらっと文字だけが並んでるとページが見づらいからそれを見やすくする魔法。とりあえずそう認識しとこう。
HTMLは「文章を飾り付ける魔法」だ。じゃあ魔法を使うにはどうすればいい？
呪文を使うんだ。35まで純潔を貫き通す必要のないお手軽な魔法だ。
じゃあ呪文の使い方をば。
[呪文 飾り付けたい文章] ←これを
[呪飾り付けたい文章文] ←こう
そう、挟めばいい。HTMLは範囲指定魔法。だから効果範囲を呪文で挟む。以上。HTMLの使い方解説終了。
↓これは、文章を強調する呪文。
＜strong＞＜/strong＞
で、↓この文章の一部に魔法をかけよう
HTMLは、"HTML is Text Markup Language"の略です
これを、
＜strong＞HTML＜/strong＞は、"＜strong＞HTML＜/strong＞ is Text Markup Language"の略です
すると、
HTMLは、"HTML is Text Markup Language"の略です
こうなる、と。おしまい！
ここまででわかるだろうけど、俺の解説はものごっつい大雑把だ。
「呪文を強化する」 魔力を底上げするわけじゃない。魔導書は特定の呪文しか強化できない。
氷の魔導書を読むと、ヒャドは強化されるけど、メラは変化なし、みたいな話。
CSSと言う名の魔導書の書き方はこうだ。
強化する呪文名 { 強化内容 }
以上！
じゃあさっきHTMLの紹介で使った＜strong＞呪文を強化する魔導書をつくる。
strong {color: red;}
これは、strongに{color: red;}の効果を追加する魔導書。読んで字のごとく。色を赤にする追加効果。
さっきの飾り付けた文章が
HTMLは、"HTML is Text Markup Language"の略です
となる、と。呪文自体が強化されてるから両方赤になっている、と。
以上。終了。
さらっとメモ書きをするつもりが、すっげえ長々と書いてしまった。
まあインターネッツの大原則として、「間違ったことをドヤ顔で披露するとみんなに修正してもらえる」というのがあるので、このエントリもそういう役割を果たしてくれるんじゃないかな、、、
HTML4.0を勉強したんだけど、HTML4→HTML５の違いというのは、魔法を使う杖がランクアップしたようなもの、という認識でいいのかな？
http://anond.hatelabo.jp/20111113010022
こちらに触発されて書いてみる。辞めてからかなり時間も経ったのでそろそろ書いてもいいかなと。
訓練内容はAdobeのCS4の操作方法→自主制作というのがだいたいの流れとなっていて、それぞれのアプリケーションのテキスト（フォトショ、イラレ、DW、Flash）とHTML+CSSの本という感じ。
このテキストを選定しているのは教室を運営している会社のようで、（伝聞で聞いたので定かではない）もし運営してる会社がWEB制作を知らないとか知っててもテーブルレイアウトだった場合にはあまりいい本は選ばれないようです。また運営会社同士でヨコの繋がりで話し合って本を決めてる部分もある（複数の教室で同じ本だった）のかな？と予想しました。
実際の訓練内容はハローワークで決めているのか運営会社で決めているのかは解りませんが、講師は訓練スケジュールやテキストに関してなにも言えない、わからないまま講義が始まります。
HTML5時代だというのにFLASHにえらく時間を割いたりするスケジュールで、受講生から「せんせーFLASHってどうなんすか？」と物凄く困る質問をされたりします。
また受講生はAdobe製品をアカデミックで買えるというナイスな特典があったりしますが、授業で使ってるのはCS4だけど買ったのはCS5.5みたいな微妙だけど重要なアクシデントが発生します。
HTMLの本もXHTMLならまだしもHTML4.01（しかもStrict）で書いてる本だったりすることもあります。
受講生はテキストを実費で購入しているため、ないがしろにするわけにはいかないので「これいらんだろ」とか思ってもとりあえず本の通りに進めなければなりません。（例えばHTMLの本を早めに終わらせてXHTMLの話をして余計混乱させたりとかあった）
ここで問題なのは受講生は基本的にお金に余裕がある人は少ないです。
AdobeのWebプレミアムがアカデミックで買えるとはいえ10万以上の余裕があるなら基金訓練なんかコネーよ！という人が半数以上いるんじゃないかと。
体験版はあるけど1ヶ月で終わるし、訓練自体は半年あるわけです。
なのでGIMPとかInkscapeとかもサラっと存在を教えておいたりします。
あとはフォームのHTMLだけ教えて肝心のPHPやらPerlやらには基本触れないのでそこも工夫が必要です。
教科書3冊くらいクリアするころには生徒からこれで本当にWEB屋さんになれるの？とか疑問を持たれますので、フリーでやっていく方法とか自分の経験談の話をすると人気の講師になれますが、会社からはいい顔されないかもしれません。職業訓練なのでどこかに就職するのが大前提なんです。
指導要綱みたいなものはキホンないので講師の思うとおりに教えられますが、上記のテキストの縛りとスケジュールの縛りがあるので本が変わる前にグループを作ってもらって共同作業させることを取り入れました。実際にWEB屋さんにいったら分業しますしね。
さて、各アプリケーションのテキストがいいものだったらよいのですが、そうでない場合は自分で課題とかを作る必要があります。
フォトショやらイラレはいいんですが問題はHTML+CSSとFLASH。FlashなんかはASがゴッソリ抜けてたりすると生徒から「やりたいことができない！」と嘆かれます。CSSなんかも「やりたいことができない！」と言われがちです。
実際は一人の講師が２コマやることがザラなんじゃないかと思います。
AM9時からお昼を挟んでPM3時まで+PM3時からPM9時まで。若干ズレはするでしょうがこんな感じなんじゃないかと。
これで課題を自作していたら睡眠時間は3～4時間くらいになっちまいます。ああ祝日ってステキ・・・。とか思い始めます。フリーランサーは普段の仕事は全部お断りしないとイカンかもしれません。
テキストの内容とスケジュール（ｘ月ｘ日からｘ月ｘ日までFLASHとか書いてある）なんか完全に合わないので苦悩します。
事前に用意できればいいのですが先に書いたようにスケジュールやテキストは開講数日前にコレでヨロ！的に渡されますので初めてやるひとは対応難しいでしょう。
とりあえず今日はここまで。
上っ面じゃなくてちゃんとわかっている人教えてください。
▼モバイル版「Flash Player」の開発中止をどう見る？
http://japan.cnet.com/panel/35010348/300015677/
▼Adobeはなぜ失敗したか, Flash-Playerの敗退は歴史の必然だった
http://jp.techcrunch.com/archives/20111109why-adobe-failed/
今後来るhtml5をもてはやす必要もなく、
で“既に代替されている”
html5厨の中にはこのあたりごっちゃにして歓迎してるやつが多数いる
くどいけど、その他の機能はjsとかcssとかhtml5周辺の独自仕様で
解決してることが多いからな！
普通にhtml5が覇権取るにはオーサリングツールがいるんだぞ。
全部含んでるんだ。
html5が現状見えてるのは、
までだ。
「描画系の機能でflash(flex sdk)同等の仕様を用意することになるだろう」
ってだけじゃ劣化flashすぎんだろ。
あとadobe終わったっていってるやつ、
それを一社じゃなくブラウザつくってる各社が実装するんだからな・・・
お前らがflash嫌ってるのと同じ問題が発生して、
flash殺すのはいいけど、html5を中心とした代替環境できんのに何年かかるんだよ。
あと、リッチインターフェース作るのに、いつまでもなんのサポートも受けれないような
jsライブラリ組み合わせて、必死にカスタマイズとデバッグしなきゃいけないのかよ！
業務系のuxデザインつくっていくのに、flex使おうか、html&css中心で行こうか悩んでんだ。
誰か何かアドバイスくれよ…
flexは良いところが多くて工数も減るし、どこかでadobeの5オーサリングツールに乗り換えられるだろうから
普通のweb屋としては、htmlとjsで苦戦しながらも自己責任でスクリプトチマチマいじってる方が、
他にもこの中途半端な状況に困ってる奴いるだろ！
Re: 〇〇日で月間アクセス〇〇万PVを達成した方法の真実なんて1つしかない - http://anond.hatelabo.jp/20110830144753
------------------------------------------------------------------------------------------------------------------------------------------------
２ちゃんねるブログ板でも相互ブックマーク（管理人同士でお互いのブログをはてブしあう行為）が頻繁に話題になっている。
34 : Trackback(774) : 2011/08/27(土) 16:48:06.92 ID:qR88936B [3回発言]
36 : Trackback(774) : 2011/08/27(土) 17:00:29.83 ID:SVBG7kK5 [6回発言]
はてぶ自演しててもいいとおもうけどねー俺は
零細はそれくらいしてでも這い上がってきてもらわないと
だってお前らそういうことしないと上がってこれねーじゃん
54 : Trackback(774) : 2011/08/27(土) 18:23:16.53 ID:HB0ltaAL [4回発言]
ただ、自演したところでお前ら管理人だけ気にしてるだけでブログを見に来てる一般層は何一つ気にしてないってことだけは確かだからな。
もしそれをチャンスと思えないならそれでいい。綺麗事言って大手になろうとしてるのなら頑張ってくれとしかいえないな
713 : Trackback(774) : 2011/08/02(火) 22:19:42.17 ID:ga/wsK7A [3回発言]
面白いの見つけた
はてブ自動投稿プログラム、Twitter自動フォロープログラムっぽい。
ttp://tool.matomeja.jp/twitter/account_list.txt
これがフォローすると高確率でフォロー返ししてくるTwitterIDリストか？
ttp://tool.matomeja.jp/hatima/rt_ranking.txt
はちまのRT数ランキングを生成するPHPも.txtファイルで置いてあった。
アップロードしたファイルのURLがttp://2-br.jp/になってたから、
ツーブラってまとめツールの作成者＝yoshihiraか？
こんなツールまで出回っている始末。
yoshihiraというのは、
などの2chコピペブログのページ末尾から「Customize by yoshihira」などとリンクされているコピペブログ専門のWebデザイナーということになってる人物。
ちなみに、はちま起稿のページ末尾には
と書かれているが、Convoyの管理するドメインにyoshihiraの管理するサイトのデータが置いてあったとかで、yoshihiraとConvoyとVIPPER速報管理人は同一人物である可能性が高いとされてる。
708 : Trackback(774) : 2011/08/02(火) 18:48:24.11 ID:ga/wsK7A [3回発言]
こんなのがあった
[DIR] Parent Directory 31-May-2011 06:07 -
[DIR] 0taku.livedoor.biz/ 10-May-2011 16:20 -
[DIR] check/ 17-May-2011 03:42 -
[DIR] contact/ 23-Jul-2011 08:49 -
[DIR] hatima/ 21-Jul-2011 04:29 -
709 : Trackback(774) : 2011/08/02(火) 19:25:28.17 ID:JCIXDAoN [1回発言]
＞＞708
710 : Trackback(774) : 2011/08/02(火) 19:39:51.68 ID:7ZKWJsg+ [2回発言]
＞＞709
このサイト自体にあまり意味はないが各種サイトの物置の様なものがあった
はちま起稿の各種アイコン、
contactにyoshihira氏のサイトのリンクがあったことから
matomeja＝yoshihira氏と考えられる
yoshihira氏＝convey氏という可能性も有る
711 : Trackback(774) : 2011/08/02(火) 21:49:06.25 ID:ga/wsK7A [3回発言]
＞＞709
yoshihira=matomeja=vipzip2ch=convoy=vipper速報と思われるファイル一式が置いてあった
ちなみにこのVIPPER速報というのは、今日もやられやく乗っ取り騒動や永上裕之のハムスター速報管理人騙り騒動でも永上裕之側の人間として話題にのぼってる。
53 : Trackback(774) : 2011/08/27(土) 17:53:42.38 ID:dcCYiZQL [2回発言]
＞＞51
ベア速とかその周囲とか
あじゃじゃしたの最初にはてブつきだした頃の最初の３つのユーザー見てみろ
非表示が多いから
59 : Trackback(774) : 2011/08/27(土) 18:30:33.20 ID:zLprTqEW [5回発言]
＞＞53
はちま
VIPPER速報
妹はVIPPER
2のまとめR
まめ速
ねたAtoZ
はてブを非公開ユーザーに設定しておくと、ブックマークしているサイトに不自然な偏りがあったり、Twitter経由でのはてブ投稿でクライアントがdlvr,itやtwitterfeedといったRSSをTwitterに流すものだったりといったところから足がつく危険性がなくなるが、ブックマーク数の統計にきっちりと加算される。スパマーにとっては美味しい仕様となっている。
非公開ユーザーをブックマーク数から除外したり、dlvr.itやtwitterfeedからのTwitter経由での投稿をブックマーク数から除外するだけで、結構な量のスパムが消滅するはずなのだが…。
面白いことに、非公開ユーザーはブックマーク数の統計に加算されるだけでなく、「コメントのないブックマークもすべて見る」から見れるブックマーク数の推移の線グラフの統計にも加算されている。
非公開ユーザーを用いて3userないし5userまでブックマーク数捏造がなされている場合、ブックマーク数の推移の線グラフの左端が0userではなく3user～5userの高さで始まる（3user～5userの高さまで垂直に上がってから右に曲がる）ことになる。
ちなみに上に挙げたブログより圧倒的にアクセス数が多いであろう痛いニュースやアルファルファモザイクのグラフを見ても、非公開ユーザーによる捏造と思われるブックマーク数の急上昇は見られなかった。というより、3user～5userに達するまでは緩やかで、達してから急上昇するパターンのほうが多かった。上に挙げたブログは最初だけ勢いがよく、それから50～100userに達するまでは緩やかなグラフになっているという場合が多い。
みんなも知っての通り、前々から2chなどでヤフー知恵袋が『Yahoo!バカ袋』『Yahoo!知恵遅れ』とネタにされています。
たとえば
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1252778297
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1315883
こんな質問するのは一体何者なんでしょうか。
おもしろいので、こういう質問を集めるサイトを作ってみました。
知恵袋のURLをコピペで登録するだけのシンプルなサイトです。
サイトの名前は『ヤホーおバカ袋』となっていますが、最初は『Yahoo!キチガイ袋』でした。流石にヤフーさんに怒られるかなと思って控えめにしましたwww
ぜひみんなもおもしろい質問をのっけていってください^^
Yahoo知恵袋APIはOAuthを使って書き込みなども出来ますが、今回は記事の内容を取得するだけだったので楽でした。
ひとまずAPIを叩いてXMLを見て、あとは配列にして...と簡単にとれました。
環境はApache+PHP+MySQLを使っています。よくあるあれです。
jqueryも使っています。jqueryプラグインはすごく豊富でajaxを使ったフォームもtwitter風のメッセージバーも超簡単に設置できました。
あと、cssはyahooのcssﾌﾚｰﾑﾜｰｸを使っています。yahoo css gridsが便利で、http://developer.yahoo.com/yui/grids/builder/ これを使えば土台が簡単にできました。。
デザインはアイコン載っけりゃいい感じに見えるので、http://photoshopvip.net/ からテキトウに見つけます。
読んでくれてありがとうございました^^!
せっかく作ったので、誰かに教えたくて。。。
ぜひ使って、おもしろい質問を共有しましょう^^
要望あればぜひぜひください。
なぜ両方使うという選択肢がない。真の技術者はウェブ標準だろうがFlashだろうがネイティブだろうが、その場その場でユーザーの体験を最善にし、クライアントの要求を最高に満たすベストの技術を使う。JavaScriptかFlashかなんて動きさえすればユーザーには関係ないんだから。実際、HTML5スゲＥＥＥＥＥ！！！ってページにFlashタグのブクマが間違ってつけられたりしてるよ？（笑） ウェブ標準の崇高さなんてパンピーにはわからんのです。
そもそも分からないんだけど、HTML5が「投資」するほどたいしたもの？ 誰もが基礎教養として身につけているはずの、これまでのHTML＋CSS＋JavaScriptの延長線上の技術でしょ。今まで普通にやってきたウェブ開発者ならすぐにキャッチアップできるはずだよ。
どうせHTML5の実装の普及には当分かかるし、その時点のブラウザ環境で使用可能なものをゆっくりまったりと導入していけばいいだけ。その意味ではいわゆる遅延評価学習で十分。あわてることはないです。どうせ皆使うことになるんだから。
一応言っておくと、いいものだと思いますよ、HTML5は。現段階で頑張って凝ったものを動かしておられるイノベーターの方々もたいしたものだと思います。敬意を。マリオやらグラディウスやらは著作権的にどーなのかと突っ込みたいが。
それはシナリオのひとつですよね。Googleの甲斐性次第では十分にあり得る。それと、ジョブズが翻意するというシナリオもありますよ。今までに散々あったことですが。どこかでそれをネタにしている記事があったと思いますが。
もしEdgeを見てそう思ったのなら、Flash CSを使って制作したことがありますか？ Edgeを実際に使ってみましたか？ と問いたい。
他にも、最低でも、
これらにきちんと答えられない人間にHTML5 vs Flashなど語る資格はないです。そもそも対立させる時点でわかってないなー ┐(´д｀)┌ って感じなのだけど。
あとFlashへの投資が無駄になると思ってるようですが、俺はFlashは投資判断「Buy」継続だと見てますよ。たとえこのままiOSで動かずともね。AIRもあるし、ブラウザのプラグインとしてのFlashだけ見ていると考えを誤るよ。ブラウザのほうにしても、GPUアクセラレーションつきの3Dが真っ先に使用可能になるのはFlash。プレイヤーの普及が速いから、WebGLと異なり、今後1～2年内に実案件で使用可能になるでしょう。そういった面ではなおカッティングエッジな技術だよ。
まあ、プラットフォームや言語の選択は投機だから、どの銘柄が買いか売りかで紛糾するのはわかる。ただ、それなら分散投資だとか、インデックス投資という考え方もあるのでね。HTML5に惚れ込んで一点買いなんて若いエンジニアがいたら、それはもう相当危なっかしいなと、視野も相当狭くなるだろうなと危惧するよ。
というか、JavaだろうがC++だろうがObjective-CだろうがLLだろうがアセンブリ言語だろうが関数型言語だろうが、一度全部触ってみなよ。いいから。HTML5で手一杯なんてのでは話にならんですよ。
今、海外IT系企業に所属しているのだけど、日本の求人情報のいい加減さにはうんざりする。あれで人を集めたいと良く思うな。部下というより、子分が欲しい感ありあり。結構有名な人でもそういうことをするんだよな。「一緒に未来を目指せる人」とか一行もいらない。
海外じゃ、あれは通用しない。元々スキルも出生もバラバラな人を雇う前提なので、事前の要望を明確にしておかないと、採用活動自体が無駄になるから。LinkeInとかが、スキルと経験をきちんと書けるよう設計してあるのも、そのため。日本の求人ではグローバルは目指せない。
以下に、(自分視点だけど)望ましい例をあげる。
人によっては「箸の上げ下げ」と思うみたいだけど、海外の求人はこれをやっている。なんでこれを求めるかというと、創業者や社長というのは、制度設計者だから。自分の掲げた目標(「求人情報を扱うSNS構築」とか「ARを利用したソーシャルゲーム」とか)を実現する為に人を雇う訳で、これが書けないうちに人を雇うのは、目標とそれに準じた制度設計が出来ていないと看做されても仕方ない。海外で成功している事業者は、目標設定が明確。Googleにしたって「世界中の情報を整理する」というミッションはあるけど、実際のプロダクトがあるから説得力を持つし、人を集めて使う事も出来る。
とくかく、目標に準じた制度があり、その制度を動かす為の求人がある。それがわかってないで人を集めると、気のあう人か、そうでない人かでかなり成果が違ってしまう。そうすると、ミスマッチが起きるので、双方に不幸が訪れる。要するに「書かなくてもわかるだろ」を意地でもはっきりさせるということ。コンサルなら得意なことなんだけど、それ以外の人は結構できない。
もちろん、求人は解雇制度を関係があるので、一概にこれが日本で適切とは言えないかもしれない。でも、不幸を避ける為の事前の策は多い方が良い。
| 日記途中だけど緊急事態＞＜、一番下まで呼んで誰か助けてください＞＜ | |
|---|---|
今日から夏休みが始まったのでプログラミングを勉強しようと思う。
３日坊主にならないようにがんばる。
去年の二の舞にならないようにモチベを維持するために日記を書く。
プログラミングができたらかっこいい！
サークルも友達もいなくさびしい夏休みを有意義にしようとするため
都内の大学に通う２年生。
前述のとおりサークルもやってない、友達もいない、典型的なインドアオタク。
でも顔はイケメン。
プログラミングは３年前にJavascriptとHTMLをネトゲでの戦いを整形するために覚えた程度。ほとんど忘れてる。
C言語を大学で習ったが「苦しんで覚えるＣ言語」というサイトにのっている範囲しかやってない。
一応プログラミングの知識は少しはある。
やっぱり、目標はあったほうがいい。
うーん、やっぱり完全に一致みたいな情報網羅サイトを作ってみようと思う。
色々な技術が手に入りそうだし。
色々な言語も学べそう
| どんなサイトにするか？ | 大規模情報サイト |
|---|---|
| 学ぶ言語 | HTML,PHP,Ruby,Javascript,CSS |
とりあえずプログラミングにはエディタとアップロードするやつが必要なので色々いれてみた。
| エディタ | |
|---|---|
| Netbeans | 重い、すごく重い |
| phpエディタ | phpしか編集できない |
| terapad | 色分けが出来ない |
| K2Editor | これが一番最強。でもphpに対応してない |
| HIDEMARU4000YEN | win7じゃ使えなかった。 |
| アップするやつ | |
| FileZilla | 使いづらい、糞 |
| ALFTP | これが一番しっくりきた |
というわけで色々悩んだ結果、基本K2Editor、php編集はNetbeans,アップロードはALFTPにした。
phpとhtmlとrubyやjavascript対応してて色分けも出来るwin7で動くエディタないのが残念
実は１ヶ月前にプログラミングを勉強しようと思ってサーバーは借りてた。
ググったり、2chに質問したりして悩んで悩んでロリポップのチカッパプランを借りる事にした。
http://lolipop.jp/service/plan-chicappa/
| 初期費用 | ¥1,575 |
| 料金(６ヶ月) | ¥3,150 |
| （１ヶ月あたり） | ¥525 |
| 合計金額 | ¥4,725 |
しかしながら無料のレンタルさばより色々といじれて、なにより「お金はもう払った、使わないともったいない」という意識を持つ事でだらけないで出来ると思う。
まず師匠の日記をみてみる。HTMLとCSSからはじめたと書いてあるが、多分これからはじめると飽きる。
なのでWebの情報を自動で集めてくれる（これをスクレイピングという）BOTを作ろうと思う。
日記を読むとMechaniseというのを使ってるらしい。
そうするとRuby jamというもので動いているものらしく、Ruby jamはRubyで動いている。
Rubyは鯖にはいっているがどうやらjamのほうははいっていないらしくMechaniseもはいっていない。ということで
ロリポップの解説ページをみてPuTTyていうのをいれてSSH操作ってやつをしてた。
http://d.hatna.ne.jp/taramonera/20100601/1275388515
このページをみながらやってたら
% vi ~/.cshrc
これを実行して
setenv RUBYLIB /home/アカウント名/lib
setenv GEM_HOME /home/アカウント名/lib/rubygems
:wqで保存終了らしいんだけど、入力したところで終われない＞＜
教えて得ろい人＞＜
「公式 Chrome ウェブアプリ はてなブックマーク」でコメントページを表示すると、旧UIのようにコメントだけを一覧表示できていい感じ。
というわけで訓練されたはてブ民の間ではuser.jsなどで飛ばしたりアレするのが流行るものと思われるが、グリモンだかなんだかに馴染みのない私は、今さら誰も触れないであろうProxomitronを使った転送方法を記しておく。
適当ながらメタブ対策を盛り込んでみたのがチャームポイント。
#はてブのコメントページをChrome Web App版に飛ばす 2011/05/17 14:50 (^$OHDR(Referer:http://b.hatena.ne.jp/viewer\?))$URL(http://b.hatena.ne.jp/entry(/|\?mode=more?url=)(s/$SET(#=https://)|(http(s|)://)\#|(^(^[^/]++.))$SET(#=http://))(\#))$SET(9=$UESC(\@))$JUMP(http://b.hatena.ne.jp/viewer?entry=$ESC(\9)) ($OHDR(Referer:http://b.hatena.ne.jp/viewer\?))$URL((http://b.hatena.ne.jp/entry/*)\0)$SET(9=$UESC(\0))$JUMP(http://b.hatena.ne.jp/viewer?entry=$ESC(\9))
下の行はメタブのためのmatch。タイトル下のブクマ数カウンターをクリックするとメタブページへ飛ぶようになる。不要ならばコメントアウト。
不具合があればどこかでid:Falkyをidコールするか@Sizukenにmentionを飛ばすかすると直るかも。
UIの好き嫌いが分かれてる感じですが、好き放題CSSを流し込んで左ペインさんに消えていただいたり、jsいじくってインラインプレビューを無効化したり、ちょこちょこいじってやるとそこそこ快適なブコメビューワになりますよ。新UIよりはずいぶんマシな感じですね。http://img.ly/system/uploads/000/993/748/original_PrtSc_000114.png
新アップローダがかなりドイヒーなので転載。http://www42.tok2.com/home/proxo/4.html
＜＜＜ URLControlフィルタ ＞＞＞ これはURLを扱うヘッダフィルタを１つにまとめるフィルタです。 ime.nuを飛ばしたり、他のサイトにジャンプさせたりと、指定の 仕方次第で様々なことが実現出来ます。 バージョン4.5以上推奨。 4.4以下で動くかは不明。（バージョンアップ推奨） （インストール方法） １、オミトロンフォルダ内のListsフォルダの中に URLControl.txt という テキストファイルを作る。 ２、このテキストファイルを 設定、BlockFile、追加 から URLControl と いう名前でオミトロンに登録する。 ３、下のヘッダフィルタをオミトロンに追加する。 範囲選択で下のフィルタを選択、コピー、ファイル、設定フィルタの併合、 クリップボードからデータを併合、ファイル、デフォルトの設定に保存。 ----------------------- [HTTP headers] In = FALSE Out = TRUE Key = "URL: URLControl (Out)" Match = "$LST(URLControl)" ----------------------- ４ URLControl.txt にURLとその処理方法を登録すれば完成。 （ URLControl.txt の記述例 ） 書き方は $URL(http://付きのURL)行いたい処理 という感じです。 例、 # ヤフー上のページにアクセスしようとしたらgoogleのトップページに飛ばす。 $URL(http://www.yahoo.co.jp/)$JUMP(http://www.google.co.jp/) #------------------------- URLControl.txt ------------------------- # NOADDURL # 先頭に # がある行は無視されます。 # 2chでimeの広告ページを踏まずに直接リンク先に行く。 $URL(([^:]+:/+)\0(ime.(nu|st)/|pinktower.com/)(\1))$JUMP(\0\1) # したらばで、広告ページを踏まずに直接リンク先に行く。 $URL(http://jbbs.shitaraba.com/bbs/link.cgi\?url=\0)$JUMP(\0) # Livedoor ブログ検索 $URL(http://sf.livedoor.com/show\?blog_url=([^&]+)\0)$JUMP(\0) # 旧tripodにアクセスしようとしてたら移転先のinfoseekに飛ばす。（２種類） $URL(([^:]+:/+)\0(cgi|members).tripod.co.jp/([^/]+)\1\2)$JUMP(\0\1.at.infoseek.co.jp\2) $URL(([^:]+:/+)\0([^/]++.|)\1tripod.co.jp/)$JUMP(\0\1at.infoseek.co.jp\p\q\a) # Proxomitron-Jでウェブフィルタを無効にする。 $URL(http://www.pluto.dti.ne.jp/~tengu/proxomitron/)$FILTER(False) # Proxomitron User's Wikiでウェブフィルタを無効にする。 $URL(http://abc.s65.xrea.com/prox/wiki/)$FILTER(False) ### 以下はコメントアウトして無効になっています。 ### 有効にしたい場合はコード行の先頭の # を消して下さい。 # local.ptron/以下に接続するときはWEBフィルタを無効にする。 # Bypassリストから local.ptron/ を消してこれを使えば # local.ptron/ にもヘッダフィルタが使えます。 #$URL(http://local.ptron/)$FILTER(False) # アクセスするときにキーボードのSキーを押していたらページのソースを表示する。 #$KEYCHK(S)$URL(([^:]+:/+)\0\1)$RDIR(\0\xsrc..bypass..\1) # アクセスするときにキーボードのDキーを押していたらデバックモードでソースを表示する。 #$KEYCHK(D)$URL(([^:]+:/+)\0\1)$RDIR(\0\xdbug..\1) # pya! で「18歳以上ですか？ はい、いいえ」ページをスキップ。 #$URL(http://pya.cc/pyaimg/han.php\?han=\0)$JUMP(http://pya.cc/pyaimg/spimg.php?imgid=\0) #------------------------- URLControl.txt ------------------------- ※ \k はマッチ欄では動かないのでこのフィルタでは使えません。 \kを使いたい処理は Kill-a-URL フィルタをご利用下さい。 更新情報 ： 2004/4/14 -> 2006/4/18 リストを更新。
１年に１回くらい趣味でwebサイトを作ったりする独学素人ノンプログラマーです。
仕事はＩＴ系にかすりもしないけど、たまにサイトが作りたくなるんです。
htmlもCSSも知識不足ですが、作成ソフトに頼ればなんとかなります。
そんなレベルで無謀にも「JavaScriptも使いたいな」とか思ったりするわけですよ。
で、たまに「簡単にわかるJavaScript入門」なんてサイトや記事がありますよね。
ああいうのを書いてくださる人に、ちょっと言いたい。
あなた方の想像を絶するほどに、俺のＩＴ系理解能力はゴミクズですよ！
「簡単に分かる入門」にさえ入門できません助けて先生！
と、鼻水をたらしながら泣き出すような底辺レベルのスキルしかないザコであります自分は。
ですが、jQueryと出会い、見よう見まねと思いつきで作ったら、こんなんできました。
jQueryってやつを使えば、ド素人にもこんなものが作れるんですね。
用語とかあんまり使わずに、中高生でも読めるレベルで語ります。
web制作にくわしくない方にも「どうなってるのか？」って雰囲気は伝わるかと思います。
技術はないけど、人とは違ったwebサイトを作りたいって方、jQueryマジオススメです！
きちんと勉強されてる方からすれば失笑ものの内容かもしれませんが、ご容赦を。
よくある「入門」すら難しく感じる自分のような方々に届けるつもりで書きます。
くわしい方は、間違いなどがあれば温かくご指摘いただければ幸いです。
あと、「知識不足の人間はこんな思考をしてるのか」という参考になればうれしいです。
前置きが長くなりましたが、それではサイトで使用した４つのjQueryを説明します。
プログラマーさんたちが作った高性能なjQueryのコードなんですが、このプラグインってのが超便利なんです。
使い方は、すでに作られているコードをコピーして、ちょっとのアレンジするだけ！
昔、jQueryの知識がほぼゼロだったころ、このプラグインを知りました。
で、俺も「カッコいいプラグインが使いてええ！」と考えて試しに使ってみたわけです。
けどまあ、プロが作ったコードを、知識ほぼゼロで動かそうなんて甘すぎですよね。
でも、あんまり深く考えずに、貼りつけて動かしてみたところ――
あっけないほど簡単に動きました。
それがサイト内の、パッケージ画像にマウスを合わせると大きくなる部分です。
プラグイン「Bubbleup」
紹介記事１ マウスオーバーを気持ち良くするjQueryプラグイン「Bubbleup」 | Web活メモ帳
紹介記事２ JavaScript + Ajax 実践サンプル集 - jQueryのbubbleupプラグインでアイコンを拡大する
配布元（英語）BubbleUp jQuery Plugin to Spice Up Your Menu | AEXT.NET MAGAZINE
ネット上にはこういうのがいっぱいあるんで、ぜひいろいろ眺めてくださいませ。
こういうの眺めても、「どうせこんなの使えないし」と思えますよね。
でも、「これがコピペで使えるのか！」と思えば楽しくなってきません？
このプラグインってのを使いこなすには、htmlとCSSの知識が必要です。
ですが逆に言えば、それと切り貼りアレンジだけで、高性能のjQueryが使えるわけです。最高ですぜ。
プラグインを貼ってカッコよく動いたんで、
と考え、最初に作った自作のjQuery部分が、サイトの表紙です。
世の中には、JavaScriptを有効にしていない人がいます。
たとえば、決して私ではありませんが、エロサイトで出る変な広告表示をさけるため、それを切っている人もいます。
で、頻繁にエロサイトに通いすぎて、切ったままなのを忘れて普段のサイトを巡ると、たまに表示がおかしくなる。
で、そんな人のために「JavaScriptを有効にしてください」と書いた表紙をつけたわけです。
ですが、jQueryはまだよく分かってなかったんで、「入門」のサイトを眺めてました。
で、いくつか読んでみても、やっぱりすぐには分からん……。
でもね、そういうとこには、「練習用サンプル」ってのがあるんですよね。
練習台で「ボタンをクリックすると画像が非表示になる」みたいなのがあったんで――
みなさま、いかがでしょ？
サイトのjQueryは、「画像をクリックすると画像が非表示になる」とアレンジしています。
最初に現れる画像をクリックすると、画像が消えて下の画面が現れましたでしょうか？
（JavaScriptを切っていると動きませんのでご注意を）
この表紙は１枚の大きなjpg画像で、それをクリックすると消えるようになってます。
よく分からんまま見よう見まねで貼りつけて動かしただけなんですが、こ、こいつ、動きます！
・５分ほどのスライド。最初見たときは知識不足で理解不能だった。
・初心者の神・西畑一馬様の入門講座。jQueryの雰囲気が分かる！
なお、「はじめてのjQuery」を見たのが、このドラクエサイトを作るきっかけでした。
黒い画面に浮かぶスライドを見て、「ドラクエの画面っぽい」とひらめいたのです。
いろんなjQueryのサイトを見てパクれる……いや、参考になるのを探すのは面白いかと思います。
うちのサイトを見て、「懐かしのゲームブック風サイトを作りたい！」とかひらめいてください。
個人的に楽しみたいので、ホントぜひどうか誰かひらめいてください！
で、簡単に動くのを見て、jQueryのすごさを改めて思い知り、きちんと勉強しようと考えました。
そこで助けられたのが、jQuery初心者の救世主「西畑一馬」さんの記事です。
なお、本格的に勉強しようという人は、入門の「速習講座」より、
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門
これも同じく西畑さんの記事なのですが、こちらは量が膨大にあります。
速習講座では軽く流された部分も、一個ずつ丁寧に解説されています。
というか、西畑さんは本を書いてはるので、それを買いましょう（布教）。
ここは入門によく書かれる「アコーディオンパネル」をアレンジして作りました。
アコーディオンのように開いたり閉じたりするアニメーションでの演出です。
jQueryは、簡単にいろんなアニメーション効果がつきます。これが楽しんです。
そこから３種類を紹介すると、
自分のサイトの「すすむ」「もどる」で使っているのは、スライドアニメーションです。
＜「すすむ」の仕組み＞
「すすむ」を押すと、表示部分が上に隠れて消え、次が表示されます。
という変な動きをしています。
たぶんもっと簡単な処理ができると思うんですが、自力で考えてやるとこんな感じになりました。
＜「もどる」の仕組み＞
こっちは簡単。
クリックしたら、表示部分の前の部分がスライドして現れるだけです。
けど、ちょっと苦戦して勉強するところがあるのもまたよいです。
htmlとかCSSとかからすると、jQueryはなんか信じられないくらい大量のことができます！
たぶん、jQueryの元になってるJavaScriptがすごいんでしょうね。
わずかに勉強して改めて、使いこなしているプログラマーのすごさを思い知りました。
で、順調に進んでいたサイト作成の最後で壁になったのが、こいつです。
１つめの、「マウスを合わせたときの動作」は「hover」というものを使っています。
なんか難しいのが出てきましたが、実はこれも入門講座の例をパ、参考にしました。
上で挙げた、「はじめてのjQuery」に出てきた「hover」の使い方の例です。コピー万歳。
でも、いきなり「hover」とか言われても意味が分からん人も多いですよね。
なので、どんな感じで動いているか、「ふーん」とイメージだけ見ておいてください。
ということをやっています。
（なお、パッケージ画像をクリックしたときも同じ移動を使っています）
処理の内容としては、たとえば「ドラクエ１・１話」の項目に飛ぶ場合、
（実際に見えるのは、２のスライドして出てくるところだけ）
が、なぜかここでエラーが。
「ドラクエ１・１話」に飛んだ後、「すすむ」がうまく使えない……。
まるで「次が存在しない」みたいに進まなくなってしまうんです。
ぶっちゃけると、ここは今でも原因が分かりません。
で、理屈が分からないから、思いつく方法を手当たり次第試してみました。
その中で成功したのが、「次が存在しないなら存在させてしまえ」というものです。
何を言っているか分からないと思いますが、大丈夫、俺も分かりません。
いちおう処理としては、
1・「ドラクエ１・１話」の前の部分すべてをスライドさせて消す。
1.5・「ドラクエ１・１話」の後ろの部分すべてをスライドさせて出す。
（実際に見えるのは、２のスライドして出てくるところだけ）
と、１．５を入れたものです。
自分でもなんで成功したのかはよく分かりませんが、きちんと表示はされています。
よく分からないなりにも動いてしまったのは、きっとjQueryのパワーだと勝手に納得しておきます。
（ここはきちんと知識のある人に見せるのが恥ずかしい内容ですね。変なコードですみません）
つまるところもありましたが、以上がjQueryでの処理です。
たまの休日に作成する趣味レベルのサイトとして、自分でもすごく満足です！
jQueryは何がすごいかって、これ、めっちゃ楽しいんですよ。
・プラグインをコピペするだけで見違えるように、サイトが動く。
・ちょっと表現を覚えるだけで、表現にアニメーションが加わる。
・さらに研究すればするほど、いろんなことができるようになる。
今までJavaScriptとか、独学素人なんで、なかなか勉強する気が出ませんでした。
しかも、「関数や引数がどうたらで、まずは足し算をアラート表示」とか、あまりやる気が出ません。
でも、jQueryは勉強の成果がすぐにめっちゃ分かりやすく出ます。
たぶん、自分にとって一番効果が大きかったのは、簡単さよりも便利さよりも、「やる気が出る」ってことでした。
それは「すすむ」の部分。
「最後のページで『すすむ』をクリックすると、始めに戻る」という機能です。
ここは、jQuery独自の機能を使ったわけではありません。
JavaScriptの「if構文」を勉強して作りました。
jQueryもJavaScriptの一種なんで、こういう構文が使えるんですよね。
どんな感じの処理かを説明すると、
という、単純なものです。
単純だけど、初めてのJavaScriptの構文で、自分には大きな一歩です。
今まで進むことができなかった、本当に大きな一歩を、自然と踏み出せていたのです。
届けたいので、もう一度書きます。
今はまだ技術はないけど、魅力あるwebを作る力を身につけたい方、jQueryマジオススメです！
自分も取れる時間は少ないなりに、楽しみながら少しずつ進歩していきたいと思います。
もともとゲームと機械系が大好きだった私はすぐさまPCに飛びついた。
”インターネット”という言葉は学校で習っていたから、すぐに接続したくなった。
当時は光回線やADSLなんてもちろん無くて電話回線から直接繋ぐダイアルアップ方式。
全く未知の機械と、わけのわからない説明書を相手に何日もかけてやっとインターネットに接続できて
自分がWEBデザイナーを目指したのは思えばこの頃からかもしれない。
中学２年の時にインターネットに初めて触れた私は、その翌年初めての携帯を持った。
今の携帯電話のように、定額じゃないから毎月のバイト代はほとんど携帯の料金に消えていった毎日。
それでも、当時ははやってた魔法のあいらんどを見たり、まだこんなに有名じゃなかった携帯小説を読んだり
ネットで得られる色んな情報を見るのが楽しくてやめれなかった。
いつのまにか友達の間でパソコンのことはあいつに聞けば大丈夫。と見られるようになった。
答えるのも全然苦じゃなかったし、むしろこの頃からPCに関わる仕事をしたいと思うようになった。
初めは魔法のあいらんどとかで作っていたけど、物足りなくなってHTMLのテーブルを勉強するようになった。
まだCSSなんて無い時代だから、テーブルで枠組みして形になっていくのが凄く楽しかった。
それから時は過ぎ、WEBデザイナーの夢もあきらめた私はネトゲにはまって画面の向こうの彼に恋をした。
遊びじゃなくて本気で恋をした。
でもその当時周りには”ネットで会った”なんて言えないし、気持ち悪がられる時代の風潮だった。
本気でこう思ってた。
ネットで知り合った事をバカにされるのが辛かった。
時は過ぎ、今までPCさえ触れなかった友人達が”mixi”を初めていた。
この時は正直びっくりした、時代が変わったと強く思った。
そしていま、Twitterが流行ってますますネットコミュニティの加速広まっている。
こんなに嬉しい事は無い。
誰にもバカにされない時代が来たんだ。
TwitterのTLを見ていても、その人個人の持ち味が非常に出ていておもしろい。
ある意味アナログよりネットの方が、その人の人間性や持ち味を出せるんじゃないだろうか。
ネットコミュニケーションを使えば、社会にある色々な問題を解決できるんじゃないだろうか。
私はこの１０年ネットを通じて色んな出会いをしてきたけれど、実際リアルで初対面の人より間違いなくネットで会った方の方が信用できる。
それはたぶん、当たり前だけど”信頼関係が出来上がってる状態”で会うからだと思う。
もちろんアナログも大切だけど、初対面から信頼関係なんて、なかなか築き上げれるものでは無い。
それをあっさり、気の合う仲間を探して人と繋がれる。
何て素敵なことなんだろう。
もっとみんなやればいい。
もっとみんな出会えばいい。
これからもっと加速するネットコミュニティをみんなに使ってほしい。
そんな想いです。
ネットは好きだけど今までどこか後ろめたかった自分には、サヨナラして明日の誕生日に備えたいと思います。
HTMLはわかるけど、サーバーサイドはお遊びでphpを触ったぐらいだったので、会員制でデータをためこむサイト作りに初めて挑戦した。
今回重視したのは、「いかに個人情報をお漏らししないようにして、万が一漏らしても被害を少なくするか」ということ。
世の中、有償サービスでもパスワードを平文で保存してるサービスが意外と多いらしいので、流出した時のリスクを少しでも減らせる対策として書きます。
サーバー：ロケットネットのキャンペーンにでレンタルサーバ年１０００円ポッキリプラン クライアント側の処理：HTML+CSS+jQuery（とプラグインもろもろ） サーバ側の処理：PHP Webサーバー：Apache データベース：MySQL
俺も巻き込まれたところでは、サミータウンがメールアドレスとパスワードセットでお漏らししてお詫びに１ヶ月無料なにそれこわい。
サミータウンだけならまだいいけど、メアドとパスワードを他のサービスで共通化して使ってる情弱なので、
共通化してメアドとパスワードをどこかのサービスが一箇所でも漏らすと、ヤフオクID乗っ取り事件みたいなことになる。
http://internet.watch.impress.co.jp/cda/news/2008/09/26/20967.html
俺だってできれば人様のメールアドレスとパスワードとか預かりたくない。
万が一、肉親のメールドレスを発見してパスワードにrapemeとか入ってたら明日からどういう顔すればいいかわからない。
ググってみてもどこにも情報のってない。うーん困った。ダメもとで「個人情報ってどうやって保存したらいいんだろう。。。」
って、twitterでつぶやいたら、「住所とかは可逆暗号化でいいけど、パスワードはハッシュで不可逆化しないとだめだよ！」
「住所とかは可逆暗号化でいいけど、パスワードはハッシュで不可逆化しないとだめだよ！」
何のことかわからなったので、調べてみると、
・ハッシュ＝ハッシュ値を使った、元のデータに戻せない暗号化方式
うーん。。。よくわからん。。。
電話番号とか住所は、第三者が使用する情報なので、可逆が必要。パスワードは、認証にしか使わないので、
ハッシュ値の結果が一致すれば元のデータがわからなくてもOK、という方式なのでこういった暗号の使い分けをする。
●可逆暗号のイメージ（もとにもどせる） 暗号化キーは開発者が指定する。 090-xxxx-xxxx →（暗号化）→ !'&%($% →（復号化）→ 090-xxxx-xxxx ●ハッシュのイメージ（もとにもどせない） 登録password（DBに保存）→（ハッシュ値抽出）→!"$#'$#=" ログインpassword →（ハッシュ値抽出）→!"$#'$#=" ※二つのハッシュ値が合っていれば、パスワード一致として認証する。
今回はMySQLの関数で実現した。encode関数で暗号化して、decode関数でもとに戻す。
例えばtel_noという項目だけあるテーブルがあるとすると、
//データベースに保存する時 insert into テーブル名 (tel_no) values (encode(tel_no,'暗号化キー')); //データベースから取得する時 select decode(tel_no,'暗号化キー') from テーブル名;
これで、データベース格納時は暗号化（バイナリ化）されて、データベースから取り出してHTML表示する時に復号化はされる。
＜ユーザ登録時＞
$password=（フォームから取得） $hash=hash('sha512',$password) //ユーザ登録時は、ここで生成した$hashをデータベースにぶっこむ。
ユーザ認証時は、入力されたパスワードと、データベースのパスワードが一致するかチェック。
//フォームから入力されたパスワード $input_password=（フォームから取得） $input_hash=hash('sha512',$input_password); //MySQLに保存されたパスワードを取得（略） $db_hash==（データベースから取得） //判定 if($input_hash==$db_hash) echo 'ログインしますよ！'; //ここにログイン処理を書く else die('メアドとパスワードがあってないよ！');
これでもしSQLインジェクションとかでデータが流出しても、ハッシュ暗号のパスワードに関してはまず解析されないはず。。。
可逆暗号のデータもphp側の暗号化キーが盗まれない限りバレない。。。はず。。。
何でもかんでも暗号化するとコードが煩雑になるし、パフォーマンスにも影響でそうなので、
住所データの都道府県とか、漏れても良いような情報は暗号化しませんでした！！
個人情報保護法 2条による定義 「個人情報」とは、生存する個人に関する情報であって、当該情報に含まれる氏名、生年月日その他の記述等により特定の個人を識別することができるもの（他の情報と容易に照合することができ、それにより特定の個人を識別することができることとなるものを含む。）をいう。
これで、もし漏れても、俺、ウンコ漏らして臭いけど、パンツから出てないからいいよね？というレベルにはなった。はず。
万が一漏れても大丈夫！と書いたけど、そもそも漏らすなというお話になる。色々調べた結果、以下の対策をほどこした。
・当初jQuery側でSQL組み立ててPHPに渡してたので、これだと任意のSQLが実行できて漏らし放題なのでやめる。
・GETとかPOSTでDBに渡すパラメータを扱ってる場合、ちゃんとエスケープする。
例えばログイン認証するPHPで、GETメソッドでフォームからデータを取得するような場合、
$id=$_GET['id'] $pwd=$_GET['pwd'] $sql="select * from ユーザーテーブル where uid='$id' and pwd='$pwd'
とかやってると、login.php?id=admin'&pwd=' OR '1'='1とかパラメータを渡されるとあら不思議！
select *from ユーザテーブル where uid='root' and pwd='' or 1=1
で、誰でもログイン出来ちゃう！ので、mysql_real_escape_stringでエスケープしたり、渡されたパラメータが想定した値かどうか（例えば数値かどうか、とか）のチェックをいれたりする。
・保存するデータにタグやJavascriptを埋め込まれないように、保存されたデータを出力する場合はPHP側でhtmlspecialchars関数使ってエスケープするようにする。
こんな感じでお漏らし対策をした。間違いがあったら教えて欲しい。
ちなみに出来上がったサイトはこれ。
・コメントが３行なのを一行に戻す。
・コメントがない行を消す
.nocomment{display:none;}
.bookmark-list span.comment { display: inline; }
.bookmark-list img.profile-image { width:18px; height:18px; }
■参考
http://hatena.g.hatena.ne.jp/hatenabookmark/20110405/1301981564
http://hibari.2ch.net/test/read.cgi/esite/1300432939/23-26
23 ：名無しさん＠お腹いっぱい。：2011/04/06(水) 11:48:38.71
/*サイドバー非表示*/
#container .curvebox-body { padding:20px; }
#sidebar { display:none; }
.bookmark-list li { padding-left: 20px; }
.bookmark-list img.profile-image { width:18px; height:18px; }
.bookmark-list span.comment { display: inline; }
/*ブクマ用フォーム非表示*/
#add-bookmark-container { display:none; }
/*人気コメント非表示*/
#scored-bokkmarks { display:none; }
https://gist.github.com/903132 を組み合わせて
ブクマ追加は[B!]アイコンからにするとこれまでに近い表示に。
26 ：名無しさん＠お腹いっぱい。：2011/04/06(水) 11:59:27.60
#scored-bookmarks { display:none; }
PHPerの問題点は、視野が狭いこと。典型的には以下のような悪癖を持つ。
何も知らないからPHPを愛せるんだよ、PHPerは。だからまず、HTML、CSS、JavaScript、SQLを覚えろ。次に、Javaに移行しろ。そんなに難しくないよ、Java。特に大量にコードを書けるPHPerは、速度が出てライブラリ化が容易なJavaの方が向いている。今はVPSがあるので、小規模案件でも問題ない。
15年間ほどPHPはインターネットを支えてきたが、そろそろ設計の脆さが問題になっている。PHP 6の開発が振り出しに戻ったのは、不幸な事故ではない。ウェブで仕事をしていれば、PHPとJavaで共通する知識も多い。PHPerはJavaを覚えてPHPとさよならしろ。そして恥ずかしい悪癖を直すべきだ。
