読者です 読者をやめる 読者になる 読者になる

SNSにおける「『オラのことかー(怒)』問題」について

おっすオラ悟空(嘘) というわけで今回もCo-Edoブログ朝会で書いています。

FacebookTwitterという、気軽に自分の気持や意見を吐露できる機会ができて久しいですが。 たまに面倒なのが、つぶやいたことに対して、その対象者じゃない人が自分のことと勘違いしてキレるというケース。

「いやそれあなたに対して言ったわけじゃないんですけど」とか「まあたしかにあなたも当てはまるかもしれませんが、なんというか一般論として言ったにすぎなくて、別にあなただけのためにつぶやいたわけではなくてね」とか。

ドラゴンボールの有名なシーンで以下のようなものがありますよね。

f:id:mon_tinian:20140415093835j:plain

フリーザにはむかう悟空に対し「いいだろう!!!こんどはこっぱみじんにしてやる。あの地球人のように!!!!」と言ったところ、クリリンのことを指した発言にもかかわらず自分に対しての発言と勘違いしてキレるシーン。

SNSではよくある光景ですね。

たとえば以下のように
(記載例はフィクションでわたしの意見とは一切関係ないです)

私「あまり親しくない人からイベントの招待が来たんだけど、送られても困るしやめてほしい」
友「(このあいだ招待送ったけど、さいきん会ってないし・・・)オラのことか・・・オラのことかー!!!(怒)」
私(違う。あなたの話じゃない。むしろどちらかというと親しい部類に入っている)

もうひとつ

私「友だち申請の前にプロフィール欄のコメント読めって書いてる人いるけど、『友達かも?』から追加するのにそんなところ読まないから無駄だよね」
友「(これは完全に・・・)オラのことか・・・オラのことかー!!!(怒)」
私(今見たらたしかにあなたもそうみたいだけど、べつにあなたにだけ言ったわけじゃなくてさ・・・)

(繰り返しますが、記載例はフィクションでわたしの意見とは一切関係ないです)

マイクロブログっていうのは気軽に思ったことをつぶやけるのが魅力だったりするのに、いちいちポストする前に「この表現だと自分のことだと勘違いしちゃう人いるかも・・・」なんてことを心配しなくちゃいけなくて。
結局、面倒になってポストしないなんてことがありますよね。

ほかにも、まったく関係ないところから「オラのことか・・・オラのことかー!!!(怒)」とコメントついてて、無用な敵を増やしてしまっているひとも見かけます。 ご愁傷様ですとしか言えません。

でも正直面倒くさい

基本的には投稿時に十分すぎるほど気を使いますが、iPhoneとかからなにも考えずつぶやくときもあるし、正直いろいろ考えるの面倒です。 あとまったく見当違いに「オラのことかー!!!(怒)」と思われてフレンドが減っていくというのも辛いです。

反対の視点から

ほかのひとの投稿に対し、あきらかにそれが自分宛てではなくても「これはもしかしてオラのことか・・・?」と思ってしまったり。

この問題を何と呼べば良いですかね

ずっとこの問題についてなんと呼んだらいいかと思っていまして。
とりあえず暫定的に『オラのことかー(怒)問題』 と読んでみたいと思います。

オラに対処法を教えてくれ

いやまあ気にしなくて良いんですけどね。 みなさんどうしてるんですかね。
誰か良い解決策(対処法)を教えてください。

この記事への短縮URL: http://bit.ly/oranokotoka

SSHの公開鍵を作成しGithubに登録する手順

当記事の内容は以下のページとほぼ同様となります。


パートナーというかクライアントの企業にgitを勧めて、2社ほどsvnから移行してもらったことのある @mon_sat です。

Githubのヘルプには有益なページが多いですが、上記のページもそのひとつですね。

最近黒い画面を使わずにgitを使う系の記事や勉強会が増えてきまして、ただ1点、秘密鍵やら公開鍵やらのところはそうはいかない場合もあるのかと思います。

というわけでSSHの公開鍵を作成しGithubに登録する手順を上記のwebページをもとに(日本語で)まとめてみました。

