ぼくはまちちゃん！ こんにちはこんにちは！！ 2020-01-16T22:49:17+09:00 Hamachiya2 Hatena::Blog hatenablog://blog/13208692334729888519 寒い日のPC作業にも最適なゲーミング手袋 hatenablog://entry/26006613498601422 2020-01-16T22:49:17+09:00 2024-01-29T16:46:53+09:00 こんにちはこんにちは！！寒い…！冬ですね！ ぼくは最近SteamのPCゲームをよくプレイしているんですが、ゲーミングPCを起動している間は、排熱のせいか部屋はちょっと暖かいんですよね。 だけど、どうしても手足などの末端だけは冷えてしまって困ります。足はモコモコのスリッパや、ミニ電気カーペットなど色々と対策できるんですけど、問題は手の方で、手がかじかんでしまうとFPSゲームとかで照準が全然合わせられなくて大変…！超負ける…死…！ この「ゲーム中、手だけ寒い問題」について、ぼくずっと悩んでたんですよ。 手袋をつけてしまうと操作性が悪くなって、細かい照準合わせができないし、キーボード入力もままならな… <p>こんにちはこんにちは！！<br />寒い…！冬ですね！</p> <p>ぼくは最近SteamのPCゲームをよくプレイしているんですが、<br />ゲーミングPCを起動している間は、排熱のせいか部屋はちょっと暖かいんですよね。</p> <p>だけど、どうしても手足などの末端だけは冷えてしまって困ります。<br />足はモコモコのスリッパや、ミニ電気カーペットなど色々と対策できるんですけど、問題は手の方で、手がかじかんでしまうとFPSゲームとかで照準が全然合わせられなくて大変…！超負ける…死…！</p> <p>この「ゲーム中、手だけ寒い問題」について、<br />ぼくずっと悩んでたんですよ。</p> <p>手袋をつけてしまうと操作性が悪くなって、細かい照準合わせができないし、キーボード入力もままならない。<br />指ぬきグローブなんかも考えましたが、やはり違和感あるんですよね。手の平が覆われるからでしょうか。<br />あとはUSBで暖かくしてくれる手袋とか…（ケーブル邪魔そう）</p> <p> </p> <p>でもとうとう発見しました。ゲーミングな手袋を…！<br />これです。</p> <p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20200116/20200116221841.jpg" alt="ゲーミング手袋（手の甲）" title="ゲーミング手袋（手の甲）" class="hatena-fotolife" itemprop="image" width="256" /><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20200116/20200116221845.jpg" alt="ゲーミング手袋（手の平）" title="ゲーミング手袋（手の平）" class="hatena-fotolife" itemprop="image" width="269" /></p> <p><a target="_blank" href="https://www.amazon.co.jp/gp/product/B010UOARP8?&amp;_encoding=UTF8&amp;tag=esorasea-22&amp;linkCode=ur2&amp;linkId=824ce0df082568ebe0e01761a65edb69&amp;camp=247&amp;creative=1211" rel="nofollow">[アシックス] バスケットボールウエア 手甲</a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=esorasea-22&amp;l=ur2&amp;o=9" width="1" height="1" border="0" alt="" style="border: none !important; margin: 0px !important;" /></p> <p>ゲーミング手袋って書きましたが、<br />本当はバスケなどのスポーツの時に使うものらしいです。</p> <p> </p> <p><a target="_blank" rel="nofollow" href="https://amzn.to/42kWWDA"><img border="0" src="https://m.media-amazon.com/images/W/MEDIAX_849526-T2/images/I/91jgJ-Ev-OL._AC_SX400_.jpg" alt="[UNDER ARMOUR] ハンドウォーマー" /></a><br />アシックスの他に<a target="_blank" rel="nofollow" href="https://amzn.to/42kWWDA">アンダーアーマー</a>からも出ているようです。</p> <p> </p> <p>これすごい。<br />指そして手の平が完全に露出してるから、マウス操作もキーボード操作もバッチリ…！<br />それなのに、しっかり防寒されていて手が温かい！</p> <p>実際にこれをつけてゲームしたり文章を書いたりしてみましたが、これはいい！<br />ゲームしてても手が寒くないよ！<br />ぼくが求めていたものだ！！！</p> <p>そんなわけで、ゲームやPC作業をしてる時、手だけ寒いな～なんて人にはとても良いかもしれません。<br />外でスマホを触る時にも良さそうですね。おすすめです。</p> <p> </p> <p>ただし紐が指の根元にかかるので最初は違和感あるかも？<br />ぼくもそうでした。<br /><br /></p> <p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20200116/20200116221848.jpg" alt="ゲーミング手袋の紐" title="ゲーミング手袋の紐" class="hatena-fotolife" itemprop="image" width="228" /></p> <p><br />慣れるまでは、写真のように薬指だけに紐をかけても充分温かいし、ほとんどキー入力の防げにもなりません。</p> <p>なんなら紐を全くかけなくても手の甲は温かいですよ！</p> <p> </p> <p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20200116/20200116221852.jpg" alt="Microsoft Pro IntelliMouse" title="Microsoft Pro IntelliMouse" class="hatena-fotolife" itemprop="image" width="319" /></p> <p><br />（おまけ）写真は買いかえたばかりの<a target="_blank" href="https://www.amazon.co.jp/dp/B07V47VCVW?&amp;_encoding=UTF8&amp;tag=esorasea-22&amp;linkCode=ur2&amp;linkId=bf54651ce7a4eb6122a5bf3f2f26dc50&amp;camp=247&amp;creative=1211" rel="nofollow">マイクロソフト製マウス</a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=esorasea-22&amp;l=ur2&amp;o=9" width="1" height="1" border="0" alt="" style="border: none !important; margin: 0px !important;" />。<br />往年のゲーマー御用達マウス IntelliMouse Explorer 3.0 が現代技術で蘇ったモデルです。<br />RAZERゲーミングマウスからの乗り換えなんですがゲーミング専用マウスよりも操作しやすいです。</p> Hamachiya2 Googleスプレッドシートの変更履歴をGoogleスプレッドシートに書き出す。ついでにSlackにも通知する hatenablog://entry/26003855888872757 2016-01-25T00:00:00+09:00 2016-01-25T00:00:00+09:00 こんにちはこんにちは！！ Googleスプレッドシート使ってますか！ 複数の人がブラウザ上で同時に閲覧・編集できるエクセルです！ これ超便利ですよね。 (パワーポイントみたいなやつも便利ですね！) 最近はエクセルの代わりに これをチーム向けの情報共有ツールとして使ってる人も多いんじゃないでしょうか。 これさえあればもう、 バグ管理リスト.xls バグ管理リスト最新版.xls バグ管理リスト5月12æ—¥ver.xls バグ管理リスト最新版のコピー.xls— はまちや２ (@Hamachiya2) 2010, 5月 12 こんなことにもならなくて済みますよね。ああ良かった！ そんなGoogleスプレ… <p> こんにちはこんにちは！！ </p> <p> <a href="https://www.google.co.jp/intl/ja/sheets/about/">Googleスプレッドシート</a>使ってますか！<br> 複数の人がブラウザ上で同時に閲覧・編集できるエクセルです！<br> これ超便利ですよね。<br> (<a href="https://www.google.co.jp/intl/ja/slides/about/">パワーポイントみたいなやつ</a>も便利ですね！) </p> <p> 最近はエクセルの代わりに<br> これをチーム向けの情報共有ツールとして使ってる人も多いんじゃないでしょうか。 </p> <p> これさえあればもう、 </p> <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">バグ管理リスト.xls バグ管理リスト最新版.xls バグ管理リスト5月12æ—¥ver.xls バグ管理リスト最新版のコピー.xls</p>&mdash; はまちや２ (@Hamachiya2) <a href="https://twitter.com/Hamachiya2/status/13824352632">2010, 5月 12</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <p> こんなことにもならなくて済みますよね。ああ良かった！ </p> <p> そんなGoogleスプレッドシートなんですが、欠点もあって…、<br> <b>変更履歴が超見づらい＞＜</b> んですよね…。<br> シートが複数あるようなものだと、一体どこを変更したのやら……といった感じです。 </p> <p> そこで、タイトルにあるように、<br> Googleスプレッドシートの変更履歴をGoogleスプレッドシート自身に書き出す仕組み<br> というものを作ってみたのでメモしておきますね。 </p> <p> <img src="http://f.st-hatena.com/images/fotolife/H/Hamachiya2/20160125/20160125213504.png" alt="ログのサンプル"><br> こんな感じで誰かが何かを変更するたびに、変更履歴用のシートにログがどんどん自動的に追記されていくようになります。 </p><p> (やりかた) </p> <p> まずは任意のスプレッドシートに「Log」という名前の新規シートを作ります。 </p> <p> <img src="http://f.st-hatena.com/images/fotolife/H/Hamachiya2/20160125/20160125144313.png" alt="Logシート" ><br> このシートに変更履歴が書き出されていきます。 </p> <p> 次にツールメニューから「スクリプトエディタ」を選んで </p> <p> <img src="http://f.st-hatena.com/images/fotolife/H/Hamachiya2/20160125/20160125144312.png" alt="スクリプトエディタ"> </p> <p> 元から書いてある myFunction を消して、<br> そこに以下のコードをコピペします。 </p> <pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synIdentifier">function</span> onMyEdit(e) <span class="synIdentifier">{</span> <span class="synComment">//Log保存用シートの名前</span> <span class="synIdentifier">var</span> logSheetName = <span class="synConstant">'Log'</span>; <span class="synComment">// スプレッドシート</span> <span class="synIdentifier">var</span> ss = SpreadsheetApp.getActiveSpreadsheet(); <span class="synComment">// スプレッドシート名</span> <span class="synIdentifier">var</span> ssName = ss.getName(); <span class="synComment">// 選択シート</span> <span class="synIdentifier">var</span> sheet = ss.getActiveSheet(); <span class="synComment">// 選択シート名</span> <span class="synIdentifier">var</span> sheetName = sheet.getName(); <span class="synComment">// Logシートなら何もしない</span> <span class="synStatement">if</span> (sheetName == logSheetName) <span class="synIdentifier">{</span> <span class="synStatement">return</span>; <span class="synIdentifier">}</span> <span class="synComment">// 選択セル範囲</span> <span class="synIdentifier">var</span> range = sheet.getActiveRange(); <span class="synComment">// セル範囲の行番号</span> <span class="synIdentifier">var</span> rowIndex = range.getRowIndex(); <span class="synComment">// セル範囲の列番号</span> <span class="synIdentifier">var</span> colIndex = range.getColumnIndex(); <span class="synComment">// getRange(始点行, 始点列, 取得する行数, 取得する列数)</span> <span class="synIdentifier">var</span> v = sheet.getRange(rowIndex, colIndex, 1, 1).getValue(); <span class="synComment">//内容が空だ</span> <span class="synStatement">if</span> (v == <span class="synConstant">''</span>) <span class="synIdentifier">{</span> v = <span class="synConstant">'※削除かな？'</span>; <span class="synIdentifier">}</span> <span class="synComment">//更新者情報は法人向けGoogle Appsの同一ドメインでないと取得できないかも？ふつうの @gmail.com だと無理かも？</span> <span class="synComment">//https://productforums.google.com/forum/#!topic/docs/5D23Os_NIAc</span> <span class="synComment">//更新者のメールアドレス</span> <span class="synIdentifier">var</span> email = Session.getActiveUser().getEmail(); <span class="synComment">//ここからLogシートに書き込み</span> <span class="synComment">//Log保存用シート</span> <span class="synIdentifier">var</span> logSheet = ss.getSheetByName(logSheetName); <span class="synComment">//引数で指定した行の前の行に1行追加</span> logSheet.insertRowBefore(1); <span class="synComment">//日付</span> logSheet.getRange(1, 1).setNumberFormat(<span class="synConstant">'yyyy/mm/dd(ddd)'</span>); logSheet.getRange(1, 1).setValue(<span class="synStatement">new</span> <span class="synType">Date</span>()); <span class="synComment">//時刻</span> logSheet.getRange(1, 2).setNumberFormat(<span class="synConstant">'h:mm:ss'</span>); logSheet.getRange(1, 2).setValue(<span class="synStatement">new</span> <span class="synType">Date</span>()); <span class="synComment">//更新者</span> logSheet.getRange(1, 3).setValue(email); <span class="synComment">//シート名</span> logSheet.getRange(1, 4).setValue(sheetName); <span class="synComment">//行番号</span> logSheet.getRange(1, 5).setValue(rowIndex); <span class="synComment">//列番号</span> logSheet.getRange(1, 6).setValue(colIndex); <span class="synComment">//変更セルの内容(Stringフォーマットにする)</span> logSheet.getRange(1, 7).setNumberFormat(<span class="synConstant">'@'</span>); logSheet.getRange(1, 7).setValue(v); <span class="synComment">/*</span> <span class="synComment"> //Slackに通知する場合</span> <span class="synComment"> //tokenを取得(ボタン押す)→ https://api.slack.com/web</span> <span class="synComment"> //channels:id取得(ボタン押す)→ https://api.slack.com/methods/channels.list/test</span> <span class="synComment"> //先に更新通知用チャンネルを作っておいた方が良いかも？</span> <span class="synComment"> var token = 'ここにtoken';</span> <span class="synComment"> var channel = 'ここにchannelId';</span> <span class="synComment"> var userName = 'Spreadsheets'; // Slack投稿時に使われる好きな名前</span> <span class="synComment"> //Slackに通知するテキスト</span> <span class="synComment"> var text = '「'+sheetName + '」シート変更: ' + email + ' [' + rowIndex + ',' + colIndex + '] ' + v;</span> <span class="synComment"> UrlFetchApp.fetch('https://slack.com/api/chat.postMessage', {</span> <span class="synComment"> method: 'post',</span> <span class="synComment"> payload: {</span> <span class="synComment"> token: token,</span> <span class="synComment"> channel: channel,</span> <span class="synComment"> username: userName,</span> <span class="synComment"> text: text</span> <span class="synComment"> }</span> <span class="synComment"> });</span> <span class="synComment"> //実行トランスクリプトに「実行に失敗: fetch を呼び出す権限がありません」</span> <span class="synComment"> //と出た場合、メニューから実行して承認してやる必要あり？</span> <span class="synComment"> //こちらもやはりGoogle Apps for work でないとだめかも？</span> <span class="synComment"> //https://code.google.com/p/google-apps-script-issues/issues/detail?id=677</span> <span class="synComment">*/</span> <span class="synIdentifier">}</span> </pre><p> ファイル→保存して…<br> </p> <p> <img src="http://f.st-hatena.com/images/fotolife/H/Hamachiya2/20160125/20160125172702.png" alt="onMyEditを実行"> </p> <p> 念の為に一度、実行メニューから、「onMyEdit」を選んで実行しておきましょう。 </p> <p> 最後にトリガーを設定します。<br> リソースメニュー → 現在のプロジェクトのトリガー → onMyEdit </p> <p> <img src="http://f.st-hatena.com/images/fotolife/H/Hamachiya2/20160125/20160125172226.png" alt="トリガーの設定"> </p> <p> イベントに「スプレッドシートから」、「編集時」と設定して保存します。<br> これでできあがり。 </p> <p> 元のシートにもどって、Log以外のシートに何か書いてみます。<br> 変更箇所がちゃんとLogシートに自動記録されていれば成功です。 </p> <p> <img src="http://f.st-hatena.com/images/fotolife/H/Hamachiya2/20160125/20160125144314.png" alt="Logシートに変更履歴が書き出される"> </p> <p> 左から、日付、時刻、更新者、シート名、行、列、変更後の内容になっています。<br> 誰かがシートを編集するたびに、どんどん変更ログが(上に)追記されていきます。 </p> <p> もしうまくいかなければ、スクリプトエディタの表示メニューから<br> 「実行トランスクリプト」を選べばエラーなどが表示されているはずなので、がんばってくださいね。 </p> <p> ただしこれには一つ欠点があって、法人向けGoogle Apps以外の人、<br> つまり普通の「@gmail.com」のユーザーの場合は、<br> セキュリティ上の都合のためか、更新者のメールアドレスだけは取得できないようです。 </p> <p> あと、おまけとしてスプレッドシートが更新されるたびにSlackに通知する仕組みもコードに入れておきました。<br> 試してみたい人は、コメント部分を修正してみてくださいね。 </p> <p> <img src="http://f.st-hatena.com/images/fotolife/H/Hamachiya2/20160125/20160125145942.png" alt="Slackへの通知"> </p> <p> ※ただしこちらも、法人向けのGoogleアカウントでないとうまく動かないようです。 </p> <div class="addBookmarkLink">[<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20160125/spreadsheets">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20160125/spreadsheets" alt="『Googleスプレッドシートの変更履歴をGoogleスプレッドシートに書き出す。ついでにSlackにも通知する』のブックマークコメント"></a>] </div> Hamachiya2 バカな写真がよく炎上している理由 hatenablog://entry/26003855888872761 2013-08-09T00:00:00+09:00 2013-08-09T00:00:00+09:00 こんにちはこんにちは！！ 最近、多いですよね。 バイト先で食品の上に寝そべった写真とかを、 ツイッターで公開して、拡散されて、まとめられて大炎上。 お店は休業、やらかした人はクビ…。 なんで今、そんなことが多発してるのか？ なんてことについて、近頃たくさんのブログで言及されています。 だいたいの皆さんは、 「そういうことは元からよくあった。井戸端会議が可視化されるようになっただけ」 ということを言ってます。 ぼくもそう思う。 じゃあなぜ、そんなにも可視化されるようになったんだろう？ 単純にツイッターが流行ったから？ ツイッターにも書いたけど、こっちにも書いておきますね。 バカな写真がよく炎上し… <p> こんにちはこんにちは！！ </p> <p> 最近、多いですよね。<br> バイト先で食品の上に寝そべった写真とかを、<br> ツイッターで公開して、拡散されて、まとめられて大炎上。<br> お店は休業、やらかした人はクビ…。 </p> <p> なんで今、そんなことが多発してるのか？<br> なんてことについて、近頃たくさんのブログで言及されています。 </p> <p> だいたいの皆さんは、<br> 「そういうことは元からよくあった。井戸端会議が可視化されるようになっただけ」 </p> <p> ということを言ってます。<br> ぼくもそう思う。<br> じゃあなぜ、そんなにも可視化されるようになったんだろう？<br> 単純にツイッターが流行ったから？ </p> <p> <a href="https://twitter.com/Hamachiya2/status/364906190041387008">ツイッターにも書いたけど</a>、こっちにも書いておきますね。 </p> <p> バカな写真がよく炎上している理由：<br> <strong style="color:#f00">スマホで見たとき、ツイッターとかフェイスブックのインターフェイスが、グループチャットに見えるから。</strong> </p> <p> たぶんこれかな、とおもいます。 </p> <p> いまどきのひとは、PCなんて使いません。<br> 昨日までガラケーで、メールとモバゲーやってた人が、買い換えたばかりのスマホでツイッターに入ってくるわけです。<br> ネットのニュースとか、ブログとかもあまり見ない、インターネットを知らない人たちが。 </p> <p> しかも、リアルで知り合いの、隣にいる友達だけをフォローしたりする。<br> するとどうなるか。 </p> <p> そう、<br> <strong style="color:#f00">LINEと見分けがつかない。</strong> </p> <p> これって、むかしからツイッターやってて何百人もフォローしている人には、<br> もう気づきにくい感覚かもしれないけど、<br> <strong style="color:#f00">リアル友達20人だけをフォローしていると、ほんとに内輪だけのグループチャットにしか見えない。</strong> </p> <p> だから他人に、検索される、発見される、問題視される、そして拡散される、なんてことの想像がつかない。<br> たまに他人、たとえば友達の友達のフォロワーに見られたとしても、街で通行人にちょっと見られた程度くらいにしか想像できない。<br> 仕方ないよ。<br> だって、たった１人の通行人のRTが、どれほどの力をもって拡散していくかなんて想像できるわけがないもの。 </p> <p> そしてまさに今、スマホが普及するにしたがって、<br> スマホに最適化したコミュニケーションサービスが増えるにしたがって、<br> 同じような炎上が増える。 次の１年、２年でもっと増えていくのだろうと思う。 </p> <p> じゃあ、どうすれば防げるんだろう？<br> サービスの目立つところに注意書きでも入れる？ むだむだ。 </p> <p> たぶん、これはすべての学校で教育してあげないとダメだと思う。<br> 免許更新の交通事故ビデオ視聴のように。 </p> <p> そもそも「わるいことをしない」なんてことは、いまさらこれ以上、言わなくてもいいよ。<br> それはみんな大昔から教育してるからもういい。 </p> <p> 「うかつなことを書くと、こう死ぬ」っていうことを事例をまじえて若い人に教えていかなきゃいけないと思うけどな。 </p> <p> (おまけ) </p> <blockquote class="twitter-tweet"><p>前にも書いたけどもう一度言うよ。今のツイッターは「この発言をどこかにまとめられたら困る」ことは書かない方がいいね。これは全ての人に言えることだよ。君のTLはたとえ10人しか繋がってなくても「知る人ぞ知る秘密基地」ではない。発言は「自分自身が晒している」のを自覚しないといけない</p>&mdash; はまちや２ (@Hamachiya2) <a href="https://twitter.com/Hamachiya2/statuses/42463660316172288">March 1, 2011</a></blockquote> <script src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <p> (あわせて読みたい関連記事)<br> <strong>・<a href="http://d.hatena.ne.jp/Hamachiya2/20120228/social" class="arrowGR">ネットを利用するときに気をつけたいこと</a></strong><br> <strong>・<a href="http://d.hatena.ne.jp/Hamachiya2/20080313/realname" class="arrowGR">本名バレてもへっちゃら？</a></strong> </p> <div class="addBookmarkLink">[<a class="arrowGR" href="http://b.hatena.ne.jp/entry/s/blog.hamachiya.jp/entry/20130809/flaming">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20130809/flaming" alt="『バカな写真がよく炎上している理由』のブックマークコメント"></a>] </div> Hamachiya2 はてなブックマークのだめなところ hatenablog://entry/26003855888872763 2013-07-08T00:00:00+09:00 2013-07-08T00:00:00+09:00 こんにちはこんにちは！！ はてなブックマークがリニューアルされてから、４ヶ月ほど経ちましたが みなさんはそろそろ慣れましたか！ ぼくはいまだに慣れてません…＞＜ 一覧性が悪いとかそういうのは、他ですでにさんざん言われてるので、ここではあえて触れずにおきます。 が、特に何に慣れないかっていうと、 ぼくはPCで見る時、「マウスのホイールクリックで新タブひらく」というやり方をよくつかうのですが… ふむふむ、読んでみようかな〜 よーし新タブで開いちゃうぞ〜 あっ！ これ、文字と文字のあいだ、行間に、けっこう大きな「すきま」があるんですね。 で、そこをクリックしてしまう。 はてなの皆さんは、MacBoo… <p> こんにちはこんにちは！！<br> <a href="http://b.hatena.ne.jp/">はてなブックマーク</a>がリニューアルされてから、４ヶ月ほど経ちましたが<br> みなさんはそろそろ慣れましたか！ </p> <p> ぼくはいまだに慣れてません…＞＜ </p> <p> 一覧性が悪いとかそういうのは、他ですでにさんざん言われてるので、ここではあえて触れずにおきます。 </p> <p> が、特に何に慣れないかっていうと、<br> ぼくはPCで見る時、「<b>マウスのホイールクリックで新タブひらく</b>」というやり方をよくつかうのですが… </p> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20130708/20130708142102.png" alt="はてなブックマーク" width="386" height="376" style="border:1px solid #999"> <br> <b style="color:#555;margin-top:1em">ふむふむ、読んでみようかな〜</b> </p> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20130708/20130708142101.png" alt="クリックするよ" width="386" height="376" style="border:1px solid #999"> <br> <b style="color:#555;margin-top:1em">よーし新タブで開いちゃうぞ〜</b> </p> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20130708/20130708142100.png" alt="ホイールクリック！" width="386" height="376" style="border:1px solid #999"> <br> <b style="color:#c55;margin-top:1em">あっ！</b> </p> <p> これ、文字と文字のあいだ、行間に、けっこう大きな「すきま」があるんですね。<br> で、そこをクリックしてしまう。 </p> <p> はてなの皆さんは、MacBookとかタブレットばかり使っている<br> リア充オシャレメガネスタバ野郎ばかりだからきっと気づかないのかもしれませんが、<br> ぼくみたいにふつうのVAIOとかマウスとか使ってる人がいることも忘れないでほしいです。 </p> <p> <span style="color:#555">(2013/7/11 追記)</span><br> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20130711/20130711102322.png" alt="隙間のなくなったはてなブックマーク" width="418" height="373" style="border:1px solid #999"> <br> <b style="margin-top:1em">修正されたみたいです。</b> </p> <div class="addBookmarkLink">[<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20130708/ui">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20130708/ui" alt="『はてなブックマークのだめなところ』のブックマークコメント"></a>] </div> Hamachiya2 アプリやゲームの文言ガイドライン hatenablog://entry/26003855888872767 2013-03-15T00:00:00+09:00 2013-03-15T00:00:00+09:00 こんにちはこんにちは！！ アプリ作ってますか！ アプリやゲームの中で使う文言って、意外と大事なんですよね。 ちょっと間違えてるだけで、すごく安っぽく見えてしまうし、 言い回しひとつで、使い勝手がずいぶん変わったり…。 そんなわけで、ガイドラインって程のものではないですが、 文言を書く際に、ちょっと気をつけたいことなどを書いてみたので、 もしよかったら参考にしてみてくださいね。 ・漢字をひらく 漢字をひらがなにします。 迷ったら新聞紙などのルールを参考にすると良いかもしれません。 意外と漢字を「ひらいて」います。 極端な例だと、五月蠅い(うるさい) などです。 漢字変換できるからといって、それが… <p> こんにちはこんにちは！！<br> アプリ作ってますか！ </p> <p> アプリやゲームの中で使う文言って、意外と大事なんですよね。 </p> <p> ちょっと間違えてるだけで、すごく安っぽく見えてしまうし、<br> 言い回しひとつで、使い勝手がずいぶん変わったり…。 </p> <p> そんなわけで、ガイドラインって程のものではないですが、<br> 文言を書く際に、ちょっと気をつけたいことなどを書いてみたので、<br> もしよかったら参考にしてみてくださいね。 </p> <h4 style="margin:1.5em 0 0 1em;font-weight:bold;font-size:14pt">・漢字をひらく</h4> <p> 漢字をひらがなにします。<br> 迷ったら新聞紙などのルールを参考にすると良いかもしれません。<br> 意外と漢字を「ひらいて」います。<br> 極端な例だと、五月蠅い(うるさい) などです。<br> 漢字変換できるからといって、それが正義ではありません。 </p> <p style="margin-top:0.5em"> 簡単な漢字でも、<br> 「下さい」→「ください」<br> 「出来る」→「できる」<br> 「全て」→「すべて」<br> 「等」→「など」<br> などは、ひらくことを検討すると良いと思います。 </p> <p style="margin-top:0.5em"> (参考) <a href="http://coliss.com/articles/build-websites/operation/writing/288.html">表記規則：企業サイトで使用する「ひらく漢字」「ひらかない漢字」</a> </p> <h4 style="margin:1.5em 0 0 1em;font-weight:bold;font-size:14pt">・開発者の言葉を使わない</h4> <p> 例えば「遷移」や「押下」などの言葉です。<br> うっかりヘルプ等に入れていませんか？<br> それらは開発者にとっては馴染みの言葉ですが、一般ユーザーには通じないかもしれません。 </p> <h4 style="margin:1.5em 0 0 1em;font-weight:bold;font-size:14pt">・勇気を持って、はしょる</h4> <p> 色々な注釈や、詳しいことを画面上に書いておきたい気持ちはわかります。<br> だけどゆとりは3行以上は読みません。<br> 画面が「うるさい感じ」だと、それだけで使うのをやめてしまうかもしれません。<br> 詳しい解説は別のところ(ヘルプやツールチップ)などに用意しておき、<br> 画面上では、本当に必要な文言だけを書くようにすれば良いように思います。 </p> <h4 style="margin:1.5em 0 0 1em;font-weight:bold;font-size:14pt">・強調しすぎない</h4> <p> 赤字、太字を多用したい気持ちはわかります。<br> だけど、すべてを太字にしてしまうと、それはもはや強調ではありません。<br> 強調したい文言は絞りましょう。 </p> <h4 style="margin:1.5em 0 0 1em;font-weight:bold;font-size:14pt">・ボタンのラベリングは特に熟考する</h4> <p> ユーザーは、ボタンを押すと、何かの処理が始まることを期待します。<br> 逆に、何が起こるのかがわかりづらいボタンは、怖くて押せません。<br> ユーザーの目線で、<br> 「押すと何が起きるのか」が「押す前に分かる」文言をつけると良いと思います。 </p> <h4 style="margin:1.5em 0 0 1em;font-weight:bold;font-size:14pt">・校正しよう</h4> <p> 校正といっても難しいことをするわけじゃありません。<br> 文言を3回ほど読むだけです。ただし真剣に。<br> 絶対に間違いを見つけてやるぞ、くらいの気持ちで。<br> 30分あればできます。<br> そして絶対に間違いが見つかります。<br> どれだけ偉い人が書いた文言でも、可能なら複数人で校正すると良いと思います。 </p> <p> (関連リンク)<br> <b><a class="arrowGR" href="http://hamachiya.com/form/#slide1">ふつうのformをつかいたい</a></b> </p> <div class="addBookmarkLink">[<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20130315/wording">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20130315/wording" alt="『アプリやゲームの文言ガイドライン』のブックマークコメント"></a>] </div> Hamachiya2 ブラウザにファイルをドロップしてはいけない hatenablog://entry/26003855888872769 2013-01-22T00:00:00+09:00 2013-01-22T00:00:00+09:00 こんにちはこんにちは！！ 先日、CROSS 2013っていう、エンジニア向けのビール飲み放題のイベントに行ってきました！ そこの「HTML5×セキュリティ」っていうコーナーで、ちょっと喋ってきたんですが、 その時の小ネタを紹介しておきます。 最近、ブログとかのWebサービスで写真をアップロードする時に、 ファイルをドラッグ＆ドロップするだけでできたりしますよね。 いちいちダイアログから選ばなくていいから便利です。 こんなやつ。 この手の仕掛けって、ドラッグ時にボーダーカラーを変えたりして 「いまドラッグ＆ドロップ状態ですよ〜」ってわかりやすく表示されますが、 それって別に、ブラウザが警告の意味… <p> こんにちはこんにちは！！<br> 先日、CROSS 2013っていう、エンジニア向けのビール飲み放題のイベントに行ってきました！ </p> <p> そこの「<strong><a href="http://www.cross-party.com/programs/?p=143">HTML5×セキュリティ</a></strong>」っていうコーナーで、ちょっと喋ってきたんですが、<br> その時の小ネタを紹介しておきます。 </p> <p> 最近、ブログとかのWebサービスで写真をアップロードする時に、<br> ファイルをドラッグ＆ドロップするだけでできたりしますよね。<br> いちいちダイアログから選ばなくていいから便利です。 </p> <p style="font-size:85%;color:#555"> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20130122/20130122152917.png" alt="Drop images here."><br> こんなやつ。 </p> <p> この手の仕掛けって、ドラッグ時にボーダーカラーを変えたりして<br> 「いまドラッグ＆ドロップ状態ですよ〜」ってわかりやすく表示されますが、<br> それって別に、ブラウザが警告の意味で出してるんじゃなくて、<br> あくまで、Webサービス側が親切で表示してるだけなんですよね。 </p> <p> ってことは </p> <p> ・ドラッグされても特にボーダーラインなどを表示せず<br> ・画面上のどこでもドロップを受け入れるようにしておき<br> ・ドロップイベント発動で、自動的にアップロードするようにしておけば… </p> <p> はい！ </p> <p> <strong style="color:#f00">Webページ上に、ドラッグ＆ドロップされたファイルは<br> 有無を言わさず、サーバーにアップロードされることになります＞＜</strong> </p> <p> そんなわけで一応、サンプルページを作ってみました。 </p> <p style="padding-left:2em"> <strong><a class="arrowGR" href="http://v.hamachiya.jp/junk/up/s/">Dropファイル吸い上げ日記</a></strong> </p> <p> たとえば、メールやSkypeで受け取った画像ファイルを<br> ついついブラウザにドロップして確認してる人はいませんか？ </p> <p> とくにpngファイルなどは、環境によっては、ダブルクリックでFireworksが起動したりして、<br> それを嫌って、ブラウザにドロップして画像ビューワー代わりにしてる人もいるかもしれません。 はいぼくです。 </p> <p> でも、一見なんでもないページに、こういった罠を仕込むことも可能なので<br> みなさんも、うっかり機密文書や内緒の画像などを流出させないように、ぜひ気をつけてくださいね！ </p> <p> (関連リンク)<br> <b><a class="arrowGR" href="http://d.hatena.ne.jp/Hamachiya2/20120126/audio">ぼくの考えたすごいブラクラ</a></b> </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20130122/drop">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20130122/drop" alt="『ブラウザにファイルをドロップしてはいけない』のブックマークコメント"></a>] </div> Hamachiya2 二日酔いを防ぐ白い薬 hatenablog://entry/26003855888872773 2012-12-15T00:00:00+09:00 2012-12-15T00:00:00+09:00 こんにちはこんにちは！！ 忘年会シーズンですね！ お酒のんでますか！ ぼくも飲んでます！ そんなわけで今日は、普通のお役立ち記事を書いてみたいと思います。 二日酔いを予防する方法です。 飲み会の前に「ハイチオールC」を飲む。 これだけ。 だけどこれで全然違います。 ハイチオールCプラス 180錠【第3類医薬品】 1,980円 (薬局よりも通販の方がたぶん安いです) これ「しみ・そばかすに効く」とか書いてあるし、ただのビタミン剤っぽいんですが、 これに含まれている「L-システイン」という成分が アルコール分解時に残る毒(アセトアルデヒド)を解毒してくれるので、まるで悪酔いしなくなります。 ちなみ… <p> こんにちはこんにちは！！<br> 忘年会シーズンですね！<br> お酒のんでますか！ ぼくも飲んでます！ </p> <p> そんなわけで今日は、普通のお役立ち記事を書いてみたいと思います。<br> 二日酔いを予防する方法です。 </p> <p> <strong>飲み会の前に「ハイチオールC」を飲む。</strong><br> これだけ。 </p> <p> だけどこれで全然違います。 </p> <p> <a href="https://hb.afl.rakuten.co.jp/hgc/0685865d.70c9573c.0ac41419.c80e8eee/?pc=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2F%25E3%2583%258F%25E3%2582%25A4%25E3%2583%2581%25E3%2582%25AA%25E3%2583%25BC%25E3%2583%25ABC%25E3%2583%2597%25E3%2583%25A9%25E3%2582%25B9%2B180%25E9%258C%25A0%2F&link_type=text&ut=eyJwYWdlIjoidXJsIiwidHlwZSI6InRleHQiLCJjb2wiOjF9" target="_blank" rel="nofollow sponsored noopener"><img src="https://www.ssp.co.jp/uploads/product/all/hcp2/product.png" alt="【エスエス】ハイチオールCプラス 180錠【第3類医薬品】" style="border:1px solid #aaa"><br> ハイチオールCプラス 180錠【第3類医薬品】 1,980円</a><br> <span style="font-size:80%">(薬局よりも通販の方がたぶん安いです)</span> </p> <p> これ「しみ・そばかすに効く」とか書いてあるし、ただのビタミン剤っぽいんですが、<br> これに含まれている「L-システイン」という成分が<br> アルコール分解時に残る毒(アセトアルデヒド)を解毒してくれるので、まるで悪酔いしなくなります。 </p> <p> ちなみにハイチオールCと全く同じ成分で、名前だけ変えて「二日酔いの薬」としても売られているくらい → <a href="http://www.ssp.co.jp/product/all/alk/">アルケシクール</a> </p> <p> ぼくもヘビィな飲み会の前にはハイチオールを飲んでいたりするんですが<br> ウコンなんとかや、シジミなんとかを飲むよりも断然効果があります。 </p> <p> 飲み会などが多い人は、常備しておくといいかも？ </p> <p> もしそれでも二日酔いになってしまったら… </p> <p> とにかく水をがぶがぶのんで寝ましょう…。<br> 水よりも、スポーツドリンクの方が糖分が含まれていて尚良いです。<br> あと、ここでもハイチオールCを飲む。効く。 </p> <p> 二日酔いなのに会社にいかなきゃならない人は… </p> <p> かわいそう。<br> コンビニで売ってるソルマックやキャベなんとか系の胃腸薬ドリンクでも飲んでがんばりましょう…。<br> マズいけれど少しはマシになります。 </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20121215/alcohol">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20121215/alcohol" alt="『二日酔いを予防する』のブックマークコメント"></a>] </div> Hamachiya2 今すぐサイトの広告収入を２倍にする方法 hatenablog://entry/26003855888872777 2012-12-10T00:00:00+09:00 2012-12-10T00:00:00+09:00 こんにちはこんにちは！！ 今日はちょっとだけ実用的なお話です！ はい！ タイトルの通り、『今すぐサイトの広告収入を２倍にする方法』。 なんだか、うさん臭いですね＞＜ でも、やり方はシンプルで簡単です。 やり方： スマートフォンでアクセスされた時に、 一番上 (ファーストビュー) に 300x250 のレクタングル広告を貼る。 これだけ。 ちなみにこんな感じになります。 (スクロールさせようとすると、絶対に広告に指が触れてしまう！) 最近は、この方法で広告を貼っているサイトが増えてきているので、見たことがある人も多いと思います。 うざいですよね。わかります。 けど、この方法で貼られた広告は、クリ… <p> こんにちはこんにちは！！<br> 今日はちょっとだけ実用的なお話です！ </p> <p> はい！<br> タイトルの通り、『今すぐサイトの広告収入を２倍にする方法』。<br> なんだか、うさん臭いですね＞＜ </p> <p> でも、やり方はシンプルで簡単です。 </p> <p> やり方：<br> <strong style="color:#f00">スマートフォンでアクセスされた時に、<br> 一番上 (ファーストビュー) に 300x250 のレクタングル広告を貼る。</strong> </p> <p> これだけ。<br> ちなみにこんな感じになります。 </p> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20121211/20121211212713.png" width="240" height="360" style="border:1px solid #666" alt="スマートフォン向けadsense、300x250 レクタングル(中)"><br> <span style="font-size:80%;color:#f21">(スクロールさせようとすると、絶対に広告に指が触れてしまう！)</span> </p> <p> 最近は、この方法で広告を貼っているサイトが増えてきているので、見たことがある人も多いと思います。<br> うざいですよね。わかります。 </p> <p> けど、この方法で貼られた広告は、クリック率がハンパない。<br> しかも、(今のところは) 規約違反じゃない。 </p> <p> それどころか、<strong style="color:#f00"><a href="http://adsense-ja.blogspot.jp/2012/04/2.html">アドセンス公式ブログで推奨</a></strong>すらしています。<br> (推奨している位置は記事下だけど) </p> <p> ブログの場合、通常の広告クリック率はだいたい0.2%程度、つまり500回表示されて1回クリックされる程度なんだけど、<br> <strong style="color:#f00">この方法で貼られた広告のクリック率は、0.5%から、多い時は1%を超える</strong>時まであります。 </p> <p> これは、<br> 「<strong>まだスマートフォンの操作に慣れていない人</strong>」に対する<br> 「<strong>究極の誤クリック狙い</strong>」とも言えるかもしれません。 </p> <p> ついでに今だと、指がかじかんでクリック率が上がるかもしれない。 </p> <p> <strong style="color:#f00">ちなみにこれはファーストビューでなくても、記事中や記事下でもかなり効果があります。<br> どの位置にせよ、スマホ向けに300x250の広告を貼ると、スクロール時にどうしても広告に指が触れてしまう為、必ず誤クリックが発生します。</strong> </p> <p> つまりこれを「誤クリック狙いなんて言語道断だし長期的には損だし」みたいな理論を展開しちゃうような人がもしいたとすれば、<br> それは<a href="http://adsense-ja.blogspot.jp/2012/04/2.html">Google自身が公式で推奨している方法</a>すらを否定することになります。 </p> <p> どの位置に、どういう狙いで貼られたにせよ、推奨されている300x250の広告をスマホ向けに貼るだけで、必ず (かなりの数の)誤クリックが発生してしまうからです。</p> <p> でも徐々にクリック率は下がっていくだろうし、そのうち規制されるかもしれませんね。<br> たぶんこれが有効なのは今だけじゃないかなーと思います。 </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20121210/adsense">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20121210/adsense" alt="『今すぐサイトの広告収入を２倍にする方法』のブックマークコメント"></a>] </div> Hamachiya2 0か1かの交渉は失敗をもたらす hatenablog://entry/26003855888872779 2012-11-30T00:00:00+09:00 2012-11-30T00:00:00+09:00 こんにちはこんにちは！！ タイトル通り、かつ思い付きの記事です。 「好きです…！付き合ってください！」とかいきなり言っちゃう中高生諸君は、 いまどきならネットで、やり手の営業マンの交渉術を学べるのだから、 そのあたりをちょっと勉強してから、 好きな女の子を落としにかかると良いんじゃないかなと思います。 良い時代ですね。 0か1かで相手を追い詰めるのではなく、うまく妥協点を探ってください。 今すぐは決断できなくても、数か月間、粘り強く、仲良くお付き合いできれば なんとかなるかもしれません。 個人的には、企業の面接などのプロセスなんかも、 担当者の気分によって0か1かを決めるのではなく、 こういっ… <p> こんにちはこんにちは！！<br> タイトル通り、かつ思い付きの記事です。 </p> <p> 「好きです…！付き合ってください！」とかいきなり言っちゃう中高生諸君は、<br> いまどきならネットで、やり手の営業マンの交渉術を学べるのだから、<br> そのあたりをちょっと勉強してから、<br> 好きな女の子を落としにかかると良いんじゃないかなと思います。<br> 良い時代ですね。 </p> <p> 0か1かで相手を追い詰めるのではなく、うまく妥協点を探ってください。<br> 今すぐは決断できなくても、数か月間、粘り強く、仲良くお付き合いできれば<br> なんとかなるかもしれません。 </p> <p> 個人的には、企業の面接などのプロセスなんかも、<br> 担当者の気分によって0か1かを決めるのではなく、<br> こういった交渉の余地があればより良いのではないかな、などと思います。 </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20121130/tell">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20121130/tell" alt="『0か1かの交渉は失敗をもたらす』のブックマークコメント"></a>] </div> <div style="margin-bottom:0px;margin-left:1em"><div style="float:left;margin:0px 12px 1px 0px;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4414304164/esorasea-22/ref=nosim/" target="_blank" rel="nofollow"><img src="http://ecx.images-amazon.com/images/I/51pgx0tWooL._SL180_.jpg" alt="影響力の武器[第二版]―なぜ、人は動かされるのか" style="border: 1px solid #aaa;"></a></div><div style="line-height:120%; margin-bottom: 10px"><div style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4414304164/esorasea-22/ref=nosim/" target="_blank" rel="nofollow">影響力の武器[第二版]―なぜ、人は動かされるのか</a></div><div>ロバート・B・チャルディーニ <br />誠信書房 <br />売り上げランキング: 58<br /></div><div style="float: left;"></div></div><div style="clear: left"></div></div> Hamachiya2 デザイナーに丸投げしちゃいがちなUIというもの hatenablog://entry/26003855888872781 2012-11-29T00:00:00+09:00 2012-11-29T00:00:00+09:00 こんにちはこんにちは！！ 今日はちょっとUIについて思うことのお話をしたいと思います。 ぼくは以前、ゲーム業界にいたんだけど、そこでは、 いわゆるグラフィックデザインを専門にしている人に 「この画面のUIおねがいね」と丸投げする光景をよく見ました。 だけど、見た目が綺麗なデザインを仕上げるのと 使い勝手を考慮したユーザーインターフェイスを設計するのとでは、 考え方も、必要なスキルもまるで違うものだと思う。 情報や機能を、どのようにユーザーに提供するか。 これは画面上の配置や見た目だけの話だけじゃなくって、 情報の階層化や、いつどのタイミングで見せるかといったことまで考えなきゃならない。 たとえ… <p> こんにちはこんにちは！！<br> 今日はちょっとUIについて思うことのお話をしたいと思います。 </p> <p> ぼくは以前、ゲーム業界にいたんだけど、そこでは、<br> いわゆるグラフィックデザインを専門にしている人に<br> 「この画面のUIおねがいね」と丸投げする光景をよく見ました。 </p> <p> だけど、見た目が綺麗なデザインを仕上げるのと<br> 使い勝手を考慮したユーザーインターフェイスを設計するのとでは、<br> 考え方も、必要なスキルもまるで違うものだと思う。 </p> <p> 情報や機能を、どのようにユーザーに提供するか。 </p> <p> これは画面上の配置や見た目だけの話だけじゃなくって、<br> 情報の階層化や、いつどのタイミングで見せるかといったことまで考えなきゃならない。 </p> <p> たとえばゲームなら、初めからボタンだらけの画面にするのではなくて、<br> ゲームの進み具合、ユーザーの習熟度に応じて段階的に機能を見せるとかね。 </p> <p> 細かい話なら、ボタンを押した時に反応するのか、<br> 離した時に反応するのか、とか。 </p> <p> どうすればユーザーが興味を示し、何がイヤで離脱するのか。<br> 「わけわかんない」と「わかりやすい」の違いは。 </p> <p> ユーザーにいかに「とっついてもらうか」。<br> そして、いかにストレスなく使ってもらうか。 </p> <p> こういったことを考えるのはどんな人が適しているんだろう。 </p> <p> プランナー？<br> デザイナー？<br> エンジニア？<br> それともマーケティングの人？ </p> <p> たぶんどれでもなくて、<br> これらの適性や経験を、複合して併せ持つ人が、良くできたUIを設計できるのだと思う。 </p> <p> プランナーとしての企画力と、<br> デザイナーとしてのセンス、<br> プログラマーとしての知識、<br> さらに、マーケティングの分析力。 </p> <p> もちろん個人で持ち合わせている人なんて、なかなかいない。<br> だから、ちゃんとしたUIを作ろうって場合は、チームでなんとかすることになるけれど…<br> チームでUIに取り掛かろうとすると、どうしても時間がかかっちゃうんだよね。まとまらない場合も多い。 </p> <p> やはり優れたUIの設計者が一人くらいいた方がスムーズでいい。 </p> <p> そんなスーパーマンはいないって？<br> 全部は無理だけど、２つくらいなら何とかなるかもしれない。 </p> <p> プログラマーからデザイナーになるのは、なかなか難しいけれど…、<br> 非プログラマーが、プログラミングを身につけるのは、やりやすい時代だと思う。 </p> <p> プログラミングの世界は、いまや先人たちの努力によって、情報やライブラリが充実し、<br> 簡単なものなら、わりと誰にでもできるようになってきているから。 </p> <p> だからデザイナーやプランナーの人も、たまにはちょっとしたプログラミングなどをして<br> さらにすてきなUIを設計するための感覚の一つを身に着けるのも良いかもしれません。 </p> <p> なにより、ソフトウェアに限らず、自販機でも、お店の行列でも、<a href="http://la.ma.la/blog/diary_200706161347.htm">カップ焼きそば</a>でも、<br> たくさんのUIを見て、体験して、<br> 「これ使いやすい！」「これ使いづらい！」と感じ、<br> そして「なぜ使いづらいのか？」と、普段から考えることのできる人こそが、<br> 本当にすてきなUIを設計できるのかもしれませんね。 </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20121129/ui">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20121129/ui" alt="『デザイナーに丸投げしちゃいがちなUIというもの』のブックマークコメント"></a>] </div> <div style="margin-bottom:0px;margin-left:1em"><div style="float:left;margin:0px 12px 1px 0px;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/478850362X/esorasea-22/ref=nosim/" target="_blank" rel="nofollow"><img src="http://ecx.images-amazon.com/images/I/412Z7VZFGDL._SL180_.jpg" alt="誰のためのデザイン?―認知科学者のデザイン原論 (新曜社認知科学選書)" style="border: 1px solid #aaa;"></a></div><div style="line-height:120%; margin-bottom: 10px"><div style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/478850362X/esorasea-22/ref=nosim/" target="_blank" rel="nofollow">誰のためのデザイン?―認知科学者のデザイン原論 (新曜社認知科学選書)</a></div><div class="amazlet-detail">ドナルド・A. ノーマン D.A. ノーマン <br />新曜社 <br />売り上げランキング: 2889<br /></div><div class="amazlet-sub-info" style="float: left;"></div></div><div style="clear: left"></div></div> Hamachiya2 ï¼»PR記事］ソーシャルゲームは、そろそろ本気でセキュリティを考えるべき hatenablog://entry/26003855888872786 2012-11-26T00:00:00+09:00 2012-11-26T00:00:00+09:00 こんにちはこんにちは！！ いよいよソーシャルゲームもスマホの時代ですね！ しかも狙うは世界！ とはいえ… いままでのソーシャルゲームは、 ガラケーという機械の仕様と、そのユーザーの特性に、セキュリティを守られていた部分が大きかったんだよね。 ガラケーだと、HTMLのソースコードをみるのすら一苦労。 スマホだとPC並に色々できちゃう。 さらにスマホではWiFiで繋いだりもするから、いままでのようにIPで弾くこともできないし。 タッチパネルのイベントの有無でPCを弾いたりしてるゲームもあるけど、 そういった手法もカジュアルなチート対策に過ぎないし。 まあ、ただ機械がスマホに変わっただけなら、いわゆ… <p> こんにちはこんにちは！！<br> いよいよソーシャルゲームもスマホの時代ですね！<br> しかも狙うは世界！ </p> <p> とはいえ…<br> いままでのソーシャルゲームは、<br> ガラケーという機械の仕様と、そのユーザーの特性に、セキュリティを守られていた部分が大きかったんだよね。 </p> <p> ガラケーだと、HTMLのソースコードをみるのすら一苦労。<br> スマホだとPC並に色々できちゃう。 </p> <p> さらにスマホではWiFiで繋いだりもするから、いままでのようにIPで弾くこともできないし。<br> タッチパネルのイベントの有無でPCを弾いたりしてるゲームもあるけど、<br> そういった手法もカジュアルなチート対策に過ぎないし。 </p> <p> まあ、ただ機械がスマホに変わっただけなら、いわゆる<a href="http://ja.wikipedia.org/wiki/%E3%82%B5%E3%82%A4%E3%83%90%E3%83%BC%E3%83%BB%E3%83%8E%E3%83%BC%E3%82%AC%E3%83%BC%E3%83%89%E6%88%A6%E6%B3%95">ノーガード戦法</a>で、<br> 「なにかあればアカウントBAN、酷ければ訴訟」みたいな感じでも良かったかもしれない。 </p> <p> だけど相手が世界だとユーザー層も変わる。<br> ガラケーのゆるふわちゃんばかりじゃなく、<br> RMT目当ての海外チート集団なども当然でてくる。<br> そうなると、あっという間に、バランスも信用も失墜してしまうよ。 </p> <p> だから、今までみたいに穴だらけのゲームじゃマズいよね。<br> (ちなみに、現状ほとんどのソーシャルゲームは、セキュリティボロボロだよ) </p> <p> ちなみに、こういったセキュリティホールっていうのは、<br> ゲーム業界が好んで愛用してる、いわゆる「デバッグ業者」では、まるで対応できないんだよね。 </p> <p> 例えばデバッグで有名なP社やD社なんて、「ケータイのゲームやったことありまーす」なんて感じの若いバイトの子を安く雇ってるだけだから。<br> それがどれくらい安いかっていうと日当6000円(交通費なし)みたいな感じ。ほんとにそんな感じ。<br> そして、そういった業者に、いくらお金を積んでも未経験の日雇いバイトの数が増えるだけ…。 </p> <p> だからそういった意味でも、スマホのゲームで世界を狙う企業は、そろそろぼくを雇うべきなんじゃないでしょうか！！ </p> <p> そんなわけで興味のあるソーシャルゲーム業界の方はこちらをクリック！ → 「<strong><a href="http://twitter.com/share?url=http%3a%2f%2fd%2ehatena%2ene%2ejp%2fHamachiya2%2f20121126%2fsecurity&text=%2e%40Hamachiya2%20%e5%b9%b4%e5%8f%8e3000%e4%b8%87%e5%86%86%e3%81%a7%e3%82%a6%e3%83%81%e3%81%ab%e6%9d%a5%e3%81%a6%e3%81%8f%e3%81%a0%e3%81%95%e3%81%84%ef%bc%81">@Hamachiya2 年収3000万円でウチに来てください！</a></strong>」 </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20121126/security">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20121126/security" alt="『［PR記事］ソーシャルゲームは、そろそろ本気でセキュリティを考えるべき』のブックマークコメント"></a>] </div> Hamachiya2 学んでから作るのではなく、作ってから学ぶ hatenablog://entry/26003855888872791 2012-11-14T00:00:00+09:00 2012-11-14T00:00:00+09:00 こんにちはこんにちは！！ 先日、ちょっとしたイベントで、学生の方にこんな質問をされました。 「自分は早くプログラマになりたい、作りたいアプリもある。 だけど来年にならないとプログラミングの授業が始まらないから、作れない」 と。 なるほど。 その時、ぼくが答えたのは、 「今日、家に帰ったらプログラミングしてください」 だったんだけど、言葉が足りなかったかもしない。 だからここに、もうちょっと詳しく書いてみますね。 アプリを作る、プログラマになる、一番手っ取り早い方法を。 1. 目標を立てる 作りたいものを思い描くということ。 いきなりすごいものを作るのは大変だから、最初の目標は少し抑えてちょっと… <p> こんにちはこんにちは！！<br> 先日、ちょっとしたイベントで、学生の方にこんな質問をされました。 </p> <blockquote> 「自分は早くプログラマになりたい、作りたいアプリもある。 　だけど来年にならないとプログラミングの授業が始まらないから、作れない」 </blockquote> <p> と。 </p> <p> なるほど。<br> その時、ぼくが答えたのは、<br> 「今日、家に帰ったらプログラミングしてください」<br> だったんだけど、言葉が足りなかったかもしない。 <p> だからここに、もうちょっと詳しく書いてみますね。<br> アプリを作る、プログラマになる、一番手っ取り早い方法を。 </p> <p> <strong>1. 目標を立てる</strong> </p> <p> 作りたいものを思い描くということ。<br> いきなりすごいものを作るのは大変だから、最初の目標は少し抑えてちょっとしたものがいいね。<br> できれば、自分にとって便利なものや、少しワクワクするものがいい。 </p> <p> 例えば、スマホで動くキッチンタイマーとかでもいい。<br> （これはワクワクしないかもしれないけど） </p> <p> <strong>2. すぐに作り始める</strong> </p> <p> え？ 作り方がわからないって？<br> 例えばAndroidアプリでもiPhoneアプリでも、<br> 「何々アプリ 作り方」とか、「何々 チュートリアル」とかで検索すれば、<br> 画面に文字を表示させるまでの簡単なやり方を誰かが書いてくれてる。 </p> <p> それをコピペでいいよ。<br> そうすれば「あとはプログラムを書くだけ」っていう環境が整うから。 </p> <p> <strong>3. 改造する</strong> </p> <p> 画面に表示された「ハローワールド！」っていう文字を、時計に置き換えるにはどうすればいいんだろう？<br> みたいなところから始める感じだね。 </p> <p> そういうのも「何々言語 時刻 表示」とかで検索すれば、どんなコードを書けばいいか出てくるよ。<br> そうやって検索しながら、ボタンをつけたり、<br> ボタンを押した時の動きをつけたり、少しづつ改造していこう。 </p> <p> <strong>4. 30%できたら勉強する</strong> </p> <p> 目標通りのものができてなくても、ここまででだいぶ「感じ」がつかめたはず。<br> この時点で、入門書を読むんだ。 </p> <p> そうすれば、まるでスポンジが水を吸うように<br> 書いている内容が、体に吸収されるのが実感できるはずだよ。 </p> <p> ただし全部読み切らなくても、だいたいでいい。<br> ああ、読める、読めるぞっていうのを実感できればいい。 </p> <p> <strong>5. 完成させる</strong> </p> <p> 生まれ変わった気分で、再度取り組もう。<br> 前に作った30%を手直ししてもいいし、そのまま進めてもいい。<br> 完成させられるはずだよ。 </p> <p> <strong>6. もうきみは立派なプログラマです！</strong> </p> <p> こうやって自分の手で作り上げたものは、<br> 本や授業だけで学んだ内容よりも、ずっと大事な財産になるよ。 </p> <p> ただ学んで得た知識って、どうしても忘れがちになるけれど、<br> 自分で作ったものは「何を、どんなやり方で作ったか」くらいはだいたい覚えてる。 </p> <p> この先、他のアプリを作る時にも、<br> 「そういえば、こんな処理、前につくったな…」<br> って、必ず思い出すことができるよ。<br> ソースコードを見ることもできる。 </p> <p> 知識の引き出しが増えるんだよね。しかも経験を伴ってる。 </p> <p> 作ってる途中に、特に苦労した点とかがあれば、<br> ブログなんかにそれを書いておくと、もっといいね。 </p> <p> その際は、なるべく他の人が見てもわかるように配慮して書こう。<br> そういうアウトプットをすれば、<br> 新しい発見があるかもしれないし、そのノウハウは、より完璧にきみのものになるよ。 </p> <p> (関連リンク)<br> <a class="arrowGR" href="http://developer.cybozu.co.jp/tech/?p=1217">「世界征服は電話応対から」──エンジニアの未来サミット for students 2012 第1回レポート | サイボウズエンジニアのブログ</a><br> <a class="arrowGR" href="http://d.hatena.ne.jp/Hamachiya2/20090721/programming">プログラミング言語を身につける唯一の方法 - ぼくはまちちゃん！(Hatena)</a><br> <a class="arrowGR" href="http://d.hatena.ne.jp/Hamachiya2/20080131/security">セキュリティ過敏症 - ぼくはまちちゃん！(Hatena)</a> </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20121114/programming">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20121114/programming" alt="『いちばん簡単なアカウントの乗っ取り方』のブックマークコメント"></a>] </div> Hamachiya2 いちばん簡単なアカウントの乗っ取り方 hatenablog://entry/26003855888872793 2012-10-04T00:00:00+09:00 2012-10-04T00:00:00+09:00 こんにちはこんにちは！！ 最近また、アカウントを乗っ取られただとか、ハッキングされたとか、 そういう話をちょくちょく聞くようになってきて物騒な世の中ですね＞＜ そこで、ぼくの考える「いちばん簡単なアカウントの乗っ取り方」について ちょっと書いておきたいと思います！ 1. 「パスワードを忘れた」をクリック 2. 「秘密の質問に答える」をクリック 3. ペットの名前や、好きな映画を聞かれるので、対象者のSNSやブログを調べる・または直接聞く 4. アカウントゲット さすがに最近は「秘密の質問」を使っているWebサービスは減ってきたけど、まだまだ結構あるんですよね。 これって人によっては、ものすごく… <p> こんにちはこんにちは！！ </p> <p> 最近また、アカウントを乗っ取られただとか、ハッキングされたとか、<br> そういう話をちょくちょく聞くようになってきて物騒な世の中ですね＞＜ </p> <p> そこで、ぼくの考える「いちばん簡単なアカウントの乗っ取り方」について ちょっと書いておきたいと思います！ </p> <p> 1. <strong>「パスワードを忘れた」をクリック</strong> </p> <p> 2. <strong>「秘密の質問に答える」をクリック</strong> </p> <p> 3. <strong>ペットの名前や、好きな映画を聞かれるので、対象者のSNSやブログを調べる・<span style="color:#f00">または直接聞く</span></strong> </p> <p> 4. <strong>アカウントゲット</strong> </p> <p> さすがに最近は「秘密の質問」を使っているWebサービスは減ってきたけど、まだまだ結構あるんですよね。<br> これって人によっては、ものすごく脆弱な仕組みだと思うので、こんなもの早く絶滅すればいいのになーと思ってます。 </p> <p> 日記になんでもかんでも書いちゃうような、いわゆる情弱さんなんかは、これで高い確率で乗っ取れるし、<br> ネットに慣れた人でも、過去に登録した秘密の質問なんてすっかり忘れた頃に、うっかりどこかにヒントを書いてしまうこともあるかもしれない。 </p> <p> なので、もしこの先、何かの登録時に「秘密の質問」に出くわしたら<br> <strong>質問とは全然関係のない答えを用意しておく</strong>と良いかもしれませんね！ </p> <p> あと色んなサービスで共通のパスワードを使っているのもとても危ない状態ので、<br> 覚えやすくて、そこそこ安全なパスワードを作る考え方のひとつとして<br> 『<strong><a href="http://d.hatena.ne.jp/Hamachiya2/20091118/password">ちょっとセキュアな「いつもの」パスワード</a></strong>』って記事も参考にしてみてくださいね！ </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20121004/reminder">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20121004/reminder" alt="『いちばん簡単なアカウントの乗っ取り方』のブックマークコメント"></a>] </div> Hamachiya2 slideshareにfacebookでログインすると見たスライドがバレバレになる hatenablog://entry/26003855888872796 2012-09-28T00:00:00+09:00 2012-09-28T00:00:00+09:00 こんにちはこんにちは！！ slideshareって、はてなブックマークの人気記事でもよく見かけますよね！ スライドをアップロードして共有できる人気のサービスだそうです！ あれに「facebookでログイン」みたいなボタンがありますよね。 こういうの。 ただ見るだけの人ならログインなんてしないと思うけど、 「お、このスライド、いいねボタン押したいな」、なんて時にうっかりこのボタンを押してログインしてしまうこともあるかもしれません。 (ちなみに、いいねボタンは、facebook連携してなくても押せます) それでfacebook連携してしまうと… その後、slideshareを見るたびに(見るだけで… <p> こんにちはこんにちは！！ </p> <p> <strong><a href="http://www.slideshare.net/">slideshare</a></strong>って、はてなブックマークの人気記事でもよく見かけますよね！<br> スライドをアップロードして共有できる人気のサービスだそうです！ </p> <p> あれに「<strong>facebookでログイン</strong>」みたいなボタンがありますよね。 </p> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120928/20120928155414.png" alt="slideshareにfacebookでログイン" style="border:1px solid #666"><br> こういうの。 </p> <p> ただ見るだけの人ならログインなんてしないと思うけど、<br> 「お、このスライド、いいねボタン押したいな」、なんて時にうっかりこのボタンを押してログインしてしまうこともあるかもしれません。<br> (ちなみに、いいねボタンは、facebook連携してなくても押せます) </p> <p> それでfacebook連携してしまうと… </p> <p> その後、<strong style="color:#f21">slideshareを見るたびに(見るだけで)、自分のフェイスブックのアクティビティに<br> 「このスライドみたよ」って掲載される</strong>ので、注意が必要かも？ってお話です！ </p> <p> <strong>うっかりフェイスブック連携ボタンでログインしてしまう</strong> </p> <p> ↓ </p> <p> <strong>忘れた頃に何かスライドをみる</strong> </p> <p> ↓ </p> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120928/20120928155413.png?1348815272" alt="フェイスブックで自分のアクティビティをチェックすると…" style="border:1px solid #666"><br> フェイスブックで自分のアクティビティをチェックすると… </p> <p> しかもこの連携状態、<strong style="color:#f21">自分から解除しない限り、ずーっと続きます。</strong> </p> <p> ということは、もしかすると、<br> すごいエロエロでド変態なタイトルのスライドを作成しおいて、<br> 1ピクセルのiframeに埋め込むなどすれば、みんなのフェイスブックが大変なことになるのでは……。 </p> <p> などと思ったんですが、一応、2,3ページ進めないと<br> アクティビティフィードには掲載されないみたいなので、そこはひとまず安心ですね！ </p> <p> だけど、それを知らずにエロいタイトルのスライドを読み進めちゃうと<br> 人によってはわりと悲惨なことになるかも…。 </p> <p> たとえばこういうの。<br> <a href="http://www.slideshare.net/hamachie/ss-14499508" target="_blank"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120928/20120928172000.png?1348820409" alt="わぁい触手だいすき☆"></a> </p> <p> なにせこの「スライドみたよ！」っていうアクティビティは、自分自身のニュースフィードには流れてこないんですよね。<br> だからすごく気づきにくい…。 </p> <p> 変なスライドばっかり見てると、知らない間にお友達にどんびきされちゃってるかもしれません＞＜ </p> <p> なので、もしフェイスブック連携しちゃってる人は<br> slideshare右上のアイコンメニューから<br> 「<strong>Account Settings</strong>」→「<strong>Sharing</strong>」を選んで、<br> 「<strong>Presentations you view</strong>」のチェックを外しておきましょう！ </p> <p> いわゆる海外のソーシャル何々にありがちな「デフォルトで全公開」ですね！<br> みなさんも気をつけて＞＜ </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20120928/slideshare">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20120928/slideshare" alt="『slideshareにfacebookでログインすると見たスライドがバレバレになる』のブックマークコメント"></a>] </div> Hamachiya2 こんなメールを送った hatenablog://entry/26003855888872802 2012-09-14T00:00:00+09:00 2012-09-14T00:00:00+09:00 こんにちはこんにちは。 今日は、こんなメールを送りました。 From: [email protected] To: [email protected] 高木浩光さま お世話になっております。 ブログ「ぼくはまちちゃん！」のはまちや２です。 本日は、ネット上での評判形成についてご相談になります。 ぼくはブログの次のエントリーにて、セキュリティ関係の記事の執筆を予定しております。 記事公開のタイミングでネット、ソーシャルでの良好な評判を形成したいと考えております。 そこで、評判形成についてご協力いただける方を探しておりますが、そういった仕事の依頼も受けられてますでしょうか。 以… <p> こんにちはこんにちは。<br> 今日は、こんなメールを送りました。 </p> <blockquote style="line-height:1.3; border-radius:3px;"> From: [email protected]<br> To: [email protected]<br> <br> 高木浩光さま<br> <br> お世話になっております。 <br> ブログ「ぼくはまちちゃん！」のはまちや２です。<br> <br> 本日は、ネット上での評判形成についてご相談になります。<br> ぼくはブログの次のエントリーにて、セキュリティ関係の記事の執筆を予定しております。<br> 記事公開のタイミングでネット、ソーシャルでの良好な評判を形成したいと考えております。<br> <br> そこで、評判形成についてご協力いただける方を探しておりますが、そういった仕事の依頼も受けられてますでしょうか。<br> <br> 以下、企画概要をお送りさせていただきます。<br> <br> 【現状の課題】<br> 現状の課題として、ネット上での評判は決して良いとは言えない状況です。<br> 主なネガティブ要素は「はまちの照り焼きは難しい」等です。<br> <br> また、現在は改善している性癖も、過去の書き込みは残るので、それを見るユーザーがネガティブな印象をもってしまうということもあります。<br> <br> 【依頼内容】<br /> そこで、影響力のあるブログ、facebook、twitter、もしくは、ヤフー知恵袋などに執筆いただき、ぼくのブログのポジティブな評判形成にご協力いただけないかというご相談です。 <br> また、可能でしたらセキュリティ企画を各媒体に持ち込んでご提案いただきたいです。<br> <br> 【ゴール】<br /> 理想としては、はてな界隈No.1の評判ですが、まずは、「ブログの中でははまちちゃんよいよね」、「はまちおにいちゃんすてき！」といった論調にしていきたいと考えております。<br> <br> ぜひよろしくお願いします。 </blockquote> <p> お返事たのしみです！ </p> <p> <strong>(関連記事)<br /> <a href="http://newtoku.jp/blog-entry-1252.html">【炎上】 セキュリティソフト会社が高木浩光にステマ依頼 → twitterで晒される</a></strong> </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20120914/stealth">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20120914/stealth" alt="『こんなメールを送った』のブックマークコメント"></a>] </div> Hamachiya2 相互RSS(ブログロール)に独自のNGワードフィルタをいれる hatenablog://entry/26003855888872804 2012-09-04T00:00:00+09:00 2012-09-04T00:00:00+09:00 こんにちはこんにちは！！ 今日は、(まとめ)サイト運営者向けのお話です！ よく、まとめサイト的なところって、 ページの上の方に、他のサイトの新着タイトル一覧を出していたりしますよね。 ※こういうやつ まあ「あれ邪魔」とか「なんでアレ入れてるの？」とか色々あると思いますが、 相互RSSをうまく使えば、ものすごいアクセス数が伸びるので、みなさん入れてるんだと思います。 それこそ、普通のブログがはてなブックマークの人気エントリー入りした時の(だいたい1万PVくらい)、何倍、何百倍ものアクセス数を毎日安定的に得られるとかなんとか…。 それはさておき、 便利な反面、アンテナサイトのRSSなどを登録してい… <p> こんにちはこんにちは！！<br> 今日は、(まとめ)サイト運営者向けのお話です！ </p> <p> よく、まとめサイト的なところって、<br> ページの上の方に、他のサイトの新着タイトル一覧を出していたりしますよね。 </p> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120904/20120904191526.png" alt="はまそく！"><br> ※こういうやつ </p> <p> まあ「あれ邪魔」とか「なんでアレ入れてるの？」とか色々あると思いますが、<br> 相互RSSをうまく使えば、ものすごいアクセス数が伸びるので、みなさん入れてるんだと思います。 </p> <p> それこそ、普通のブログがはてなブックマークの人気エントリー入りした時の(だいたい1万PVくらい)、何倍、何百倍ものアクセス数を毎日安定的に得られるとかなんとか…。 </p> <p> それはさておき、<br> 便利な反面、アンテナサイトのRSSなどを登録していると、<br> たまにアダルトっぽいタイトルが流れてきた時に、サイト管理者として困ることがあるんですよね。 </p> <p> 特に Google Adsense の広告を利用してるサイトは<br> 「<strong>RSSや逆リンク等の自動表示でも、アダルト要素を含むリンクやテキストを表示しいてる場合は、広告を停止します</strong>」という厳しい感じなので、<br> 人によってはヒヤヒヤものかもしれません！<br> わりと容赦なく停止になるので…。 </p> <p> たとえ厳選したRSSのみ受信していたとしても、<br> 相手がうっかりアダルトなワードを含む記事をあげたりしたら…。 </p> <p> そんなわけで、独自のNGワードフィルタを作ってみました。<br> みんな大好き「<strong><a href="http://blogroll.livedoor.com/">ライブドア相互RSS</a></strong>」に対応しています。 </p> <p> (つかいかた) </p> <p> <strong>â– NGワードリストを用意する</strong> </p> <p> がんばってつくりました。アダルトなワード満載です。<br> この<strong><a href="https://dl.dropboxusercontent.com/u/804784/ngwords.zip">NGワードリストのひな形ファイル</a></strong>をダウンロード・解凍して、自分のサーバーなどにアップロードします。 </p> <p> 自分のサーバーがない人は <strong><a href="http://db.tt/e6vSleI">Dropbox</a></strong> のファイル公開モードを利用すると便利かもしれません。<br> Dropbox の <strong>public</strong>フォルダに放り込んで、ファイルを右クリック→「Dropbox」→「パブリックリンクのコピー」するだけで、ブラウザからアクセスできるアドレスがクリップボードにコピーされます。 </p> <p> <strong>â– NGワードファイルをブログで読み込む</strong> </p> <p> ブログロールの貼り付けタグより前に、NGワードリストを読み込みます。 </p> <pre class="code lang-html" data-lang="html" data-unlink><span class="synIdentifier">&lt;</span><span class="synStatement">script</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">&quot;text/javascript&quot;</span><span class="synIdentifier"> </span><span class="synType">charset</span><span class="synIdentifier">=</span><span class="synConstant">&quot;utf-8&quot;</span><span class="synIdentifier"> </span><span class="synType">src</span><span class="synIdentifier">=</span><span class="synConstant">&quot;http://NGワードリストをアップロードしたアドレス/ngwords.js&quot;</span><span class="synIdentifier">&gt;&lt;/</span><span class="synStatement">script</span><span class="synIdentifier">&gt;</span> </pre> <p> <strong>■ブログにコードを追加する</strong> </p> <p> ブログロールの貼り付けタグの直後に以下のコードを貼り付けます。 </p> <pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synIdentifier">function</span> blogroll_write_feeds (id, config, feeds, is_categorize) <span class="synIdentifier">{</span> <span class="synIdentifier">var</span> newFeeds = <span class="synIdentifier">[]</span>; <span class="synIdentifier">var</span> len = feeds.length; <span class="synStatement">for</span> (<span class="synIdentifier">var</span> i=0; i&lt;len; i++) <span class="synIdentifier">{</span> <span class="synStatement">if</span> (!_ngwords.test(feeds<span class="synIdentifier">[</span>i<span class="synIdentifier">]</span>.entry_title.replace(<span class="synConstant">/[\s_]g/</span>, <span class="synConstant">''</span>).replace(<span class="synConstant">/　/g</span>, <span class="synConstant">''</span>))) <span class="synIdentifier">{</span> newFeeds.push(feeds<span class="synIdentifier">[</span>i<span class="synIdentifier">]</span>); <span class="synIdentifier">}</span> <span class="synStatement">else</span> <span class="synIdentifier">{</span> <span class="synComment">// console.log(feeds[i].entry_title); //フィルタされたタイトル</span> <span class="synIdentifier">}</span> <span class="synIdentifier">}</span> (<span class="synStatement">new</span> Blogroll(id, config, newFeeds, is_categorize)).show(<span class="synConstant">&quot;blogroll-&quot;</span> + id); <span class="synIdentifier">}</span>; </pre><p> 設置できたら、NGワードを変えるなどして、<br> ちゃんとフィルタされているかチェックしてみてください。 </p> <p> 例えばNGワードに「ｗ」を入れると「なんとかかんとかｗｗｗｗ」みたいなタイトルが表示されなくなるはずです。 </p> <p> あとはお好みでNGワードリストに足りない用語を追加したり、逆に削ったりすれば完成です！ </p> <p> (ご注意)<br> JavaScript版ブログロールのみで、iframe版には対応してません。 </p> <p> よくまとめブログ界隈(?)で、 </p> <p> 「相互RSS経由で、時々アクセス元がわからない時があるから、<br> 　iframe版にして、iframeの下に自分のブログ名を書いておくの」 </p> <p> なんていう都市伝説がささやかれているようですが、逆ですよそれ！<br> 正しくは「<strong>iframe版にしてるからこそリンク元のブログがわからない時がある</strong>」です。 </p> <p> JavaScript版にすれば、そもそも「リンク元がわからない」なんてことは無くなるので、<br> よくわからないままiframe版を使っていた人は、この機会にJavaScript版に変えてみてはどうでしょうか。 </p> <p> 気に入った人は、このページのやり方を他の人にも教えてあげてくださいね！<br> あと、にうとくさん( <a href="http://newtoku.jp/">http://newtoku.jp/</a> )と仲良くしてくれると嬉しいです。 </p> <p> と、ここまで書いてから、ライブドア相互RSSには標準でNGワード機能がついていることに気がつきました。<br> べんりですね。<br> おわり。 </p><p></p><p><div class="addBookmarkLink"><br /> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20120904/blogroll">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20120904/blogroll" alt="『相互RSS(ブログロール)に独自のNGワードフィルタをいれる』のブックマークコメント"></a>]</div></p> Hamachiya2 なぜ２ちゃんまとめブログが好まれるのか hatenablog://entry/26003855888872810 2012-08-24T00:00:00+09:00 2012-08-24T00:00:00+09:00 ってことを、さっきの記事を書いたあと、ちょっと考えてみました。 …こんにちはこんにちは！！ ニュース系の２ちゃんまとめブログの記事ができあがるまでのコンテンツの流れって、だいたいこんな感じですよね。 テレビや新聞で元になるニュースが発表される ↓ ２ちゃんねる上にそれをコピペしたニュース速報とかのスレッドが立つ ↓ ある程度コメントがつく ↓ 元のニュース＋コメントがまとめブログに掲載される で、タイトルにある「なぜまとめブログが好まれるか」なんだけど、 もちろん嫌っている人もたくさんいますが、それは置いといて…、 なぜ元のニュースではなく、２ちゃんねるでもなく、まとめブログなのか。 それはも… <p> ってことを、<strong><a href="http://d.hatena.ne.jp/Hamachiya2/20120823/copipe">さっきの記事</a></strong>を書いたあと、ちょっと考えてみました。<br> …こんにちはこんにちは！！ </p> <p> ニュース系の２ちゃんまとめブログの記事ができあがるまでのコンテンツの流れって、だいたいこんな感じですよね。 </p> <p style="border:1px solid #777;padding: 0.5em;background:#ddf;border-radius:3px"> テレビや新聞で元になるニュースが発表される<br> ↓<br> ２ちゃんねる上にそれをコピペしたニュース速報とかのスレッドが立つ<br> ↓<br> ある程度コメントがつく<br> ↓<br> 元のニュース＋コメントがまとめブログに掲載される </p> <p> で、タイトルにある「なぜまとめブログが好まれるか」なんだけど、<br> もちろん嫌っている人もたくさんいますが、それは置いといて…、 </p> <p> なぜ元のニュースではなく、２ちゃんねるでもなく、まとめブログなのか。<br> それはもしかしたら、世の中には自信がない人が多いからなのかなー、と思いました。 </p> <p> どういう意味かというと、 </p> <p> (元ニュースに対しては)<br> このニュースに、どう反応するのが正しいことなのか自信がない。<br> 皆はどう思ってるのかを知りたい。 </p> <p> (元ニュースについたコメントに対しては)<br> どのコメントが的確なのか、どのコメントに同意すべきなのか、判断する自信がない。 </p> <p> だから<br> 「<strong>こんなニュースがありましたよ</strong>」だけではダメで、<br> 「<strong>このニュースに対して、皆がこんなこと言ってますよ</strong>」でも足りなくて、<br> 「<strong>このニュースに対して、皆がこんなこと言ってますよ。 そしてこれらの意見のうち、これに注目するべきですよ</strong>」 </p> <p> って一目で教えてくれる、まとめサイトが人気がでるのかもしれない。 </p> <p> ネットには、みのもんたもミヤネさんもいないから<br> 問題に対して「<strong style="color:#f00">深く考えずに同意してもきっと大丈夫な誰か</strong>」を求めている人が多いのかもしれないね。 </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20120824/matome">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20120824/matome" alt="『なぜ２ちゃんまとめブログが好まれるのか』のブックマークコメント"></a>] </div> Hamachiya2 ２ちゃんがダメなら、はてブをコピペすればいいじゃない hatenablog://entry/26003855888872813 2012-08-23T00:00:00+09:00 2012-08-23T00:00:00+09:00 こんにちはこんにちは！！ タイトルの通りです！ はてなブックマーク - 韓国 野田首相の親書を返送へ NHKニュース ↑ これを… こうする ↓ 「韓国 野田首相の親書を返送へ」ネットでの反応 - ニュー得ブログ まとめサイトをみてる人たちって、はてブのコメント蘭とは無縁の人が大半だろうから、 こんな風に、ちょっと見やすく(?)してあげるといいのかもしれませんね！ (追記かきました) → なぜ２ちゃんまとめブログが好まれるのか [この日記のブックマークコメントを見る/書く ] <p> こんにちはこんにちは！！<br> タイトルの通りです！ </p> <p> <strong><a class="arrowGR" href="http://b.hatena.ne.jp/entry?mode=more&url=http%3A%2F%2Fwww3.nhk.or.jp%2Fnews%2Fhtml%2F20120822%2Fk10014461211000.html">はてなブックマーク - 韓国 野田首相の親書を返送へ　NHKニュース</a></strong><br> 　　↑<br> 　これを… </p> <p> 　こうする<br> 　　↓<br> <strong><a class="arrowGR" href="http://newtoku.jp/blog-entry-1103.html">「韓国 野田首相の親書を返送へ」ネットでの反応 - ニュー得ブログ</a></strong> <a href="http://b.hatena.ne.jp/entry/newtoku.jp/blog-entry-1103.html"><img src="http://b.hatena.ne.jp/entry/image/http://newtoku.jp/blog-entry-1103.html" alt="『「韓国 野田首相の親書を返送へ」ネットでの反応 - ニュー得ブログ』のブックマークコメント"></a> </p> <p> まとめサイトをみてる人たちって、はてブのコメント蘭とは無縁の人が大半だろうから、<br> こんな風に、ちょっと見やすく(?)してあげるといいのかもしれませんね！ </p> <p> <strong>(追記かきました) → <a href="http://d.hatena.ne.jp/Hamachiya2/20120824/matome">なぜ２ちゃんまとめブログが好まれるのか</a></strong> </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20120823/copipe">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20120823/copipe" alt="『２ちゃんがダメなら、はてブをコピペすればいいじゃない』のブックマークコメント"></a>] </div> Hamachiya2 ライブドアみたいにスクロールしたらサイドバーの広告を固定する hatenablog://entry/26003855888872818 2012-08-20T00:00:00+09:00 2012-08-20T00:00:00+09:00 こんにちはこんにちは！！ 夏ですね！ 真夏ですね！！ ところで最近、ライブドアの一部の人気ブログで、サイドバーの挙動に「んん？」って思ったことありませんか！ …百聞は一見にしかずってことで、実際の例をみてみましょう！ ※PC版のみです ハムスター速報 (左のサイドバーを見ながら、下にスクロールしてください) 痛いニュース(ﾉ∀`) (右のサイドバーを見ながら、下にスクロールしてください) ある程度スクロールすると、サイドバーの広告がぴたっと固定されますね！ これって流行りなんでしょうか…！ そんなわけで、もしかしたら同じことをやりたい人が他にもいるのかも？と思って、 コピペで使えるJavaSc… <p> こんにちはこんにちは！！<br> 夏ですね！ 真夏ですね！！ </p> <p> ところで最近、<strong><a href="http://blog.livedoor.com/ranking/">ライブドアの一部の人気ブログ</a></strong>で、サイドバーの挙動に「んん？」って思ったことありませんか！<br> …百聞は一見にしかずってことで、実際の例をみてみましょう！ </p> <p> ※PC版のみです<br> <a href="http://hamusoku.com/">ハムスター速報</a> (左のサイドバーを見ながら、下にスクロールしてください)<br> <a href="http://blog.livedoor.jp/dqnplus/">痛いニュース(ﾉ∀`)</a> (右のサイドバーを見ながら、下にスクロールしてください) </p> <p> ある程度スクロールすると、サイドバーの広告がぴたっと固定されますね！<br> これって流行りなんでしょうか…！ </p> <p> そんなわけで、もしかしたら同じことをやりたい人が他にもいるのかも？と思って、<br> コピペで使えるJavaScriptにしてみました！ </p> <p> ↓ 動作サンプルです！ </p> <p> <strong><a class="arrowGR" href="http://hamachiya.com/junk/sidewinder.html">スクロールしたらサイドバーの広告を固定するスクリプトの動作サンプル</a></strong> </p> <p> ↓ コードはこれです！ 適当にコピペしてブログに貼り付けてね！ </p> <pre class="code lang-javascript" data-lang="javascript" data-unlink>&lt;script type=<span class="synConstant">&quot;text/javascript&quot;</span> src=<span class="synConstant">&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;</span>&gt;&lt;/script&gt; &lt;script type=<span class="synConstant">&quot;text/javascript&quot;</span>&gt; (<span class="synIdentifier">function</span>($) <span class="synIdentifier">{</span> $(<span class="synStatement">document</span>).ready(<span class="synIdentifier">function</span>() <span class="synIdentifier">{</span> <span class="synComment">/*</span> <span class="synComment"> Ads Sidewinder</span> <span class="synComment"> by Hamachiya2. http://d.hatena.ne.jp/Hamachiya2/20120820/adsense_sidewinder</span> <span class="synComment"> */</span> <span class="synIdentifier">var</span> main = $(<span class="synConstant">'#main'</span>); <span class="synComment">// メインカラムのID</span> <span class="synIdentifier">var</span> side = $(<span class="synConstant">'#side'</span>); <span class="synComment">// サイドバーのID</span> <span class="synIdentifier">var</span> wrapper = $(<span class="synConstant">'#ad1'</span>); <span class="synComment">// 広告を包む要素のID</span> <span class="synIdentifier">var</span> w = $(<span class="synStatement">window</span>); <span class="synIdentifier">var</span> wrapperHeight = wrapper.outerHeight(); <span class="synIdentifier">var</span> wrapperTop = wrapper.offset().<span class="synStatement">top</span>; <span class="synIdentifier">var</span> sideLeft = side.offset().left; <span class="synIdentifier">var</span> sideMargin = <span class="synIdentifier">{</span> <span class="synStatement">top</span>: side.css(<span class="synConstant">'margin-top'</span>) ? side.css(<span class="synConstant">'margin-top'</span>) : 0, right: side.css(<span class="synConstant">'margin-right'</span>) ? side.css(<span class="synConstant">'margin-right'</span>) : 0, bottom: side.css(<span class="synConstant">'margin-bottom'</span>) ? side.css(<span class="synConstant">'margin-bottom'</span>) : 0, left: side.css(<span class="synConstant">'margin-left'</span>) ? side.css(<span class="synConstant">'margin-left'</span>) : 0 <span class="synIdentifier">}</span>; <span class="synIdentifier">var</span> winLeft; <span class="synIdentifier">var</span> pos; <span class="synIdentifier">var</span> scrollAdjust = <span class="synIdentifier">function</span>() <span class="synIdentifier">{</span> sideHeight = side.outerHeight(); mainHeight = main.outerHeight(); mainAbs = main.offset().<span class="synStatement">top</span> + mainHeight; <span class="synIdentifier">var</span> winTop = w.scrollTop(); winLeft = w.scrollLeft(); <span class="synIdentifier">var</span> winHeight = w.height(); <span class="synIdentifier">var</span> nf = (winTop &gt; wrapperTop) &amp;&amp; (mainHeight &gt; sideHeight) ? <span class="synConstant">true</span> : <span class="synConstant">false</span>; pos = !nf ? <span class="synConstant">'static'</span> : (winTop + wrapperHeight) &gt; mainAbs ? <span class="synConstant">'absolute'</span> : <span class="synConstant">'fixed'</span>; <span class="synStatement">if</span> (pos === <span class="synConstant">'fixed'</span>) <span class="synIdentifier">{</span> side.css(<span class="synIdentifier">{</span> position: pos, <span class="synStatement">top</span>: <span class="synConstant">''</span>, bottom: winHeight - wrapperHeight, left: sideLeft - winLeft, margin: 0 <span class="synIdentifier">}</span>); <span class="synIdentifier">}</span> <span class="synStatement">else</span> <span class="synStatement">if</span> (pos === <span class="synConstant">'absolute'</span>) <span class="synIdentifier">{</span> side.css(<span class="synIdentifier">{</span> position: pos, <span class="synStatement">top</span>: mainAbs - sideHeight, bottom: <span class="synConstant">''</span>, left: sideLeft, margin: 0 <span class="synIdentifier">}</span>); <span class="synIdentifier">}</span> <span class="synStatement">else</span> <span class="synIdentifier">{</span> side.css(<span class="synIdentifier">{</span> position: pos, marginTop: sideMargin.<span class="synStatement">top</span>, marginRight: sideMargin.right, marginBottom: sideMargin.bottom, marginLeft: sideMargin.left <span class="synIdentifier">}</span>); <span class="synIdentifier">}</span> <span class="synIdentifier">}</span>; <span class="synIdentifier">var</span> resizeAdjust = <span class="synIdentifier">function</span>() <span class="synIdentifier">{</span> side.css(<span class="synIdentifier">{</span> position:<span class="synConstant">'static'</span>, marginTop: sideMargin.<span class="synStatement">top</span>, marginRight: sideMargin.right, marginBottom: sideMargin.bottom, marginLeft: sideMargin.left <span class="synIdentifier">}</span>); sideLeft = side.offset().left; winLeft = w.scrollLeft(); <span class="synStatement">if</span> (pos === <span class="synConstant">'fixed'</span>) <span class="synIdentifier">{</span> side.css(<span class="synIdentifier">{</span> position: pos, left: sideLeft - winLeft, margin: 0 <span class="synIdentifier">}</span>); <span class="synIdentifier">}</span> <span class="synStatement">else</span> <span class="synStatement">if</span> (pos === <span class="synConstant">'absolute'</span>) <span class="synIdentifier">{</span> side.css(<span class="synIdentifier">{</span> position: pos, left: sideLeft, margin: 0 <span class="synIdentifier">}</span>); <span class="synIdentifier">}</span> <span class="synIdentifier">}</span>; w.on(<span class="synConstant">'load'</span>, scrollAdjust); w.on(<span class="synConstant">'scroll'</span>, scrollAdjust); w.on(<span class="synConstant">'resize'</span>, resizeAdjust); <span class="synIdentifier">}</span>); <span class="synIdentifier">}</span>)(jQuery); &lt;/script&gt; </pre><p> ただし、この方法は、今のところライブドアの一部の<strong><a href="http://www31.atwiki.jp/tototuu/pages/109.html">特別な契約</a></strong>(?)をしているブログがやっているだけなので、<br> 他の人がマネするとAdsenseポリシー違反になるかもしれません＞＜<br> やるなら自己責任でね！ </p> <p> (普通の人がやってもokなのかどうかは、一応Googleに問い合わせ中です) </p> <p> <strong style="color:#f21">(追記)</strong><br> と思ったら、さっそくGoogleから返事がきたので共有しますね！ </p> <blockquote> 大変恐れ入りますが、いかなる方法でもお客様が Google 広告の動作を変更することは許可しておりません。<br> スクロールしても広告が表示されるような設定はご遠慮くださいませ。<br> お問い合わせのウェブ サイトがプログラム ポリシーに違反している場合は、Google で該当のアカウントに対して所定の措置を取らせていただきます。 </blockquote> <p> ざんねん…＞＜ </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20120820/adsense_sidewinder">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20120820/adsense_sidewinder" alt="『スクロールしたらサイドバーの広告を固定する』のブックマークコメント"></a>] </div> Hamachiya2 ドリームメーカーというサイトをつくりました hatenablog://entry/26003855888872827 2012-07-31T00:00:00+09:00 2012-07-31T00:00:00+09:00 こんにちはこんにちは！！ ドリームメーカーというサイトをつくってみました。 ドリームメーカー : ブラウザで簡単にノベルゲームが作成できるWebサイト これはどんなサイトかというと、 「誰でも簡単にアドベンチャーゲームがつくれて、公開できる」 というものを目指しています。 バックエンドのプログラミングとか、サーバーの設定とかはちょっと苦手なんですが、 がんばって一人で作ってみました。 まだできたてなので、足りないところも多いですが、 よかったら遊んでみてください！ [この日記のブックマークコメントを見る/書く ] <p> こんにちはこんにちは！！ </p> <p> ドリームメーカーというサイトをつくってみました。 </p> <p> <strong><a class="arrowGR" href="http://dreamaker.jp/">ドリームメーカー : ブラウザで簡単にノベルゲームが作成できるWebサイト</a></strong> </p> <p> これはどんなサイトかというと、<br> 「誰でも簡単にアドベンチャーゲームがつくれて、公開できる」<br> というものを目指しています。 </p> <p> バックエンドのプログラミングとか、サーバーの設定とかはちょっと苦手なんですが、<br> がんばって一人で作ってみました。 </p> <p> まだできたてなので、足りないところも多いですが、<br> よかったら遊んでみてください！ </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20120731/dreamaker">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20120731/dreamaker2" alt="『ドリームメーカーというサイトをつくりました』のブックマークコメント"></a>] </div> Hamachiya2 Amazon EC2 を使った無限IPアドレスの作り方 hatenablog://entry/26003855888872830 2012-06-12T00:00:00+09:00 2012-06-12T00:00:00+09:00 こんにちはこんにちは！！ たまにIPアドレスがたくさん必要な時ってありますよね。 ぼくも先日そういう機会があって、ちょっと困りました。 で、「AmazonさんならIPいっぱいもってるのでは？」ってことで、 ちまたで話題のクラウドサービス Amazon Web Servise を試してみました！ あ、もちろんタイトルは煽りぎみで実際にはIPアドレスは有限なんですが＞＜ 正直、クラウドとかサーバーとかよくわかってなかったんですが、 とりあえず試してみたら意外と簡単にできたので、忘れないようにメモしておきます！ そうそう、Amazonのクラウドって高そうなイメージがあるけど、いまだと制限つきで無料ら… <p> こんにちはこんにちは！！ </p> <p> たまにIPアドレスがたくさん必要な時ってありますよね。<br> ぼくも先日そういう機会があって、ちょっと困りました。 </p> <p> で、「AmazonさんならIPいっぱいもってるのでは？」ってことで、<br> ちまたで話題のクラウドサービス Amazon Web Servise を試してみました！<br> あ、もちろんタイトルは煽りぎみで実際にはIPアドレスは有限なんですが＞＜ </p> <p> 正直、クラウドとかサーバーとかよくわかってなかったんですが、<br> とりあえず試してみたら意外と簡単にできたので、忘れないようにメモしておきます！ </p> <p> そうそう、Amazonのクラウドって高そうなイメージがあるけど、いまだと<a href="http://aws.amazon.com/jp/free/faqs/">制限つきで無料</a>らしいので、お得ですね！<br> もし無料枠こえても、無茶な使い方をしない限りはそれほど高くない。と思います。たぶん。<br> 制限を見る限り、とりあえず一ヶ月がっつり試すだけならタダです！ </p> <p> 必要なもの：<br> ・クレジットカード (無料利用でも登録が必要です＞＜) </p> <p> あった方がいいもの：<br> ・UNIXライクなOS (ぼくは実験用マシン代わりに<a href="http://vps.sakura.ad.jp/">さくらVPS</a>を使ってます！980円のやつ) </p> <p> 以下その手順です！<br> 初心者が数時間ほどでやったものなので色々間違えてるかもしれませんが、何かの参考になれば…！<br> あともっと良い方法があれば教えて欲しいです。 </p> <h3 class="textHeader">1. Amazon Web Service (AWS) に登録します (5分くらいでできます)</h3> <p> <a href="http://aws.amazon.com/jp/">AWSトップページ</a>からサインアップします。 </p> <p> 英語が苦手なぼくでもできるくらい簡単です！<br> フォーム横に例文が書かれてるので、その通りに電話番号とかを入力します。<br> すると、Amazonから自動音声(日本語)の電話がかかってくるので、暗証番号をプッシュすれば完了です！ </p> <h3 class="textHeader">2. インスタンスを作ってみる (5分くらいでできます)</h3> <p> インスタンスっていうのは、バーチャルなサーバーの機械です。<br> それを作ったり消したり増やしたりできるのが Amazon Web Service の EC2 です。<br> タダなのでとりあえず１こ作ってみましょう！ </p> <p> AWS登録後、右上のメニューから「<strong>Management Control</strong>」にいきます。<br> そこで「<strong>EC2</strong>」という項目をクリック！ 管理画面がでます！ </p> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120612/20120612150457.png" width="307" height="135" alt="AWS Management Console" style="border:1px solid #999"> </p> <p> まず左上にリージョン(Region)っていうのがありますよね。<br> 「US East (Virginia)」ってなってるかも？ これはたぶんサーバーの場所です。<br> Japanに変更してもいいけど、とりあえずデフォルトのUS Eastのままにしておきました。 </p> <p> そんなことより「<strong>Launch Instance</strong>」ボタンが画面の真ん中で「押してください！」って感じでアピールしているのでクリックします！ </p> <p> するとウイザードっぽい作成画面がでます。これがインスタンス作る画面。<br> ウイザード形式は「<strong>Classic Wizard</strong>」をチョイスしました。 </p> <p> <strong>â– OS選択</strong><br> ぼくは一番上にあった <strong>Amazon Linux AMI 2012.03 の 64bit</strong> を選びました。<br> (amzn-ami-pv-2012.03.1.x86_64-ebs)<br> 横に☆マークがついてるやつが無料で使えるやつみたい。 </p> <p> <strong>■詳細設定</strong><br> Typeが <strong>micro</strong> になっているのを確認。 micro以外は有料ですよ！<br> 次の Advanced Instance Options とか Add tags とかは、特に何もせずにそのまま進みます。 </p> <p> <strong>■キーペア作成</strong><br> SSHの鍵をダウンロードできます。<br> 「my_ec2_key」とかわかりやすい名前をつけておいてダウンロードしておきます。 </p> <p> <strong>■ファイヤーウォール設定</strong><br> ここ大事です！<br> <strong>Create a new Security Group</strong> をチェック。<br> Group Name に「my_firewall」と適当な名前を入れておきます。 </p> <p> セレクトボックスから <strong>SSH</strong> (22) を選んで Add、<br> 次に <strong>Custum TCP rule</strong> を選んで、ポートに <strong>3128</strong> (Squidのデフォルトポート) を入力して Addします。<br> あと今回はテスト的に、<strong>HTTP</strong> (80) ã‚‚ Add しておきます。 </p> <p> Source は 0.0.0.0/0 のままなら、どのIPアドレスからでも繋げられます。<br> 今回はこのままで大丈夫。 </p> <p> Descriptionに空けたポートの説明を書いておくなどします。<br> 「SSH, HTTP, 3128」とか。 </p> <p> それぞれを Add した後、右にこの3つのポートが追加されたのを確認して continue！<br> これで最初のインスタンスが完成しました！ やった！ </p> <h3 class="textHeader">3. インスタンスを確認 (1分くらい)</h3> <p> 管理画面の左メニューの <strong>Instances</strong> をクリックしましょう！ </p> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120612/20120612210042.png" width="730" height="336" alt="AWS Management Console" style="border:1px solid #999"> </p> <p> 一覧の中に、さっき作ったインスタンスがいますか！ (いなければ左上のリージョンを確認しましょう)<br> インスタンスが、数十秒待ってもペンディング状態のままなら右上のリフレッシュボタンで画面更新！ </p> <p> 一覧の中のインスタンスをクリックすると下に詳細が表示されます。<br> 「<strong style="color:#36f">ec2-xxx-xxx-xxx-xxx.compute-1.amazonaws.com</strong>」<br> 詳細のところにこんな青文字のアドレスがありますよね！<br> これが外からインスタンスに繋ぐためのアドレス(<strong style="color:#f00">Public DNS</strong>)です！ </p> <h3 class="textHeader">4. さっそくつないでみる (3分くらい)</h3> <p> <strong>Windows(Teraterm)からつなぐ場合：</strong><br> 管理画面の一覧のインスタンス名を<strong style="color:#f00">右</strong>クリック → Connect<br> 「<strong>Connect from your browser using the Java SSH Client (Java Required)</strong>」をクリック。<br> User name を確認しておく。Amazon Linux AMI のデフォルトなら「<strong>ec2-user</strong>」です。 </p> <p> terateram を起動して、ホストにインスタンスの Public DNS を入れて SSH2 を選択。<br> User name はさっきの「ec2-user」、password は空のままで、「RSA/DSA鍵を使う」を選択します。<br> ファイル選択ダイアログで「すべてのファイル」を選び、さっきのpemファイル選択。<br> これでログインできます！ </p> <p> <strong>UnixライクOSから繋ぐ場合：</strong><br> 管理画面の一覧のインスタンス名を<strong style="color:#f00">右</strong>クリック → Connect<br> 「<strong>Connect with a standalone SSH Client</strong>」をクリックするとやり方が書いてあります。<br> まずダウンロードした鍵ファイルのパーミッションを変更しておきます。<br> 変更しておかないと怒られます。 </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synStatement">&gt;</span> <span class="synStatement">chmod</span> <span class="synConstant">400</span> my_ec2.pem </pre><p> あとは画面のExampleの通り </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synStatement">&gt;</span> ssh <span class="synSpecial">-i</span> pemファイルのpath/my_ec2.pem [email protected] </pre><p> これでログインできます！ </p> <p> ログインしたら、とりあえずめんどくさいのでrootになります。 </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synStatement">&gt;</span> sudo su - </pre><p> これでパスワードなしでrootになれます。 </p> <h3 class="textHeader">5. 試しにWebサーバーを立ててみる (2分くらい)</h3> <p> ためしにWebサーバーを入れてみます。(必要ないならやらなくていいです) </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># yum install httpd</span> ... <span class="synStatement">[</span>y/N<span class="synStatement">]</span> y </pre><p> これでWebサーバーのインストール完了です。本当に簡単ですね。<br> さっそく立ち上げましょう！ </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># service httpd start</span> </pre><p> Webサーバーが起動しました！ </p> <p> PCのブラウザからインスタンスのアドレス(Public DNS)にアクセス！<br> Apacheのデフォルト画面が表示されたら成功！<br> ちゃんと外から繋げるみたいですね！ </p> <p> それが確認できたらwebサーバーを停止します。 </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># service httpd stop</span> </pre><p> もし再起動後もWebサーバーを立ち上げたい場合は </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># chkconfig httpd on</span> <span class="synComment"># chkconfig httpd --list</span> </pre><p> こんな感じにします。今回は別にしなくていいです。 </p> <h3 class="textHeader">6. 無限IPを実現するためのProxyサーバーを入れる (10分くらい)</h3> <p> といってもWebサーバのセットアップと同じで数分でできます。 </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># yum install squid</span> ... <span class="synStatement">[</span>y/N<span class="synStatement">]</span> y </pre><p> インストール完了！ </p> <p> ここから設定ファイル(squid.conf)の設定です。<br> viエディタ使います。 </p> <p> viの使い方ははぶくので、わからない人はぐぐってください。<br> /(検索)と、i(文字挿入)と、a(文字追加)と、A(末尾に追加)と、dd(行削除)と、ZZ(保存して終了)と、:q!(保存せずに終了)と…、<br> あとは、困った時のESC連打→:q!くらい知っていればなんとかなると思います。<br> ぼくもそのくらいしか知りません。 </p> <p> まず念のために元の設定ファイルをコピーしておきます。 </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># cp /etc/squid/squid.conf /etc/squid/squid.conf.org</span> </pre><p> ここで初心者tipsです！<br> /etc/squ みたいに、途中まで打ち込んだところでtabキーを押すと残りのpathが補完されますよ！ べんり！ </p> <p> confファイルを編集します。 </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># vi /etc/squid/squid.conf</span> </pre><p> 接続許可したいIPアドレス…つまり自分のプロバイダのIPとかを、適当な名前をつけて列挙します。 </p> <pre class="code lang-sh" data-lang="sh" data-unlink>... acl CONNECT method CONNECT acl sakura src XXX.XXX.XXX.XXX/255.255.255.255 <span class="synComment"># (追加) 接続許可したいIPアドレス(ぼくのsakuraサーバー)</span> acl lan src XXX.XXX.XXX.XXX/255.255.255.255 <span class="synComment"># (追加) 接続許可したいIPアドレス(ぼくのlan)</span> <span class="synComment"># 自分のIPアドレスがわからない人は懐かしの確認君(http://www.ugtop.com/spill.shtml)とかで見てください</span> ... http_access allow localhost http_access allow sakura <span class="synComment"># (追加) さっき追加したIPの名前</span> http_access allow lan <span class="synComment"># (追加) さっき追加したIPの名前</span> http_access deny all <span class="synComment"># ↑必ずこのdenyより上に書く</span> ... <span class="synComment"># 最終行に以下を追加します。Proxyの匿名性を高める設定です。</span> request_header_access X-Forwarded-For deny all <span class="synComment"># (追加)</span> request_header_access Via deny all <span class="synComment"># (追加)</span> request_header_access Cache-Control deny all <span class="synComment"># (追加)</span> </pre><p> confファイルの設定が終わったら、Proxyサーバーを起動します！ </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># service squid start</span> </pre><p> うまく立ち上がりましたか！<br> うまくいかない場合はconfが間違ってると思うので、エラーをググったりして修正した後、squidを再起動してください。 </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># service squid restart</span> </pre><h3 class="textHeader">7. Proxyを確認しよう (5分くらい)</h3> <p> Proxyがうまく動いてるか、ブラウザで確認してみましょう！<br> ブラウザのプロキシ設定に、インスタンスの Public DNS をいれて、ポート3128を設定します。<br> その状態でGoogleとか開けますか！ </p> <p> もしここで反応が返ってこなかったり、エラーが表示される場合は、やっぱり何かミスってます！ </p> <p> ・ほんとにインスタンスのFirewallのポート3128開けましたか？<br> ・squid.confに自分のipアドレス書きましたか？ ( acl ZZZ src XXX.XXX.XXX.XXX/255.255.255.255 )<br> ・そのipアドレス許可しましたか？ ( http_access allow ZZZ )<br> ・squidはエラーなく起動しましたか？<br> ・squidをリスタート ( service squid restart ) してみるとどうなります？ </p> <p> このあたりを再チェック！<br> うまくいったら、<a href="http://taruo.net/e/">懐かしのProxy診断サイト「診断君」</a>にアクセスです！ </p> <p> 「<strong>proxyの兆候は全く見られません</strong>」と表示されればok！<br> 匿名Proxyが完成しました！<br> あとはProxyサーバーを自動起動するように設定しておきましょう。 </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># chkconfig squid on</span> <span class="synComment"># chkconfig squid --list</span> </pre><p> 一応、squid.confをローカルPCにも、コピペなりで保存しておくといいかもしれませんね！<br> あとでインスタンス作り直す時に便利かもしれません。 </p> <p> あと、ここまで設定できた時点で、<br> ぼくはAWS管理画面から、インスタンス右クリック → Create Image (EBS AMI) をやっておきました。<br> これをしておくと、いま設定したものと同じ状態のインスタンスを、いくつでも、すぐに立ち上げられるようになります。 </p> <p> Imageの作成には結構時間がかかります。数時間くらい？<br> でもImageから新しいインスタンスの起動は数十秒でできます！ すごい！ </p> <p> ぼくは同じ状態のインスタンスを8つほどつくっておきました。<br> なぜ沢山つくったのかというと、無限IPアドレスの為の布石です。 </p> <h3 class="textHeader">7. IPアドレスが変化するのを確認する (2分くらい)</h3> <p> 管理画面から、右クリックメニューで、インスタンスを stop → start すると<br> IPアドレスが切り替わることが確認できると思います。<br> 間違ってterminateしちゃだめですよ。 </p> <p> どうやらrebootではipアドレスが変わりません。<br> だからIPを切り替えるにはstop→startが良いようですね！ </p> <p> でもいちいち管理画面からクリックしてstart-stopとかやってられません＞＜<br> なのでAPIを使うことにしましょう！ </p> <h3 class="textHeader">8. EC2 API Tools をセットアップする (10分くらい)</h3> <p> APIの利用は手元のLinuxからやります。Windowsでもできるみたいだけど…。<br> なので以下はさくらvpsでの作業です！ </p> <p> <a href="http://aws.amazon.com/developertools/351">公式の Amazon EC2 API Tools</a> のページから、API Toolsをダウンロード </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># wget ダウンロードのurl</span> <span class="synComment"># unzip ec2-api-tools.zip</span> </pre><p> 解凍したディレクトリ名を「ec2-api-tools」などの簡単な名前にしておきます。 </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># mv ec2-api-tools-1.5.4.0 ec2-api-tools</span> </pre><p> 次に API用の鍵をもらいにいきます。<br> AWS管理画面の右上のメニューから「<strong>Security Credentials</strong>」をクリック。 </p> <p> 画面中央の「<strong>X.509証明書</strong>」タブをクリック。<br> 「<strong>新しい証明書を作成する</strong>」をクリック。 </p> <p> すると「X.509証明書が作成されました」というメッセージとともに<br> <strong>Download Private Key File</strong> と、<br> <strong>Download X.509 Certificate</strong> というボタンが出るので、<br> どちらもダウンロードしておき /root/ec2keys/ などにおいておきます。 </p> <p> APIの実行にはJavaの実行環境が必要らしいのでインストールします。 </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># yum install java-1.6.0-openjdk</span> </pre><p> 次にAPIを使うための環境変数の設定です。<br> .bashrc に追記します。 </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># vi ~/.bashrc</span> </pre><pre class="code lang-sh" data-lang="sh" data-unlink><span class="synStatement">export</span><span class="synIdentifier"> JAVA_HOME=</span><span class="synStatement">&quot;</span><span class="synConstant">/usr/lib/jvm/jre-1.6.0-openjdk.x86_64/</span><span class="synStatement">&quot;</span> <span class="synStatement">export</span><span class="synIdentifier"> EC2_HOME=</span><span class="synStatement">&quot;</span><span class="synConstant">/root/ec2-api-tools</span><span class="synStatement">&quot;</span> <span class="synStatement">export</span><span class="synIdentifier"> EC2_PRIVATE_KEY=</span><span class="synStatement">&quot;</span><span class="synConstant">/root/ec2keys/pk-*****************************.pem</span><span class="synStatement">&quot;</span> <span class="synStatement">export</span><span class="synIdentifier"> EC2_CERT=</span><span class="synStatement">&quot;</span><span class="synConstant">/root/ec2keys/cert-******************************.pem</span><span class="synStatement">&quot;</span> <span class="synStatement">export</span><span class="synIdentifier"> PATH=</span><span class="synStatement">&quot;</span><span class="synPreProc">${PATH}</span><span class="synConstant">:</span><span class="synPreProc">${EC2_HOME}</span><span class="synConstant">/bin</span><span class="synStatement">&quot;</span> </pre><p> 追記した .bashrcファイルを読み込みなおします。 </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># source ~/.bashrc</span> </pre><p> セットアップ完了！ 動くか確認します。 </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># ec2ver</span> 1.5.4.0 <span class="synConstant">2012-05-01</span> </pre><p> もしここで、JAVA_HOMEないよとかエラーになるようなら、javaを探します。 </p> <p> JAVA_HOMEの見つけ方： </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># which java</span> /usr/bin/java <span class="synComment"># ls -l /usr/bin/java</span> lrwxrwxrwx <span class="synConstant">1</span> root root /usr/bin/java -<span class="synStatement">&gt;</span> /etc/alternatives/java <span class="synComment"># ls -l /etc/alternatives/java</span> lrwxrwxrwx <span class="synConstant">1</span> root root /etc/alternatives/java -<span class="synStatement">&gt;</span> /usr/lib/jvm/jre-1.6.0-openjdk.x86_64/bin/java <span class="synComment"># ls -l /usr/lib/jvm/jre-1.6.0-openjdk.x86_64/bin/java</span> -rwxr-xr-x <span class="synConstant">1</span> root root /usr/lib/jvm/jre-1.6.0-openjdk.x86_64/bin/java <span class="synComment"># ←これだ！ bin/javaの手前までがJAVA_HOME</span> </pre><p> こんな感じで which の後、ls -l でリンクを最後まで追うとわかります。 </p> <h3 class="textHeader">9. EC2 API Tools を試してみる (10分くらい)</h3> <p> 試しにAPIでインスタンス一覧を出してみます。 </p> <pre class="code lang-sh" data-lang="sh" data-unlink><span class="synComment"># ec2-describe-instances -region us-east-1</span> </pre><p> 何か情報が表示されましたか！<br> もし何もでないならリージョンの設定を間違えてるのかもしれません。<br> リージョンの一覧はこのページとか参考になります → <a href="http://blog.withsin.net/2011/05/13/ec2-tips-region/">リージョンを固定する方法 at technote</a> </p> <p> 色々やってみましょう！ </p> <pre class="code lang-sh" data-lang="sh" data-unlink>インスタンスを指定してみる <span class="synPreProc">(</span><span class="synSpecial">i-で始まる部分はインスタンスID</span><span class="synPreProc">)</span> <span class="synComment"># ec2-describe-instances i-XXXXXX -region us-east-1</span> </pre><pre class="code lang-sh" data-lang="sh" data-unlink>必要そうな行だけだしてみる <span class="synComment"># ec2-describe-instances i-XXXXXX -region us-east-1 | grep &quot;INSTANCE&quot;</span> </pre><pre class="code lang-sh" data-lang="sh" data-unlink>出力をフィルタしてみる ※startしてるインスタンスのみ出力 ec2-describe-instances <span class="synSpecial">-region</span> us-east<span class="synConstant">-1</span> <span class="synSpecial">-F</span> <span class="synStatement">&quot;</span><span class="synConstant">instance-state-code=16</span><span class="synStatement">&quot;</span> | <span class="synStatement">grep</span> <span class="synStatement">&quot;</span><span class="synConstant">INSTANCE</span><span class="synStatement">&quot;</span> </pre><div style="margin-left:1em"> ※ instance-state-codeの一覧<br> <table border="1" cellpadding="2" cellspacing="0"> <tr><td>0</td><td>pending</td></tr> <tr><td>16</td><td>running</td></tr> <tr><td>32</td><td>shutting-down</td></tr> <tr><td>48</td><td>terminated</td></tr> <tr><td>64</td><td>stopping</td></tr> <tr><td>80</td><td>stopped</td></tr> </table> </div> <pre class="code lang-sh" data-lang="sh" data-unlink>インスタンスを停止してみる <span class="synComment"># ec2-stop-instances i-XXXXXX -region us-east-1</span> </pre><pre class="code lang-sh" data-lang="sh" data-unlink>インスタンスを開始してみる <span class="synComment"># ec2-start-instances i-XXXXXX -region us-east-1</span> </pre><p> コマンドラインから自由自在ですね！やりました！ </p> <h3 class="textHeader">10. プログラムからAPIを使ってみよう (30分くらい)</h3> <p> でもいちいちコンソールから入力していたら、<br> Webの管理画面でクリックしているのとそう変わりませんよね。 </p> <p> だからこれをプログラムから自動的に制御できるようにしてみます。<br> 例えば、呼び出されるたびに現在のProxyを停止させて、<br> 新しいProxyを開始させ、新しいProxyのアドレスを表示するPHPプログラムの例。 </p> <pre class="code lang-php" data-lang="php" data-unlink><span class="synSpecial">&lt;?php</span> <span class="synComment">// EC2で複数のインスタンスをグルグルとStop→StartしてIP切り替えるやつ</span> <span class="synComment">// 呼び出されると現在のproxyã‚’stopし、次のproxyのアドレスを表示し、次の次のrproxyをスタンバイとして起動する</span> <span class="synComment">// by Hamachiya2.</span> <span class="synPreProc">echo</span> '<span class="synConstant">&lt;html&gt;&lt;body&gt;&lt;pre&gt;</span>'; <span class="synComment">// API Tools 環境変数の設定</span> <span class="synIdentifier">putenv</span><span class="synSpecial">(</span>'<span class="synConstant">JAVA_HOME=/usr/lib/jvm/jre-1.6.0-openjdk.x86_64/</span>'<span class="synSpecial">)</span>; <span class="synIdentifier">putenv</span><span class="synSpecial">(</span>'<span class="synConstant">EC2_HOME=/root/ec2-api-tools</span>'<span class="synSpecial">)</span>; <span class="synComment">// pk-*.pemファイルのありか</span> <span class="synIdentifier">putenv</span><span class="synSpecial">(</span>'<span class="synConstant">EC2_PRIVATE_KEY=/root/ec2keys/pk-XXXXXXXX.pem</span>'<span class="synSpecial">)</span>; <span class="synComment">// cert-*.pemファイルのありか</span> <span class="synIdentifier">putenv</span><span class="synSpecial">(</span>'<span class="synConstant">EC2_CERT=/root/ec2keys/cert-XXXXXXXX.pem</span>'<span class="synSpecial">)</span>; <span class="synStatement">$</span><span class="synIdentifier">api</span> <span class="synStatement">=</span> '<span class="synConstant">/root/ec2-api-tools/bin/</span>'; <span class="synStatement">$</span><span class="synIdentifier">region</span> <span class="synStatement">=</span> '<span class="synConstant">us-east-1</span>'; <span class="synComment">// EC2インスタンスIDを列挙しておく。</span> <span class="synStatement">$</span><span class="synIdentifier">insts</span> <span class="synStatement">=</span> <span class="synType">array</span><span class="synSpecial">(</span> '<span class="synConstant">i-XXXXXXXX</span>', '<span class="synConstant">i-XXXXXXXX</span>', '<span class="synConstant">i-XXXXXXXX</span>', <span class="synSpecial">)</span>; <span class="synComment">// proxy情報ファイルが無ければ作成</span> <span class="synStatement">if</span> <span class="synSpecial">(</span><span class="synStatement">!</span> <span class="synIdentifier">file_exists</span><span class="synSpecial">(</span>'<span class="synConstant">./now_proxy</span>'<span class="synSpecial">))</span> <span class="synSpecial">{</span> fo<span class="synSpecial">(</span>'<span class="synConstant">./now_proxy</span>', '<span class="synConstant">w</span>', <span class="synStatement">$</span><span class="synIdentifier">insts</span><span class="synSpecial">[</span><span class="synConstant">0</span><span class="synSpecial">]</span> <span class="synStatement">.</span> &quot;<span class="synSpecial">\t</span>&quot;<span class="synSpecial">)</span>; <span class="synSpecial">}</span> <span class="synComment">// ファイルに保存してある現在のproxy情報読み込み</span> <span class="synComment">// 保存形式: インスタンスID [tab] PublicDNS</span> <span class="synStatement">$</span><span class="synIdentifier">row</span> <span class="synStatement">=</span> fo<span class="synSpecial">(</span>'<span class="synConstant">./now_proxy</span>', '<span class="synConstant">r</span>'<span class="synSpecial">)</span>; <span class="synStatement">$</span><span class="synIdentifier">temp</span> <span class="synStatement">=</span> <span class="synIdentifier">explode</span><span class="synSpecial">(</span>&quot;<span class="synSpecial">\t</span>&quot;, <span class="synStatement">$</span><span class="synIdentifier">row</span><span class="synSpecial">)</span>; <span class="synStatement">$</span><span class="synIdentifier">now_proxy</span> <span class="synStatement">=</span> <span class="synType">array</span><span class="synSpecial">(</span> '<span class="synConstant">inst</span>' <span class="synStatement">=&gt;</span> <span class="synStatement">$</span><span class="synIdentifier">temp</span><span class="synSpecial">[</span><span class="synConstant">0</span><span class="synSpecial">]</span>, '<span class="synConstant">pdns</span>' <span class="synStatement">=&gt;</span> <span class="synStatement">$</span><span class="synIdentifier">temp</span><span class="synSpecial">[</span><span class="synConstant">1</span><span class="synSpecial">]</span> <span class="synSpecial">)</span>; <span class="synComment">// now_proxyの添え字を調べる</span> <span class="synStatement">for</span> <span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">now</span><span class="synStatement">=</span><span class="synConstant">0</span>; <span class="synStatement">$</span><span class="synIdentifier">now</span><span class="synStatement">&lt;</span><span class="synIdentifier">count</span><span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">insts</span><span class="synSpecial">)</span>; <span class="synStatement">$</span><span class="synIdentifier">now</span><span class="synStatement">++</span><span class="synSpecial">)</span> <span class="synSpecial">{</span> <span class="synStatement">if</span> <span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">now_proxy</span><span class="synSpecial">[</span>'<span class="synConstant">inst</span>'<span class="synSpecial">]</span> <span class="synStatement">==</span> <span class="synStatement">$</span><span class="synIdentifier">insts</span><span class="synSpecial">[</span><span class="synStatement">$</span><span class="synIdentifier">now</span><span class="synSpecial">])</span> <span class="synSpecial">{</span> <span class="synStatement">break</span>; <span class="synSpecial">}</span> <span class="synSpecial">}</span> message<span class="synSpecial">(</span>&quot;<span class="synConstant">now proxy: </span><span class="synSpecial">${</span><span class="synIdentifier">now_proxy</span><span class="synSpecial">[</span>'<span class="synConstant">inst</span>'<span class="synSpecial">]}</span><span class="synConstant">(</span><span class="synStatement">$</span><span class="synIdentifier">now</span><span class="synConstant">) </span><span class="synSpecial">${</span><span class="synIdentifier">now_proxy</span><span class="synSpecial">[</span>'<span class="synConstant">pdns</span>'<span class="synSpecial">]}</span>&quot;<span class="synSpecial">)</span>; <span class="synComment">// next_proxyの添え字を知る</span> <span class="synStatement">$</span><span class="synIdentifier">next</span> <span class="synStatement">=</span> nextKey<span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">insts</span>, <span class="synStatement">$</span><span class="synIdentifier">now</span><span class="synSpecial">)</span>; <span class="synComment">// スタンバイとして起動しておくproxyの添え字を知る</span> <span class="synStatement">$</span><span class="synIdentifier">stanby</span> <span class="synStatement">=</span> nextKey<span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">insts</span>, <span class="synStatement">$</span><span class="synIdentifier">next</span><span class="synSpecial">)</span>; <span class="synComment">// nextのPublicDNSを調べる</span> message<span class="synSpecial">(</span>'<span class="synConstant">check new proxy Address ...</span>'<span class="synSpecial">)</span>; <span class="synIdentifier">exec</span><span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">api</span> <span class="synStatement">.</span> '<span class="synConstant">ec2-describe-instances </span>' <span class="synStatement">.</span> <span class="synStatement">$</span><span class="synIdentifier">insts</span><span class="synSpecial">[</span><span class="synStatement">$</span><span class="synIdentifier">next</span><span class="synSpecial">]</span> <span class="synStatement">.</span> '<span class="synConstant"> -region </span>' <span class="synStatement">.</span> <span class="synStatement">$</span><span class="synIdentifier">region</span> <span class="synStatement">.</span> '<span class="synConstant"> | grep &quot;INSTANCE&quot;</span>', <span class="synStatement">$</span><span class="synIdentifier">r</span><span class="synSpecial">)</span>; <span class="synStatement">$</span><span class="synIdentifier">next_pdns</span> <span class="synStatement">=</span> <span class="synType">null</span>; <span class="synStatement">if</span> <span class="synSpecial">(</span><span class="synIdentifier">preg_match</span><span class="synSpecial">(</span>'<span class="synConstant">/ec2.+?amazonaws.com/</span>', <span class="synStatement">$</span><span class="synIdentifier">r</span><span class="synSpecial">[</span><span class="synConstant">0</span><span class="synSpecial">]</span>, <span class="synStatement">$</span><span class="synIdentifier">pdns</span><span class="synSpecial">))</span> <span class="synSpecial">{</span> <span class="synStatement">$</span><span class="synIdentifier">next_pdns</span> <span class="synStatement">=</span> <span class="synStatement">$</span><span class="synIdentifier">pdns</span><span class="synSpecial">[</span><span class="synConstant">0</span><span class="synSpecial">]</span>; <span class="synSpecial">}</span> <span class="synStatement">else</span> <span class="synSpecial">{</span> <span class="synComment">// PublicDNSが得られなかった時。nextを起動させて終了。</span> message<span class="synSpecial">(</span>&quot;<span class="synConstant">No next PublicDNS.</span><span class="synSpecial">\n</span><span class="synConstant">start next: </span><span class="synSpecial">${</span><span class="synIdentifier">insts</span><span class="synSpecial">[</span><span class="synStatement">$</span><span class="synIdentifier">next</span><span class="synSpecial">]}</span><span class="synConstant">(</span><span class="synStatement">$</span><span class="synIdentifier">next</span><span class="synConstant">)</span>&quot;<span class="synSpecial">)</span>; <span class="synIdentifier">exec</span><span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">api</span> <span class="synStatement">.</span> '<span class="synConstant">ec2-start-instances </span>' <span class="synStatement">.</span> <span class="synStatement">$</span><span class="synIdentifier">insts</span><span class="synSpecial">[</span><span class="synStatement">$</span><span class="synIdentifier">next</span><span class="synSpecial">]</span> <span class="synStatement">.</span> '<span class="synConstant"> -region </span>' <span class="synStatement">.</span> <span class="synStatement">$</span><span class="synIdentifier">region</span><span class="synSpecial">)</span>; message<span class="synSpecial">(</span>'<span class="synConstant">exit.</span>'<span class="synSpecial">)</span>; <span class="synStatement">exit</span><span class="synSpecial">()</span>; <span class="synSpecial">}</span> <span class="synComment">// next_proxyの情報をファイル書き出し。これが新しいproxyの情報。</span> message<span class="synSpecial">(</span>&quot;<span class="synConstant">new proxy: </span><span class="synSpecial">${</span><span class="synIdentifier">insts</span><span class="synSpecial">[</span><span class="synStatement">$</span><span class="synIdentifier">next</span><span class="synSpecial">]}</span><span class="synConstant">(</span><span class="synStatement">$</span><span class="synIdentifier">next</span><span class="synConstant">) </span><span class="synStatement">$</span><span class="synIdentifier">next_pdns</span>&quot;<span class="synSpecial">)</span>; fo<span class="synSpecial">(</span>'<span class="synConstant">./now_proxy</span>', '<span class="synConstant">w</span>', <span class="synStatement">$</span><span class="synIdentifier">insts</span><span class="synSpecial">[</span><span class="synStatement">$</span><span class="synIdentifier">next</span><span class="synSpecial">]</span> <span class="synStatement">.</span> &quot;<span class="synSpecial">\t</span>&quot; <span class="synStatement">.</span> <span class="synStatement">$</span><span class="synIdentifier">next_pdns</span><span class="synSpecial">)</span>; <span class="synComment">// stanby_proxyを起動しておく。</span> message<span class="synSpecial">(</span>&quot;<span class="synConstant">start stanby proxy ... </span><span class="synSpecial">${</span><span class="synIdentifier">insts</span><span class="synSpecial">[</span><span class="synStatement">$</span><span class="synIdentifier">stanby</span><span class="synSpecial">]}</span><span class="synConstant">(</span><span class="synStatement">$</span><span class="synIdentifier">stanby</span><span class="synConstant">)</span>&quot;<span class="synSpecial">)</span>; <span class="synIdentifier">exec</span><span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">api</span> <span class="synStatement">.</span> '<span class="synConstant">ec2-start-instances </span>' <span class="synStatement">.</span> <span class="synStatement">$</span><span class="synIdentifier">insts</span><span class="synSpecial">[</span><span class="synStatement">$</span><span class="synIdentifier">stanby</span><span class="synSpecial">]</span> <span class="synStatement">.</span> '<span class="synConstant"> -region </span>' <span class="synStatement">.</span> <span class="synStatement">$</span><span class="synIdentifier">region</span><span class="synSpecial">)</span>; <span class="synComment">// now_proxyを停止する。</span> message<span class="synSpecial">(</span>&quot;<span class="synConstant">stop now proxy ... </span><span class="synSpecial">${</span><span class="synIdentifier">now_proxy</span><span class="synSpecial">[</span>'<span class="synConstant">inst</span>'<span class="synSpecial">]}</span><span class="synConstant">(</span><span class="synStatement">$</span><span class="synIdentifier">now</span><span class="synConstant">)</span>&quot;<span class="synSpecial">)</span>; <span class="synIdentifier">exec</span><span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">api</span> <span class="synStatement">.</span> '<span class="synConstant">ec2-stop-instances </span>' <span class="synStatement">.</span> <span class="synStatement">$</span><span class="synIdentifier">now_proxy</span><span class="synSpecial">[</span>'<span class="synConstant">inst</span>'<span class="synSpecial">]</span> <span class="synStatement">.</span> '<span class="synConstant"> -region </span>' <span class="synStatement">.</span> <span class="synStatement">$</span><span class="synIdentifier">region</span><span class="synSpecial">)</span>; message<span class="synSpecial">(</span>'<span class="synConstant">done.</span>'<span class="synSpecial">)</span>; <span class="synComment">// 次の添え字を返すやつ</span> <span class="synPreProc">function</span> nextKey<span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">a</span>, <span class="synStatement">$</span><span class="synIdentifier">key</span><span class="synSpecial">)</span> <span class="synSpecial">{</span> <span class="synStatement">$</span><span class="synIdentifier">ret</span> <span class="synStatement">=</span> <span class="synConstant">0</span>; <span class="synStatement">if</span> <span class="synSpecial">(</span><span class="synStatement">!</span> <span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">key</span> <span class="synStatement">==</span> <span class="synSpecial">(</span><span class="synIdentifier">count</span><span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">a</span><span class="synSpecial">)</span><span class="synConstant">-1</span><span class="synSpecial">))</span> <span class="synSpecial">)</span> <span class="synSpecial">{</span> <span class="synStatement">$</span><span class="synIdentifier">ret</span> <span class="synStatement">=</span> <span class="synStatement">$</span><span class="synIdentifier">key</span> <span class="synStatement">+</span> <span class="synConstant">1</span>; <span class="synSpecial">}</span> <span class="synStatement">return</span> <span class="synStatement">$</span><span class="synIdentifier">ret</span>; <span class="synSpecial">}</span> <span class="synComment">// ファイル読み書きするやつ</span> <span class="synPreProc">function</span> fo<span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">f</span>, <span class="synStatement">$</span><span class="synIdentifier">rw</span>, <span class="synStatement">$</span><span class="synIdentifier">str</span><span class="synStatement">=</span><span class="synType">null</span><span class="synSpecial">)</span> <span class="synSpecial">{</span> <span class="synStatement">$</span><span class="synIdentifier">ret</span> <span class="synStatement">=</span> <span class="synType">null</span>; <span class="synStatement">$</span><span class="synIdentifier">fh</span> <span class="synStatement">=</span> <span class="synIdentifier">fopen</span><span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">f</span>, <span class="synStatement">$</span><span class="synIdentifier">rw</span><span class="synSpecial">)</span>; <span class="synIdentifier">flock</span><span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">fh</span>, LOCK_EX<span class="synSpecial">)</span>; <span class="synStatement">if</span> <span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">rw</span> <span class="synStatement">==</span> '<span class="synConstant">w</span>'<span class="synSpecial">)</span> <span class="synSpecial">{</span> <span class="synIdentifier">fputs</span><span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">fh</span>, <span class="synStatement">$</span><span class="synIdentifier">str</span><span class="synSpecial">)</span>; <span class="synSpecial">}</span> <span class="synStatement">else</span> <span class="synStatement">if</span> <span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">rw</span> <span class="synStatement">==</span> '<span class="synConstant">r</span>'<span class="synSpecial">)</span> <span class="synSpecial">{</span> <span class="synStatement">$</span><span class="synIdentifier">ret</span> <span class="synStatement">=</span> <span class="synIdentifier">fgets</span><span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">fh</span><span class="synSpecial">)</span>; <span class="synSpecial">}</span> <span class="synIdentifier">flock</span><span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">fh</span>, LOCK_UN<span class="synSpecial">)</span>; <span class="synIdentifier">fclose</span><span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">fh</span><span class="synSpecial">)</span>; <span class="synStatement">return</span> <span class="synStatement">$</span><span class="synIdentifier">ret</span>; <span class="synSpecial">}</span> <span class="synComment">// バッファさせずにメッセージ表示</span> <span class="synPreProc">function</span> message<span class="synSpecial">(</span><span class="synStatement">$</span><span class="synIdentifier">str</span><span class="synSpecial">)</span> <span class="synSpecial">{</span> <span class="synPreProc">echo</span> <span class="synStatement">$</span><span class="synIdentifier">str</span> <span class="synStatement">.</span> &quot;<span class="synSpecial">\n</span>&quot;; <span class="synIdentifier">ob_flush</span><span class="synSpecial">()</span>; <span class="synIdentifier">flush</span><span class="synSpecial">()</span>; <span class="synSpecial">}</span> </pre><p> 簡単ですが、こんな感じのプログラムと、cronや他のWebプログラムを組み合わせれば色々と自動化できますよね！<br> はい！<br> おつかれさまでした！無限IPアドレス切り替え器の完成です！ </p> <p> でも無料だからといって、うっかりProxy通したまま動画みたちゃったり、<br> インスタンス立ち上げたまま忘れたりしていると、<br> いつの間にか無料枠をこえて請求されるかもしれません…＞＜<br> 遊んだあとは、ちゃんとstopさせておきましょうね！ </p> <p> 料金がかかっていないか心配な人は、しばらく経ってから(1日くらい？)<br> <a href="http://aws.amazon.com/jp/">AWSトップページ</a>のメニューから「<strong>アカウントアクティビティ</strong>」を選べば確認することができますよ！ </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20120612/ec2">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20120612/ec2" alt="『Amazon EC2 を使った無限IPアドレスの作り方』のブックマークコメント"></a>] </div> Hamachiya2 【LINE】既読にしないでLINEの未読メッセージを読む方法(ブックマークレット版) hatenablog://entry/26003855888872861 2012-06-09T00:00:00+09:00 2012-06-09T00:00:00+09:00 こんにちはこんにちは！！ 前回のLINEを既読にせずに読むツールは、結局規制を受けて使えなくなってしまったので、今度はブックマークレット版を作ってみました！ なので今回のは、パソコンでしか使えません＞＜ ほんとはスマホの人に使ってほしかったんだけど…。 それでもよければどうぞ！ ブックマークレット使ったことない人のために、一応使い方も書いておきますね！ 1. LINEのメールアドレス登録をしておく アプリの設定 → メールアドレス登録で、メールアドレスとパスワードの登録をしておきます。 このアドレスはスマホのじゃなくても、GMailとかでもOKです！ 後から何回でも変更できます。 2. Goo… <p> こんにちはこんにちは！！<br> 前回の<a href="http://d.hatena.ne.jp/Hamachiya2/20120607/line">LINEを既読にせずに読むツール</a>は、結局規制を受けて使えなくなってしまったので、今度はブックマークレット版を作ってみました！ </p> <p> なので今回のは、パソコンでしか使えません＞＜<br> ほんとはスマホの人に使ってほしかったんだけど…。<br> それでもよければどうぞ！ </p> <p> ブックマークレット使ったことない人のために、一応使い方も書いておきますね！ </p> <h3 class="textHeader">1. LINEのメールアドレス登録をしておく</h3> <p> アプリの設定 → メールアドレス登録で、メールアドレスとパスワードの登録をしておきます。<br> このアドレスはスマホのじゃなくても、GMailとかでもOKです！<br> 後から何回でも変更できます。 </p> <h3 class="textHeader">2. Google Chrome をインストールしておく</h3> <p> <strong><a class="arrowGR" href="http://www.google.co.jp/chrome">Google Chrome - ブラウザのダウンロード</a></strong> </p> <h3 class="textHeader">3. Google Chrome の「ブックマークバー」を表示しておく</h3> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120609/20120609091617.png" width="758" height="225" alt="Google Chrome ブックマークバーを表示" style="border:1px solid #ccc"> </p> <p style="margin-top:0.5em"> Chromeの右上にある設定ボタンから！ </p> <h3 class="textHeader">4. ブラウザ版LINEを開く</h3> <p> <a href="http://t.line.naver.jp/"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120609/20120609091616.png" width="371" height="300" alt="ブラウザ版LINE ログイン" style="border:1px solid #ccc"></a> </p> <p style="margin-top:0.5em"> <strong><a href="http://t.line.naver.jp/">ブラウザ版LINE</a></strong>のページを開いて、さっき登録したアドレスでログインします。<br> (ちなみにこのページ、Chrome以外でアクセスすると「てへぺろ☆(・ω&lt;)画像」が表示されます…) </p> <h3 class="textHeader">5. ブックマークバーに追加する</h3> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120609/20120609091615.png" width="352" height="165" alt="Google Chrome のブックマークバーに追加" style="border:1px solid #ccc"> <p style="margin-top:0.5em"> アドレス欄のアイコンを、ブックマークバーにドラッグする感じです！ </p> <h3 class="textHeader">6. ブックマークを編集する</h3> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120609/20120609091614.png" width="409" height="204" alt="ブックマークを編集" style="border:1px solid #ccc"> </p> <p style="margin-top:0.5em"> 追加したブックマークを右クリックして「編集」を選びます。 </p> <h3 class="textHeader">7. ブックマークレットをコピペする</h3> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120609/20120609091613.png" width="506" height="160" alt="ブックマークレットをコピペ" style="border:1px solid #ccc"> <p style="margin-top:0.5em"> 編集ダイアログが出るので、名前を「ステルス」とかに、<br> URLのところに以下のコードをコピペします。 </p> <textarea style="margin-top:1em;height:13.5em" class="code">javascript:(function(){var s=document.createElement('div');$(s).css({'position':'absolute','top':'3%','right':'3%','width':'80%','background':'#fff','color':'#333','border':'4px solid #474','border-radius':'4px','padding':'1em','z-index':'99999'}).appendTo($('body'));var d=document.createElement('div');var x=document.createElement('a');x.href='#';$(x).text('X').css({'display':'block','position':'absolute','top':'2px','right':'2px','width':'14px','height':'14px','background':'#ddd','color':'#111','border':'1px solid #888','font-size':'10px','text-align':'center','text-decoration':'none','line-height':'14px'}).appendTo($(s)).bind('click',function(ev){$(s).remove();});$.get('https://t.line.naver.jp/rest/v1/contacts',function(r){r.data.map(function(v,i){var a=document.createElement('a');a.rel=v.mid;a.href='#';$(a).text(v.displayName).css({'margin-left':'1em'}).appendTo($(s)).bind('click',function(ev){$.get('https://t.line.naver.jp/rest/v1/chats/'+ev.target.rel+'/messages/tail?count=100',function(m){var msg='';if(! m.data.length){$(d).text('no message.')}m.data.map(function(t){if(t.from==ev.target.rel){msg+='['+$(ev.target).text()+'] ';}else{msg+='[me] ';}msg+=t.text?t.text:'Sticker:'+t.contentMetadata.STKID;var ts=new Date(t.createdTime);msg+=' &nbsp;&lt;span style="color:#999"&gt;'+ts.getFullYear()+'/'+(ts.getMonth()-0+1)+'/'+ts.getDate()+' '+ts.getHours()+':'+ts.getMinutes()+':'+ts.getSeconds()+'&lt;/span&gt;';msg+='&lt;br&gt;';$(d).html(msg);})})})});$(d).css({'height':'10em','overflow':'auto','margin-top':'1em','border':'1px solid #666','color':'#333','background':'#eee','padding':'.5em'}).appendTo($(s));$.get('https://t.line.naver.jp/rest/v1/chats/unread',function(v){v.data.map(function(d){$('a[rel^="'+d.id+'"]',s).after('&lt;b style="color:red"&gt;('+d.unreadCount+')&lt;/b&gt;')})})})})() </textarea> <h3 class="textHeader">8. セットアップ完了！</h3> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120609/20120609091612.png" width="661" height="220" alt="セットアップ完了！" style="border:1px solid #ccc"> <p style="margin-top:0.5em"> あとは追加したブックマークのボタンを押すだけ！<br> コンタクトリストの名前一覧がでてくるので、既読にせずに読みたい人の名前をクリックすればメッセージが表示されます！ </p> <p> 今回のツールも、いずれLINEの仕様変更で使えなくなる可能性があるので、<br> もし使えなくなったら連絡もらえると嬉しいです！ </p> <p> あと念のために、上のブックマークレットのコードを整形して見やすくしたものも置いておきますね！ </p> <p> <strong><a class="arrowGR" href="https://github.com/Hamachiya2/stealth_line_bookmarklet/blob/master/stealth_line_bookmarklet.js">stealth_line_bookmarklet &#183; GitHub</a></strong> </p> <p> よかったら改造したりダメ出ししたりして遊んでみてください！ </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20120609/line_bookmarklet">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20120609/line_bookmarklet" alt="【LINE】既読にしないでLINEの未読メッセージを読む方法(ブックマークレット版)』のブックマークコメント"></a>] </div> Hamachiya2 【LINE】既読にしないで相手に知らせずLINEの未読メッセージを読む方法 hatenablog://entry/26003855888872864 2012-06-07T00:00:00+09:00 2012-06-07T00:00:00+09:00 こんにちはこんにちは！！ LINE使ってますか！ スマホのメッセンジャーアプリ！ すっごい流行ってますよね！ なんでも世界でユーザーが4000万人を越えたとか…！ そんなこんなで、先日ちょっとしたイベントで偶然、Barimiちゃんに会った時にも、LINEのお話がでました。 はまち：「あ、ばりみちゃんもLINE使ってるんですね」 ばりみ：「めっちゃ使ってるよ〜、でもこれ [既読]っていうのが相手に伝わるのがたまにやだな〜」 はまち：「あ〜、読んだことが相手に伝わるんですよね」 ※既読の例 たしかに、読んだことが相手に伝わってしまうと、 相手に「なんで読んだのに返事くれないのかなぁ」とか思われたり… <p> こんにちはこんにちは！！<br> <strong><a href="http://line.naver.jp/ja/">LINE</a></strong>使ってますか！ スマホのメッセンジャーアプリ！ すっごい流行ってますよね！<br> なんでも世界でユーザーが4000万人を越えたとか…！ </p> <p> そんなこんなで、先日<a href="http://nikkan-spa.jp/225554">ちょっとしたイベント</a>で偶然、<a href="http://twitter.com/barimi">Barimi</a>ちゃんに会った時にも、LINEのお話がでました。 </p> <blockquote style="background:#efeff9;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;"> はまち：「あ、ばりみちゃんもLINE使ってるんですね」<br> <span style="color:#811">ばりみ：「めっちゃ使ってるよ〜、でもこれ [既読]っていうのが相手に伝わるのがたまにやだな〜」</span><br> はまち：「あ〜、読んだことが相手に伝わるんですよね」<br> </blockquote> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120607/20120607164925.png" width="300" height="72" alt="LINEの「既読」"><br> <span style="color:#888;font-size:80%">※既読の例</span> </p> <p> たしかに、読んだことが相手に伝わってしまうと、<br> 相手に「なんで読んだのに返事くれないのかなぁ」とか思われたりで、ちょっと面倒なんですよね。<br> 同じような不便を感じてる人、他にも多いかもしれない。 </p> <p> そんなわけで暇にまかせてこんなツールを作ってみました。 </p> <p> <strong><a class="arrowGR" href="http://v.hamachiya.jp/stealth_line/">Stealth LINE - 既読にしないで相手に知らせずLINEの未読メッセージを読むツール</a></strong> </p> <p> これでちょっとは気が楽になる人が増えればいいな！ </p> <p> 1日で適当に作ったので、もしちゃんと動かなかったりしたら教えてください！<br> リンク先の下にある注意書きをよく読んでから楽しく使ってくださいね！ </p> <p> (追記)<br> さっそくNHN Japanの人から「停止しろ」ってメールがきました＞＜ </p> <blockquote style="background:#efeff9;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;"> 下記のサービスを拝見しましたが、<br> LINEのサービス運営上問題がありますので、<br> サービス停止をお願いいたします・・・。<br> <span data-unlink>http://v.hamachiya.jp/stealth_line/</span><br> <br> また、併せて、このサービスについてのブログエントリーも<br> 非表示にしていただけますでしょうか。<br> どうぞよろしくお願い致します。 </blockquote> <p> どうすればいいんだろう？ </p> <p> (追記２)<br> と思ったら、公開後1時間でさっそく仕様変更されて使えなくなりました＞＜<br> がんばってつくったのに！ </p> <p> (追記３)<br> v.hamachiya.jp からのアクセスをLINEのサーバーにブロックされただけだったみたいなので、<br> とりいそぎproxy通すだけで復活しました。<br> (またすぐに使えなくなる可能性が高いです) </p> <p> (追記４)<br> なんだか30分に1回くらいipブロックされて使えなくなるので、<br> いきおいで流行りのクラウドサーバー<strong>Amazon EC2</strong>をかりて、<br> インスタンスいっぱいつくってグルグルまわして無限にipアドレス切り替えられるようにしました！ </p> <p> クラウドとか初めてだしサーバーとかもよくわからないから、ちょっと苦労しました＞＜ </p> <p> (追記５)<br> EC2からのアクセスをまるっと規制されたかもしれません＞＜ </p> <p> (追記６)<br> しかたがないのでブックマークレット版にしました。<br> <strong><a class="arrowGR" href="http://d.hatena.ne.jp/Hamachiya2/20120609/line_bookmarklet">【LINE】既読にしないでLINEの未読メッセージを読む方法(ブックマークレット版)</a></strong> </p> <p> (追記７)<br> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120609/20120609205029.png" width="768" height="398" alt="NHNからのアクセス" style="border:1px solid #ccc"> </p> <p style="margin-top:0.5em"> NHNからのアクセスやばい。 </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20120607/line">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20120607/line" alt="『【LINE】既読にしないで相手に知らせずLINEの未読メッセージを読む方法』のブックマークコメント"></a>] </div> Hamachiya2 OGPのテスト hatenablog://entry/12704591929884860382 2012-06-06T11:53:48+09:00 2012-06-06T11:53:48+09:00 > ↓ここから ↑ここまで <p>&gt;</p> <p>&darr;ここから</p> <p>&uarr;ここまで</p> Hamachiya2 ぼくが「はてなブログ」へ移行できない理由 hatenablog://entry/26003855888872867 2012-06-04T00:00:00+09:00 2012-06-04T00:00:00+09:00 こんにちはこんにちは！！ はてなダイアリーから、新しい「はてなブログ」への移行を検討中のはまちやです！ 先日、公式で発表された移行機能そのものは、旧ダイアリーからの転送とかもできて素晴らしいんだけど、 肝心のはてなブログ側の機能が、まだまだ足りてないものが多くて悩み中です。 はてなブログはJavaScriptが使えるので、 一見、ヘビーユーザーが色々やるのに向いてそうにも見えるんだけど 初心者向けをうたってる(?)だけに基本的なところが足りてなくて、痒いところに手が届かない感じ…。 初心者は初心者で、 「ヘッダーに画像をいれたいんだけどどうするの？」とか 「テンプレート少なくない？」とか、そう… <p> こんにちはこんにちは！！<br> はてなダイアリーから、新しい「<a href="http://hatenablog.com/">はてなブログ</a>」への移行を検討中のはまちやです！ </p> <p> 先日、<a href="http://staff.hatenablog.com/entry/2012/05/31/152104">公式で発表された移行機能</a>そのものは、旧ダイアリーからの転送とかもできて素晴らしいんだけど、<br> 肝心のはてなブログ側の機能が、まだまだ足りてないものが多くて悩み中です。 </p> <p> はてなブログはJavaScriptが使えるので、<br> 一見、ヘビーユーザーが色々やるのに向いてそうにも見えるんだけど<br> 初心者向けをうたってる(?)だけに基本的なところが足りてなくて、痒いところに手が届かない感じ…。 </p> <p> 初心者は初心者で、<br> 「ヘッダーに画像をいれたいんだけどどうするの？」とか<br> 「テンプレート少なくない？」とか、そういうご意見が沢山あるみたいなんだけど。<br> うーん、まだ、あくまでベータ版なのかなあ。 </p> <p> そんなわけで以下は、はてなダイアリーのヘビーユーザー(?)のぼくからの意見です。<br> 主に「ダイアリーでできたけど、はてなブログでできないこと」が中心かな。 </p> <h3 class="textHeader">・アフィリエイト利用について明言されてない</h3> <p> ぼくもブログで10万円くらい稼いで豪遊してみたいです！<br> なのでアフィリエイトが大丈夫なのかを明言して欲しい…。 </p> <p> と思ったら、意外なところに書かれてて自己解決しました。<br> なぜか「<a href="http://d.hatena.ne.jp/guide/option">はてなダイアリープラスの説明</a>」の機能比較で「アフィリエイト制限なし」と書かれてる…。<br> なぜこれを、はてなブログProの説明に書かないの…！<br> 探し当てるまで4日かかりました。 </p> <p> (追記：と思ったらこれは「はてなブログPro」を申し込んだオマケの「はてなダイアリー」の機能だとご指摘を受けました。<a href="http://suchi.hatenablog.com/entry/hatenablog_pro">詳しくはこちら</a>。ややこしい…) </p> <h3 class="textHeader">・はてなのヘッダーを消せない</h3> <p> ダイアリーは有料プランだと消せたよね。<br> CSSで非表示にできなくもないけど、そういうことをやりすぎるとGoogleに嫌われるのでヘッダーのHTMLを出力しないモードが欲しいです。 </p> <h3 class="textHeader">・スマートフォン向け表示に自動的に切り替わらないモードが欲しい</h3> <p> URLã‚‚HTMLも共に、勝手に「touch版」に切り替わらない機能が欲しいです。<br> これはダイアリーも同じで、スマートフォンの表示がブログ主には一切いじれない。 </p> <p> スマートフォンの割合が一割くらいの頃は別に良かったけど、<br> 今はすごく増えてきてるので、<br> 運営の用意する「適当なシンプルデザイン」じゃなくて、すべてブログ主側でコントロールしたい。<br> URLもひとつにしたいし、デザインもレスポンシブルとかにしたいし、広告もデバイスに適したものを出したいです。 </p> <h3 class="textHeader">・CSS修正する際のUIがめんどくさい</h3> <p> 保存ボタンを押すたびにブログに飛ぶ。<br> ぼくは実際に適用された画面をみて再修正することも多いから、中途半端なリアルタイムプレビューだけだとつらいです。<br> このUIは、たぶんtumblrを参考にしたのかなーと思いますが、<br> どうせやるなら表面的なところ(UI)だけじゃなくて、本質的なところ(UX)をちゃんと参考にしてください。 </p> <h3 class="textHeader">・ポイント不足時の自動引き落としの設定がない</h3> <p> もしかしたらあるの？<br> 少なくとも申し込みボタンを押す前の段階では確認できなかったです。<br> はてなダイアリーの有料プランにはあるよね。<br> Pro版使ってて、いきなり残高不足でPro機能を外されたら困っちゃいます。 </p> <p> (追記：はてなポイント側の設定でできるそうです) </p> <h3 class="textHeader">・コンテンツのヘッダーやフッターのHTMLを編集できない</h3> <p> ダイアリーには、コンテンツ直前のHTMLと、コンテンツ直後のHTMLを編集できるよね。<br> はてなブログの場合、サイドバーに書いてCSSで無理矢理移動させることもできるけど、<br> それだと例えば、ブログタイトル横に広告を置きたい場合とかに、読み込まれるタイミングがすごく遅くなってしまいます。 </p> <h3 class="textHeader">・どうせだからo<span data-unlink>g:image</span>とかも設定したい</h3> <p> facebookとかGoogle+とかでシェアされる時に表示される画像(o<span data-unlink>g:image</span>)も記事ごとに設定できるようになればいいのにな！ </p> <h3 class="textHeader">・tumblrのようにHTMLも含めて全ていじれるモードが欲しい</h3> <p> たぶんこれがあればだいたい解決すると思う。<br> もちろんその際には、CMSでよくある特殊なタグが色々必要になるだろうけど。 </p> <p style="color:#444"> (以下は、その他ダイアリーでできたけどブログでできない細かいこと) </p> <p style="font-weight:bold"> ・faviconの設定ができない<br> ・フィードの全文/要約掲載を選択できない </p> <h3 class="textHeader">・じゃあ何故はてなにこだわるのか？tumblrでいいやん？</h3> <p> これまでの被リンクの資産が大きいから。<br> ブログサービスが閉鎖した時のことも考えて、いずれどこかの時点で独自ドメインに移行したいとも思っていたので…。 </p> <p style="color:#f21;font-weight:bold"> (そして最大の理由) </p> <h3 class="textHeader" style="margin-top:0.2em">・はてなポイントをチャージしても申し込みボタンが押せない</h3> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120604/20120604174243.png" style="border: 1px solid #999" width="589" height="343" alt="はてなブログPro購入フォーム"> </p> <p> …あれ？ </p> <p> ↓たぶんこれのせい？ ひどい…。 </p> <p style="font-size:90%"> <a href="http://blog.hatena.ne.jp/help#pro"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120604/20120604174242.png" style="border: 1px solid #999" width="613" height="55" alt="はてなユーザー登録時に「日本」以外の国を選択されているユーザーの方は、現在はてなブログProをお申し込みいただけません。"><br> <span class="arrowGR">ヘルプ - はてなブログ (beta)</span> </a> </p> <p> (参考記事)<br> <a class="arrowGR" href="http://mametanuki.hateblo.jp/entry/2012/05/31/222411">それでも、はてなブログに引っ越せない理由 - そっと、はてなブログ</a><br> <a class="arrowGR" href="http://suchi.hatenablog.com/entry/hatenablog_pro">私がはてなブログProをたぶん更新しない理由 - 豚とコタツと校庭で</a> </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20120604/hatenablog">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20120604/hatenablog" alt="『ブログを書くときの考え方7つ』のブックマークコメント"></a>] </div> Hamachiya2 はてなダイアリーを独自ドメインのWordPressに移行する方法 hatenablog://entry/26003855888872871 2012-05-31T00:00:00+09:00 2012-05-31T00:00:00+09:00 旧ダイアリーからのリダイレクト、記事についたブックマークやスターも含め、完全に移行可能！ というのを思いついて、たぶん実現可能だけど、ひどいのでやめておきます。 (参考) はてなダイアリーからはてなブログへのインポート機能を追加しました - はてなブログ開発ブログ [この日記のブックマークコメントを見る/書く ] <p> 旧ダイアリーからのリダイレクト、記事についたブックマークやスターも含め、完全に移行可能！<br> というのを思いついて、たぶん実現可能だけど、ひどいのでやめておきます。 </p> <p> (参考)<br> <a class="arrowGR" href="http://staff.hatenablog.com/entry/2012/05/31/152104">はてなダイアリーからはてなブログへのインポート機能を追加しました - はてなブログ開発ブログ</a> </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20120531/redirect">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20120531/redirect" alt="『はてなダイアリーを独自ドメインのWordPressに移行する方法』のブックマークコメント"></a>] </div> Hamachiya2 ソーシャル化したbit.lyの恥ずかしいリンクの消し方 hatenablog://entry/26003855888872874 2012-05-30T00:00:00+09:00 2012-05-30T00:00:00+09:00 こんにちはこんにちは！！ こんな記事がありました！ Big Sky :: bit.ly がソーシャルに生まれ変わって、皆とっても恥かしい事になる なんと…。 ということで、短縮URLで有名な bit.ly の仕様が変わって ユーザーごとのリンクが一覧で見られる仕様になったそうです。 で、上のブログでは、 これから使う分のデフォルトの設定をプライベートに変更するやり方が書いてあったんだけど、 これまでのリンクを消す方法が載ってなかったので補足しておきますね！ (bit.lyにログインして使ってなかった人は関係ないです) まずは http://bitly.com/u/ユーザーID にアクセスして確… <p> こんにちはこんにちは！！<br> こんな記事がありました！ </p> <p> <strong><a class="arrowGR" href="http://mattn.kaoriya.net/etc/20120530123445.htm">Big Sky :: bit.ly がソーシャルに生まれ変わって、皆とっても恥かしい事になる</a></strong> </p> <p> なんと…。 </p> <p> ということで、短縮URLで有名な <strong><a href="https://bitly.com/">bit.ly</a></strong> の仕様が変わって<br> <strong style="color:#f21">ユーザーごとのリンクが一覧で見られる</strong>仕様になったそうです。 </p> <p> で、上のブログでは、<br> これから使う分のデフォルトの設定をプライベートに変更するやり方が書いてあったんだけど、<br> これまでのリンクを消す方法が載ってなかったので補足しておきますね！ </p> <p> (bit.lyにログインして使ってなかった人は関係ないです) </p> <p> まずは <strong><span data-unlink>http://bitly.com/u/</span>ユーザーID</strong> にアクセスして確認。 </p> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120530/20120530153302.png" width="396" height="405" alt="bit.lyログイン"> </p> <p> もし隠したいリンクがあった場合は、<strong><a href="https://bitly.com/">bit.ly</a></strong> にログイン後… </p> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120530/20120530135355.png" width="517" height="106" alt="bit.lyメニュー" style="border:1px solid #ccc"> </p> <p> 上のメニューから「<strong>Your staff</strong>」の「<strong>Bitmarks</strong>」を選ぶ。 </p> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120530/20120530140215.png" width="616" height="354" alt="bit.ly Bitmarks" style="border:1px solid #ccc"> </p> <p> カーソルを重ねると左にカギのアイコンが出るのでクリック。<br> あるいは、<br> チェックボックスにチェックを入れて、上に出る「<strong>MAKE PRIVATE</strong>」で一気に複数を隠すことができる。 </p> <p> <strong>(追記)</strong><br> ふえぇ…たくさんありすぎて消しきれないよぅ…、という人のための<strong style="color:#f21">全消しのやり方</strong>。 </p> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120530/20120530175342.png" width="620" height="322" alt="bit.lyの全てをPrivateにする(その1)" style="border:1px solid #ccc"> </p> <p> とりあえず一つだけチェックを入れる。 </p> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120530/20120530175341.png" width="620" height="341" alt="bit.lyの全てをPrivateにする(その2)" style="border:1px solid #ccc"> </p> <p> 上に黄色いバーがでるので、そこの青いチェックを押す。 </p> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120530/20120530175340.png" width="619" height="339" alt="bit.lyの全てをPrivateにする(その3)" style="border:1px solid #ccc"> </p> <p> チェックが消える。そこで同じチェックをもう一度押す。 </p> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120530/20120530175338.png" width="622" height="341" alt="bit.lyの全てをPrivateにする(その4)" style="border:1px solid #ccc"> </p> <p> するとチェックの横に「<strong>Select All</strong>」という文字が出現するので、それを押す。 </p> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120530/20120530175337.png" width="618" height="340" alt="bit.lyの全てをPrivateにする(その5)" style="border:1px solid #ccc"> </p> <p> <strong>PRIVATE</strong> を押して完了！ </p> <p> ツイッター公式の短縮リンク(t.co)が登場する前は、みんなbit.ly使ってましたよね…<br> 最近使ってないみんなも、<br> 隠しておきたい黒歴史がないかどうか、いますぐ確認しましょう！ </p> <p> (ぼくは未公開のセキュリティホールへのリンクがあったので消しました) </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20120530/bitly">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20120530/bitly" alt="『ブログを書くときの考え方7つ』のブックマークコメント"></a>] </div> Hamachiya2 やまもといちろうブログと、はてな匿名ダイアリーを劇的に読みやすくするスマートな方法 hatenablog://entry/26003855888872877 2012-05-28T00:00:00+09:00 2012-05-28T00:00:00+09:00 iPhoneで見る。 やまもといちろうBLOG はてな匿名ダイアリー PCより色と行間、折り返しが良い感じで読みやすい。 ちなみに、はてな匿名ダイアリーの方は iPhoneだと注目記事が優先して表示されるようになってるね。 [この日記のブックマークコメントを見る/書く ] <p> <strong>iPhoneで見る。</strong> </p> <div class="clearfix" style="margin:1.5em 0 0 1em"> <p style="margin:0 1em 0 0;float:left"> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120528/20120528163904.png" alt="やまもといちろうBLOG(iPhone)" width="300" height="450"><br> <a style="font-size:90%" href="http://kirik.tea-nifty.com/">やまもといちろうBLOG</a> </p> <p style="margin:0 0 0 1em"> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120528/20120528163903.png" alt="はてな匿名ダイアリー(iPhone)" width="300" height="450"><br> <a style="font-size:90%" href="http://anond.hatelabo.jp/">はてな匿名ダイアリー</a> </p> </div> <p> PCより色と行間、折り返しが良い感じで読みやすい。 </p> <p> ちなみに、はてな匿名ダイアリーの方は<br> iPhoneだと注目記事が優先して表示されるようになってるね。 </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20120528/kirik">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20120528/kirik" alt="『やまもといちろうブログと、はてな匿名ダイアリーを劇的に読みやすくするスマートな方法』のブックマークコメント"></a>] </div> Hamachiya2 ブログを書くときの考え方7つ hatenablog://entry/26003855888872882 2012-05-25T00:00:00+09:00 2012-05-25T00:00:00+09:00 こんにちはこんにちは！！ 今日はブログとかを書く時の、ぼくなりの考え方をいくつか書いてみようと思います！ 1. 知ってることを書く 君の思う、 「こんなこと、○○やってる奴なら、誰だって知ってるだろう」は、意外と知らない人が多い。 普段から、それを知らない人の視点で考えてみる。 2. 気づいたことを書く でも新しくなくていい。 ネットのどこかで既出でもいい。 君自身が気づいたことや、思いついたこと、感じたことがあれば、それを書けばいいと思う。 3. 自分なりに検証する 内容や意味が不安な部分は、一応ググるなりして検証してみる。 これが結構、勉強になったり、また違う発見があったりするよ。 4. … <p> こんにちはこんにちは！！<br> 今日はブログとかを書く時の、ぼくなりの考え方をいくつか書いてみようと思います！ </p> <h3 class="textHeader">1. 知ってることを書く</h3> <p> 君の思う、<br> 「こんなこと、○○やってる奴なら、誰だって知ってるだろう」は、意外と知らない人が多い。<br> 普段から、<strong style="color:#f21">それを知らない人の視点</strong>で考えてみる。 </p> <h3 class="textHeader">2. 気づいたことを書く</h3> <p> でも新しくなくていい。<br> ネットのどこかで<strong style="color:#f21">既出でもいい</strong>。<br> 君自身が気づいたことや、思いついたこと、感じたことがあれば、それを書けばいいと思う。 </p> <h3 class="textHeader">3. 自分なりに検証する</h3> <p> 内容や意味が不安な部分は、一応ググるなりして検証してみる。<br> これが結構、勉強になったり、また違う発見があったりするよ。 </p> <h3 class="textHeader">4. 素人にもわかるように書く</h3> <p> 専門用語や、難しい言葉を使わずに、<br> できるだけ、素人とかオカンとか、<strong style="color:#f21">ぼくにもわかるように書く</strong>。 </p> <h3 class="textHeader">5. 勇気をもって省く</h3> <p> 省いた箇所は、必ずつっこまれる。<br> そのツッコミを恐れて、細かい事まで書いてしまうと、すごく読みにくい文になる。<br> <strong style="color:#f21">読みにくい文は、みんな読むのをやめてしまう。</strong><br> だから、つっこまれるのを承知の上で、細かい例外や、但し書きなんかは、あえて省く。<br> わかりやすさを優先する。 </p> <h3 class="textHeader">6. 何回も自分で読む</h3> <p> 数時間後の自分は、ちょっとだけ別人かもしれない。<br> 別人の視点で眺めると、また違った発見や表現が生まれるよ。 </p> <h3 class="textHeader">7. 書かないより、書く方がずっと社会に貢献してる</h3> <p> 「わかる奴にだけわかればいい」<br> 「これは常識だから、いまさら書くのもアレ」 </p> <p> うん。それもいいけど、<br> わかりやすくして、あえて書いて発信する方が、もっと良いと思う。<br> </p> <p> その知識や発見、思ったことをもっと書いて、<br> ネットにどんどん情報を増やそう。 </p> <p> 君の書いた一文が、他の誰かにとっての良いヒントになるかもしれない。 </p> <p> (関連記事)<br> <a href="http://d.hatena.ne.jp/Hamachiya2/20090807/reading" class="arrowGR">よみやすいよみもの</a> <a href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20090807/reading"><img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20090807/reading" alt="『よみやすいよみもの』のブックマークコメント"></a><br> <a href="http://d.hatena.ne.jp/Hamachiya2/20090629/alchemy" class="arrowGR">なんでお金になることをタダで書くの？</a> <a href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20090629/alchemy"><img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20090629/alchemy" alt="『なんでお金になることをタダで書くの？』のブックマークコメント"></a><br> </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20120525/writing">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20120525/writing" alt="『ブログを書くときの考え方7つ』のブックマークコメント"></a>] </div> Hamachiya2 古くなったXP/Vistaマシンを4000円でサクサクにする hatenablog://entry/26003855888872885 2012-05-23T00:00:00+09:00 2012-05-23T00:00:00+09:00 こんにちはこんにちは！！ スワップしてますか！(パソコンが！) ノートPCの良さと新型VAIO type Z - ぼくはまちちゃん！(Hatena) ↑これ買ってから4年。 さすがに重くなってきました…！ とくにGoogle Chromeがメモリをバカ食いして、タブを40枚も開けば、 すぐにHDD上の仮想メモリを使いはじめて、いわゆるswapという状態になり、 ガリガリガリガリ鳴りっぱなしで画面が固まります…！ さすがにこれはもう買い換えかなぁなどと思ったり、 あるいは、Windows7 + SSDにすれば快適かな〜とか考えたり…。 でも、Win7+SSD換装って結構お金かかるんですよね。 W… <p> こんにちはこんにちは！！<br> スワップしてますか！(パソコンが！) </p> <p> <strong><a href="http://d.hatena.ne.jp/Hamachiya2/20080805/vaio_type_z">ノートPCの良さと新型VAIO type Z - ぼくはまちちゃん！(Hatena)</a></strong> </p> <p> ↑これ買ってから4年。<br> さすがに重くなってきました…！ </p> <p> とくにGoogle Chromeがメモリをバカ食いして、タブを40枚も開けば、<br> すぐにHDD上の仮想メモリを使いはじめて、いわゆるswapという状態になり、<br> ガリガリガリガリ鳴りっぱなしで画面が固まります…！ </p> <p> さすがにこれはもう買い換えかなぁなどと思ったり、<br> あるいは、Windows7 + SSDにすれば快適かな〜とか考えたり…。 </p> <p> でも、Win7+SSD換装って結構お金かかるんですよね。 </p> <p> Windows7(Home) - 2万円<br> SSD(256GB) - 2万円 </p> <p> 4万かぁ。古くなったノートを延命させるには、ちょっと抵抗がある金額かな…。 </p> <p> そこで何か良い方法ないかなぁ〜と考えたんですが<br> もっと単純なことに気がつきました。 </p> <p> <strong style="color:#f21">あれっ？ メモリが足りないなら、増設すればいいんじゃない？</strong> </p> <p> そうでした。 </p> <p> そんなわけで自分のノートPCのメモリの構成をググってみると、<br> PC3-8500(DDR3-1066MHz)っていう規格のが2枚刺せるみたい。 </p> <p> 次に、その規格の一番大きい容量を調べてみると…、一枚4GB。<br> つまり二枚刺せば8GBになる！ </p> <p> そして相場は…、<strong style="color:#f21">4GBが2枚セットで4000円！安っ！</strong><br> そんなわけで、さっそくアマゾンで注文して取り付けました！ </p> <p style="color:#666"> <a href="http://www.amazon.co.jp/exec/obidos/ASIN/B004EST77Q/esorasea-22/ref=nosim/" style="display:block;width:160px;padding-right:1em;float:left"><img src="http://ecx.images-amazon.com/images/I/41tBt7rBmBL._SL160_.jpg" alt="シー・エフ・デー販売 ノートPC用メモリ DDR3 SO-DIMM PC3-8500 4GB 2枚組"></a> ぼくが選んだのはこれ。<br> 朝、注文したら、その日の夜に届いた！<br> <br> <a href="http://www.amazon.co.jp/exec/obidos/ASIN/B004EST77Q/esorasea-22/ref=nosim/"><strong>シー・エフ・デー販売 ノートPC用メモリ DDR3 SO-DIMM PC3-8500 4GB 2枚組</strong><br> <span class="arrowGR">詳細を見る</span></a> <br style="clear:both"> </p> <br style="clear:both"> <p> ちなみにXPã‚„Vistaのような32bit版Windowsって、メモリー3GBまでしか使えませんよね。<br> なので8GB刺した残りの5GBは、ツールを使ってRAMディスクにします。 </p> <p> → <a href="http://www10.atwiki.jp/gavotterd/">Gavotte Ramdisk まとめWIKI</a> </p> <p> そしてそのRAMディスク上に仮想メモリを設定する。<br> 仮想メモリは4095までしか設定できないようなので、上限の4095に。<br> 逆にHDD側の仮想メモリをなしにします。 </p> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120523/20120523161908.gif" width="410" height="430" alt="Windowsの仮想メモリの設定"> </p> <p> 1GBほど余るので、環境変数TEMPã‚‚RAMディスクにします。 </p> <p> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/H/Hamachiya2/20120523/20120523161907.gif" width="457" height="249" alt="Windowsの環境変数TEMPの設定"> </p> <p> これだけで、いままでガリガリガリガリ鳴って固まっていたPCが<br> 驚くほど快適サクサクになりました！ やったー！ </p> <p> 同じようなことで悩んでいる人は、<br> 買い換えを検討する前に、やってみるといいかもしれませんよ！ </p> <p> <span style="color:#f21">(買う前に、自分のPCの対応メモリをよく調べてね！)</span> </p> <div class="addBookmarkLink"> [<a class="arrowGR" href="http://b.hatena.ne.jp/entry/d.hatena.ne.jp/Hamachiya2/20120523/ramdisk">この日記のブックマークコメントを見る/書く <img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/Hamachiya2/20120523/ramdisk" alt="『古くなったXP/Vistaマシンを4000円でサクサクにする』のブックマークコメント"></a>] </div> Hamachiya2