基本的な解説

この記事で記載の手順がなぜ必要か理解していない方のために、簡単な説明をいたします。
(理解している方は、読み飛ばしていただいて構いません)

秘密鍵・公開鍵とは

秘密鍵・公開鍵とは、鍵交換方式の認証のために使う2つのファイル(データ)です。

f:id:mon_tinian:20140317183512p:plain

秘密鍵のファイルはあなただけしか見られないように扱い、公開鍵のファイルは認証を行う相手側(サーバーやWebサイト等。Githubもそのひとつ)に預けます。

秘密鍵と公開鍵はペアになっていて、秘密鍵が存在するマシンのみからしか、Webサイト(やサーバー)等を利用できません。 (IDパスワードの代わりとなり、Webサイトが「あなたであること」を確認するのです)

複数のマシンを利用する場合はそれぞれで鍵ファイルを作成し、複数の公開鍵を預けることになります。
秘密鍵と公開鍵は対になっています。

git(≠Github)は、おもにsshを使用して他サーバー上のリモートリポジトリとやりとりします。
sshの通信では、鍵交換方式による認証によりIDパスワードよりもセキュアな接続が可能です。

基本的な手順

おおむね以下のような流れになります

  1. 秘密鍵・公開鍵を作成する
  2. 公開鍵をGithubに預ける

公開鍵の有無を確認する

Macのかたはターミナルというアプリを、WindowsのかたはGit Bashをひらいてください。

以下のコマンドを入力します。

(念のため補足。先頭の $ はコマンドではありません。それ以降が実行するべきコマンドになります)

$ ls ~/.ssh

ここで以下のようなふたつのファイルが存在した場合は、すでに秘密鍵・公開鍵は作成されていますので、次の作業は飛ばしていただいて問題ありません。

id_rsa      id_rsa.pub

なお .pub という拡張子のファイルが公開鍵のファイルです。

秘密鍵・公開鍵のペアを生成する

$ ssh-keygen -t rsa -C "your_email@example.com"

メールアドレスは自分のメアドに変更してください(例: ssh-keygen -t rsa -C "suzuki@example.jp"

実行すると以下の3つの入力を求められますが、すべて Enter(return) で実用上構いません。

もしパスフレーズを設定した場合は以下のコマンドを実行し、パスフレーズの入力を省略する設定が可能です。

$ ssh-add ~/.ssh/id_rsa

公開鍵をGithubに登録する

公開鍵の内容をクリップボードにコピーします

Macの場合

$ pbcopy < ~/.ssh/id_rsa.pub

Windows(Git Bash)の場合

$ clip < ~/.ssh/id_rsa.pub

Githubに登録する

SSH Keysの設定ページ

f:id:mon_tinian:20140317213244p:plain

  1. 右上の工具アイコンより Account Settings のページを開きます
  2. 左側のメニューより SSH Keys のページを開きます
  3. 赤い下線の位置にある [Add SSH Key] のボタンをクリック

公開鍵を登録する

f:id:mon_tinian:20140317213538p:plain

  1. Titleは任意の名称を入力(どのPCの鍵かを区別するための名称など:MacBook Airなど)
  2. Keyの入力欄でクリップボードの内容を Paste する(⌘+v / Ctrl+v等)
  3. Add Key ボタンをクリック

試しに接続してみる

以上で終了ですが
初回のみ相手のサーバーを確認する作業がありますので、いちど試しに接続してみるとよいでしょう。

$ ssh -T git@github.com

つぎのように表示されたら、落ち着いて yes と入力してください

The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

接続に成功すると、つぎのようなメッセージになるはずです

Hi username! You've successfully authenticated, but GitHub does not
provide shell access.

これで自分のリポジトリに自由にアクセスできるようになりました

Pushしたり Pullしたり ご自由にどうぞ!

(おまけ)@mon_satのボコボコ相談室

(相談内容) わたしは黒い画面の扱いにいつまでたっても慣れません。 プロのWeb製作者として、そろそろ黒い画面くらい使えるようになりたいのですがどうしたら良いでしょうか?

黒い画面が難しく思えるのは、ターミナルのデフォルトは白い画面なのに、自分で黒くして腫れ物にさわるような対応してるからじゃ!

じゃあの。

Windows 8.1が驚異の普及率となっている件(もしかしたら知らない間にあなたも使っているかも)

昨日こんな記事を読みました。

Microsoftは9日、Windows XP向けの優先度の高い更新プログラムとして、「Windows XPのサポート終了のお知らせ(KB2934207)」をWindows Update経由で配信開始した。 この更新プログラムは、Windows XPのサポート期間が4月8日(日本時間では4月9日)に終了することをユーザーに通知することが目的。インストールすると、「Windows XPのサポートは、2014年4月8日に終了します。詳細については、こちらをクリックしてください。」とのメッセージが表示されるようになる。リンクをクリックすると、サポート終了についての説明ページにジャンプする。

MSが“Windows XP終了のお知らせ”、Windows Updateで拡散開始、残り1カ月に -INTERNET Watch

そのサイトにいくと、記事のしたにWindows XP のサポート終了 - Microsoft Windowsというリンクがあります。

f:id:mon_tinian:20140311083301p:plain

さらにそのページをよくみると今使っている Windows のバージョンは何ですか。というリンクがあり、そのページでOSのバージョンを調べることができるようです。

というわけでわたしも調べてみました。

f:id:mon_tinian:20140311083633p:plain

ほっ!Windows 8.1 でした!安心ですね!

コワーキングスペースに集うひとたちにも調べてもらった

この記事はブログ朝会のある火曜日に書いています。 集まっているのはこんな人たち。

f:id:mon_tinian:20140311085725j:plain

Win7ユーザーひとりを除いて、みんなWindows 8.1 でした!さすがですね!

注意したいのは、みんな自分のOSはWindowsじゃないと思っているということだ。 各自「自分が使っていると思い込んでいたOS」は以下のとおり。

f:id:mon_tinian:20140311085634p:plain

そして実際は以下のとおり

f:id:mon_tinian:20140312165622p:plain

(修正:グラフに不備がありひとり消された疑惑が出ていたみたいですが、ちゃんと生きています)

繰り返します。 ひとりを除いて、みんなWindows 8.1 でした(普及率は80%)

もしかしたらキミも勘違いしているかも

というわけで、あなたもいますぐチェックしてみよう!
(キミのスマートフォンWindowsかもしれませんよ)

Windows XP Home 追加ライセンスパックSP2

Windows XP Home 追加ライセンスパックSP2

↑↑↑(Amazonのリンクを貼ってみた)

ちなみに Windows XP の場合

f:id:mon_tinian:20140311140228p:plain

ちゃんと判定されました(笑)

.editorconfigが便利すぎて失禁した

こんにちは。@mon_satです。

開発していてたまに困るのは、プロジェクトによってコーディングルールがばらばらで「インデントがタブ文字か半角空白か」などいろいろ統一されていないことです。

最近はIntelliJ IDEAで作業することが増えてきました。 エディタ側で自動的に設定しているコードスタイルにしてくれるのは大変ありがたいのですが、少し設定が面倒ともいえます。

また、プロジェクトメンバー間で別々のエディタを使っていても同じコーディング規約を適用したいものです。

CakePHP3.0のリポジトリを見ていて気づいたのが .editorconfig というファイルの存在で、検索して見つけたのは下記のWebサイト。

f:id:mon_tinian:20140301114812p:plain

サイトのTOPページに載っているサンプルの .editorconfig の中身は以下のとおり。

これを見ているだけでもワクワクしてきませんか!?

# EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# 4 space indentation
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified)
[*.js]
indent_style = tab

# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2

# Matches the exact files package.json and .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

IntelliJ IDEA での使用方法

上述のサイトに対応しているエディタが一覧されています。

VimEmacsやSublimeTextをはじめ、JetBrains系のエディタでももちろん使用可能です。

Pluginをダウンロード

まずEditorConfig Pluginをダウンロードしインストールします。

f:id:mon_tinian:20140301123652p:plain

.editorconfig ファイルを記述

プロジェクトのrootフォルダ等に .editorconfig を作成し、そこにコーディングスタイルを記述しましょう。

書き方はこちらを参照してください

おもなものは以下のとおりです。

root

これは、プロジェクトのルートディレクトリの .editorconfig を示す記述方法です。

root = true

EditorConfig Pluginは、なんらかのファイルをひらいたとき、同じフォルダおよび上位階層にある .editorconfig を探します。

その際 .editorconfig 内に以下の記述があると、それ以上上位のフォルダを検索しません。

indent_style, indent_size, tab_width

インデントの方式を指定します。

以下は半角空白2つの例です。

indent_style = space
indent_size = 2

indent_style は、 "tab" or "space" が指定可能です。

tabの場合は以下のように指定します。 tab_widthの初期値はindent_sizeの値とのことで省略可能のようです。

indent_style = tab
tab_width = 4

end_of_line, charset, insert_final_newline, trim_trailing_whitespace

改行コード("lf" or "cr" or "crlf")、文字コード、ファイル末尾の空行の有無、行末の空白の削除

[*]
end_of_line = lf
charset = utf-8
insert_final_newline = true
trim_trailing_whitespace  = true

その他

ファイルの種類により別にする場合は下記のようになります。

[*]
indent_style = space
indent_size = 4

[*.html]
indent_style = tab

というわけでリポジトリには .editorconfig を含めよう!

たとえばCakePHPのプロジェクトのリポジトリのルートは、以下のような感じが良さそうですね

files 内容
.git .gitフォルダ
.gitignore バージョン管理対象外のファイルの設定
.editorconfig エディタの設定
app アプリケーションのディレクトリ
lib CakePHPのコアファイル等
Plugin CakePHPプラグイン
vendor サードパーティ製のライブラリ等
vagrant vagrantで使用するファイル郡
composer.json composerの設定
README.md アプリケーションの説明等

お詫び

いきおいでタイトルに「便利すぎて失禁した」とつけてしまいましたが、正確には失禁までにはいたりませんでした。

心よりお詫び申し上げます。

【解答集できました】どうしてwebデザイナーに・・・CSSが書けないのか?(またはCSSでFizzBuzz問題)

  • 技術系の記事でも、ややふざけ気味のものについては、はてなブログで書くという習慣がついてきました。 (今回はマジメにいきますよ)

というわけで前回の記事「どうしてwebデザイナーに・・・CSSが書けないのか?(またはCSSでFizzBuzz問題)」がおかげさまで好評で、いくつか反響もいただいているので、そちらをご紹介していきたいと思います。

もしCSSを書くのが好きな方で上記の記事を未読の方は、先に問題を解いてみてくださいね。

いただいた解答例

はてぶtwitterで解答をいただいたものについて紹介していきますね。

捕捉できていない人がもしいたらごめんなさいー

あとわたし別にCSSが得意というわけではありませんので、CSSてきなツッコミについてはお腹いっぱいですのでご容赦ください。 nth-child()なんて実際に使ったことなんて無いし

瞬希 (id:syunki-gt) さん

「CSSでFizzBuzz問題」への回答案 - 灰色の棚

まずはすぐに解答記事を書いてくれた瞬希 (id:syunki-gt)さんです。

もし、載せたらまずいという時は、ご連絡ください。撤去します。 コードを載せることに問題は発生しにくいかなと思ったけど、ちょっと不安なので。

という気遣いもいただきました。 が、こんなネタ記事に気遣いは不要です

このCSS FizzBuzz問題のポイントは概ね以下の点でしょう。

  1. どのようにして3(5)の倍数および15の倍数の書かれた要素を指定するか
  2. どのようにして Fizz / Buzz および FizzBuzz を書き出すか
  3. どのようにしてあらかじめ書かれている邪魔な数字を消し、そしてそれに対する影響をどう回避するか

1については li:nth-child を使用するか li:nth-of-type を使用するかのどちらかでしょう。 nth-of-typeって知りませんでしたけどね

2についても :before / :after 擬似要素と content プロパティを指定して書きだすというのが常套手段と思われます。 それ以外の方法はあるんでしょうかね??

その他の点に注目して各解答を見て勉強していきたいと思います。 実際のコードは記事の方でご確認ください。

瞬希 (id:syunki-gt)さんの記事の解答例の場合、それぞれ以下のように対応していますね

  1. nth-child
  2. :after 擬似要素と content プロパティ
  3. visibility: hidden;

visibility: hidden; にするとリストの•が消えてしまうため、display: list-item; position: absolute; top: 0; として回避しています。 (なお ul#main li {position: relative;} がないと、Fizz / Buzz に置き換わる行の前に空行が書かれるようです)

わたしが試した方法は末尾に記載しますが、リストマークを表示できないため、このやり方のほうが良いですね! いきなり100点満点の解答がでてとてもびっくりです。

JF(id:jeffreyfrancesco) さん

はてぶコメントより

:nth-child()、::before(afterでもいいけど)、position、background-colorくらいでいけた / 最初から数字入ってない方がもっと楽にできそうだ / やり直したら:nth-child()、::before、display、overflow、heightでもう少しスマートにいけた

わたし、自分で「はてブのコメントで使用する技術要素を書いて」と言っておきながら、プロパティだけを見てもどうやって実装したのか分かりませんでした (´・ω・`)

li {list-style-type: none;} で良い場合は、以下でいけるようです。

li:nth-child(3n), li:nth-child(5n) {
    height: 1em;
    overflow: hidden;
}
li:nth-child(3n):before, li:nth-child(5n):before {
    display: list-item;
}

もしくは後述するsmzkさんのfizz_buzz.htmlと同様の実装かもしれません。

ながたに(id:Nagatani)さん

:nth-child(15n)を使わずに::before,::afterで実装する方法を考えたけどfont-sizeで文字消してる関係でリストのマーカーがうまく表示されずに妥協

これは完全にわたしの解答例と一緒ですね。(後述)

ちょっと違っていたようです。(CSSでFizzBuzzの解答集に載ってしまったので…… - 水に溶けるドキュメント

もともとFizzBuzzって15の倍数の判定をどうするかで2つの解答があると思っていまして

  • 単純な if 文でやるばあい15の倍数を先に判定する
  • 3の倍数と5の倍数のみ判定し、15の倍数のときは両者を利用する(文字列結合等)

という感じです。

なるべくなら後者でやりたいというのが人情というものではありませんか?(個人の感想です)

というわけでわたしもこの実装です。 が、この場合どうしてもリストマークが消えてしまいます。 どなたか消えない方法をご存じの方はぜひ。

コルクことkoluku。 (id:koluku)さん ※ 2/18 10:53 追記

CSSでFizzBuzzをやってみた - koluku°

これSEO的に悪いんだよぁ…まぁCSSで書き換える時点でSEOに悪いですが。

とのことで、はい、そうですね。 FizzもBuzzも現時点ではどの検索エンジンも捕捉しないでしょうねw

面白いのは、数字の消し方ですね。

position: absolute;background: #fff; を組み合わせて背景色で消しています。 こんな消し方思いつきませんでした。なるほど。

id:macha-ru さん

【SASS】CSSのfizzbuzz問題をSassで解いてみたよ | Masablog

なんとSass使って解いてくれた方も!

おー。これは勉強になりますね! こんなに本格的に書いたことなかったので、使ってみたくなってきました。

CSSてきには基本的な実装で、visibilityで表示を制御していますね。

Daiki Noda(github:sys9kdr)さん

fizz_buzz.html

つづいてgistをforkしていただいたsys9kdrさんです。

表示の制御を font-size で行う実装ですね。

::after ということで、CSS3の擬似要素の記述法で記述されていますね。 さすが、ちゃんとしています。

smzkさん

fizz_buzz.html

こちらもgistをforkしてくれました。

上述のJFさんとおなじく display overflow visible での実装ですが、 li { list-style-position: inside; } とすることでリストマークが消えないように工夫されていますね。

そもそも list-style-position を知らなかったのですが、応用的な使い方すぎて知っていてもこういう使い方に気づかなかったと思います。

mogya さん ※ 2/18 11:13 追記

Re:どうしてwebデザイナーに・・・CSSが書けないのか?

gistで解答していただきました。

3,5とかよりも、数字を隠してFizzBuzzを表示させるほうがよっぽどたいへんw

ですよねー。知ってましたけど。

FizzやBuzzでリストマークが消えるので ul {list-style-type: none;} が必要っぽいですね。

かなり早く解答していただいたようでありがとうございました!

mon_sat(github:monsat)

最後はわたしの考えた解答例。 これだけみなさんいろんな実装をしていると載せるのが恥ずかしくなってきますが・・・

gist9044288

数字がない場合の実装例

はてぶのコメントで「数字が邪魔」っていう意見が散見され、おや?と思って調べたところ、次のような実装が可能ですね。 ただし空のliタグは数字の個数分必要です。

#main {
    counter-reset: fizzbuzz;                                         
}
#main li {                                                           
    counter-increment: fizzbuzz;                                     
}
#main li::before {                                                   
    content: counter(fizzbuzz);                                      
}
#main li:nth-child(5n)::before {                                     
    content: "";                                                     
}
#main li:nth-child(3n)::before {                                     
    content: "Fizz";                                                 
}
#main li:nth-child(5n)::after {                                      
    content: "Buzz";                                                 
}

content|CSS2.1 生成内容|Web制作 W3G

twitterやはてぶでいただいた温かいコメント

数字が邪魔ですみません・・・

ありがとうございます!紹介させていただきました。

/*
HTMLいじっては、いけないので、1から100以外になることはない。
 */

たしかにそうですね・・・

ぜひ当記事もご参考に!

いかがでしたでしょうか?

回答ありがとうございましたー。 ぜひ難しい問題作ってください!

CSSFizzBuzzすること自体が筋が良くな(略

わたしも消えました・・・

めんどうくさいので、JSに(略

わたしもいろんな実装があるのを知って勉強になりましたので、ぜひこの記事をご参考に!

大好きですw

素晴らしい!

id:burnworks 「IE6対応必須」って一言書くだけで無理ゲーにできるからぜひ(違) (id:mayuki そうですね)

IE6はbefore, after擬似要素対応してないですからねー。

id:mayuki id:burnworks むしろIE6-7はexpressionを使えば最短で書けます。

なるほど。存在すら忘れてましたw

id:asuka0801 css CSSでやりたくねえw

ですよねー

id:hadakadenkyu nth-of-type或いはnth-childとcontentでイケるがどうせなら数字もlist-style-type: decimalでやるべき。つか最も古くは2007年のを見つけたが。http://d.hatena.ne.jp/tomoya/20071013/1192308204

ふむふむ。勉強になります。既出なんですねー。

謝辞

みなさんお付き合いいただきありがとうございましたー。

f:id:mon_tinian:20140218092342j:plain

どうしてwebデザイナーに・・・CSSが書けないのか?(またはCSSでFizzBuzz問題)

タイトルは どうしてプログラマに・・・プログラムが書けないのか? からもってきました。 原文はこれですかね。

FizzBuzz問題という有名な問題があります。

1から100までの数を表示させる。 ただし3の倍数のときは数字の代わりにFizzと、5の倍数のときはBuzzと、3と5の両方の倍数のときはFizzBuzzと表示させる。

ただこれだけの問題です。

PHPで平易に書くとしたらこんなかんじでしょうか

<?php
for ($i = 1; $i <= 100; $i++) {
    if ($i % 15 == 0) {
        echo 'FizzBuzz';
    } elseif ($i % 3 == 0) {
        echo 'Fizz';
    } elseif ($i % 5 == 0) {
        echo 'Buzz';
    } else {
        echo $i;
    }
}

JavaScriptならこんな感じで書けますね

どうしてwebデザイナーに・・・CSSが書けないのか?

わたしはコワーキングスペース茅場町 Co-Edoに来ているWebデザイナーたちがCSSのボックスモデルすら理解していないという事実に信じられない思いでいた。

「そんなばかな!?」って思っただろうか?

わたしは試行錯誤の末、CSSのボックスモデルが理解できない人たちというのは、CSSで書くことが困難なデザインについて苦労しているのではないということが分かった。 彼らは、FizzBuzz問題ですら解けないのだ。

CSSによるFizzBuzz問題はこちらだ。 (訳注: このブログ記事の末尾でhtmlコードを確認することができます)

ちゃんとしたWebデザイナーであれば、これを実行するCSSを2分とかからずに紙に書き出せるはずだ。

怖い事実を聞きたい?

コンピュータサイエンス学部CSS学科レスポンシブデザイン研究室の卒業生の過半数にはそれができないのだ。 自称上級Webデザイナーが答えを書くのに10-15分もかかっているのを見たこともある。

なお、このエピソードは当然フィクションです。

というわけでCSSだけでFizzBuzzしようぜ!

答えがわかった人(もしくは分かるだろうという人)は、はてブのコメントで使用する技術要素を書いて自称上級Webデザイナーたちに教えてあげてほしい。

答えがわからない残念な人は、コワーキングスペース茅場町 Co-EdoFacebookページを いいね! してから、Co-Edoで開かれる勉強会への参加をいますぐ検討することだ。 (訳注:Co-Edoのブログで毎週、勉強会の情報書いています

それでは。

解答集編の記事はこちら

ul#main 内の li 要素が、適宜 Fizz/Buzz/FizzBuzz と表示されるように ...

(こんなネタ的ブログばかり書いていると、そろそろクズコンバレーの住民になれそうな気がしてきた)

f:id:mon_tinian:20140206203613j:plain

賢くないひとはこれを使ってみてはどうか(Chrome拡張機能 : Nogusy)

賢い人はみんな使っていることで有名Gunosyという素敵なサービスがあります。

僕もとても大好きなサービスです。使っていませんが。

使ってないひとはみんな賢くない・・・

例の広告を、図にするとこんな感じ。

f:id:mon_tinian:20140129175522p:plain

というわけでこの記事は賢くないあなた(非Gunosyユーザー)のために書きました。

別窓問題

おそらく賢い人(Gunosyユーザー)は気づいてないと思うのですが、非Gunosyユーザーにはとても許せない問題「別窓問題」というのが存在します。

大好きでしかたがないGunosyですが、この点だけは、とてもうざい気になります。

Gunosyユーザーが、Facebook等でシェアされたGunosyのリンクを開くと次のような挙動になります。

  • シェアされたリンクを開くと、いったん(別タブで)Gunosyのページが開く
  • そのページのリンクを開くと、また別タブで記事ページを開く

ちなみにGunosyのアカウントを持っている方は、自動的に記事ページを表示する仕組みのようです。 (わたしは非Gunosyユーザーなので知りませんでしたが、さきほど教えてもらいました)

というわけで、作ったのが、次のようなGoogle Chrome拡張機能

GunosyでシェアされたURLでも自動的に記事ページにリダイレクトする Nogusy

https://github.com/monsat/nogusyGoogle Chrome 拡張機能

さすがに正式に公開するのはGunosyさんに申し訳ないため、こっそり公開しています。

How to use

ソースコードをDL(zip)するかgitでcloneしてください

$ git clone git@github.com:monsat/nogusy.git

Google Chrome 拡張機能のページ(chrome://extensions/)を開く

  • 開発者モード(Developer mode) をonにする
  • パッケージ化されていない拡張機能のロード(Load unpacked extensions...)をクリックする
    • 解凍フォルダ/nogusy/src/nogusy を選択する

あとは、思う存分、Facebook等でシェアされた某サイトのリンクを踏みまくってください。

紹介記事

ご紹介ありがとうございますー。

最後に

Gunosy大好きです! でもNogusyはもっと好きです。