IE edgeで<labal>に<input type="file">をネストすると無限ループする問題への対策

現象

IE edgeでファイルアップロードのダイアログが無限ループするバグがあったので、この問題への公式の発表と対応方法をまとめました。

 

環境:IE edge

HTML

 

Microsoft公式の発表

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8282613/

label>input type=fileをネストするとダイアログが無限ループする

この問題はlabelとinputをネストさせずに兄弟関係にすれば発生しない。

JS-generated <label><input type="file"></label> causes infinite loop of opening file dialog

(中略) 

this problem does not happen if the <label> and <input> are siblings, rather than being nested.

 

対応策

ネストしてるとだめなので、まずはマークアップを兄弟関係にします。

HTML

CSS

#file { display: none; }

IEは何かとお騒がせなブラウザですね

たぶん主婦でも出来る特化ブログを収益化させて月3万くらい稼ぐハウツー

僕がキュレーションメディアのエンジニアをやってたこともあり、半年ほど特化ブログを使って色々実験していました。2016年8月くらいからじわじわやっていた特化ブログの収益化の目処が立ったのでその手順を紹介したいと思います。

特化ブログとは?

特定のジャンルやニッチなターゲットに向けてブログコンテンツを投入していくことで読者を獲得する手法の1つです。Webメディア業界では有象無象のメディアから、1次コンテンツを作る新聞のようなメディアが生まれて、それに対抗するカテゴリー特化メディアが生まれ、それに乗っかるキュレーションメディアが生まれた歴史があります。

 

その後Buzzfeedのような分散型メディアやバイラルメディアなんかも生まれてますが、今のWebメディアの戦略は大きく2つに分かれます。

 

カテゴリ特化(バーティカル)vs ソーシャル特化(バイラル)

 

バーティカルでもバイラルがある程度必要ですが、そもそものビジネスモデルが全然違います。ソーシャル特化は記事がストック化しにくいのでフロービジネスに近く、カテゴリ特化したコンテンツは競争力があるのでストック化しやすいストックビジネスという点に違いがあります。

 

特化ブログが目指すべきは、良質なコンテンツを作って中長期的に収益を生み出すストックビジネス化することだと頭の中にイメージしてこれからの手順を読み進めてください。

 

特化するカテゴリーやテーマを選ぶ

客単価が高い大カテゴリーから選ぶ

僕は自宅売却経験があるので不動産の中でも自宅に絞って、首都圏の自宅マンション投資に絞り込みました。収益化を前提とするなら、不動産・保険・転職・投資などの客単価が高いカテゴリーの方が楽なので、そういうのを選ぶといいです。

 

広告の性質上特化してターゲットを絞ったほうが広告効果が高いため、特化ブログの方が雑記ブログよりも収益性の点でメリットがあります。

 

大カテゴリーと得意分野を掛け算してブルーオーシャンを作る 

転職したことある人は転職×業界とかオフィスで選ぶ転職とか、掛け算でブルーオーシャンな特化ブログを作るとGOODだと思います。

 

僕の場合は不動産×首都圏×自宅マンションに絞りました。

自宅投資戦略研究室

 

のらえもんさんのブログなんかはさらに湾岸タワマンまで踏み込んでいて、素晴らしいブルーオーシャン戦略ですね。

湾岸不動産総合情報「マンション購入を真剣に考えるブログ」

 

SEOはWELQハックに学ぶ

テキスト量でGoogleをハックする

悪いところは学ばず、WELQが行ったGoogleハックから学びます。

基本戦略はとにかくテキスト量とキーワード含有量を増やすことです。

 

  1. テキスト量を4000文字〜6000文字用意する
  2. キーワードを見出し(h2,h3,h4)に入れる
  3. 競合よりもオリジナルテキストを増やしてリライトする

 

テキストが多くて、ターゲットに訴求するコンテンツであれば被リンクは必然的についてくるでしょう。最終的に被リンクをあつめられるようになれば中長期的に安定したアクセスを維持することができます。

 

読まれやすいタイトルや被リンクは近道がないのでこういう統計情報が参考になると思います。

15万記事を分析してわかった、クリック率を20%高める「記事タイトル」3つの法則とは?|アプリマーケティング研究所|note

 

リライト競争に勝つ

検索結果の順位が1位と2位ではやはり大きな流入差が生まれます。

そこで、DeNAパレットにはリライト専門部隊がいて、戦略的に順位を上げていました。

 

リライト競争です

 

特化ブログのミッションは特定のキーワードに対してNo1戦略を取ることです。

すなわち、流入キーワードで検索して自分より上に表示されているコンテンツにコンテンツ量で勝つだけで流入を増やすことができます。

 

まずは30〜50記事を投入する

4,000文字程度の記事を30記事入れるとなると、1本2時間としても60時間くらいかかります。本業の時給で計算すると原価30万円くらいの仕事でしょうか。だいたい作業が分かればクラウドソーシングで外注してしまってもいいですが、期待したほどの品質で納品されることはまずないので注意してください。

 

ちょっとブログを放置する

Googleにしっかりインデックスされるには少なくても2ヶ月から3ヶ月くらいかかってしまうので、気長に記事を投稿しつつ放置してても構わないです。

 

このようなイメージで、2ヶ月目くらいから徐々に検索流入が入り始め、徐々に増えていくようなシナリオになると思います。アクセス数が増えなくても焦らず必要な記事を書き続けましょう。

 

f:id:kitahashi-ryoichi:20170109144818p:plain

 

あせらない、あせらない

 

収益化はアドセンス+アフィリエイト

特化ブログにはアフィリエイトの方が適している

メインは高単価のアフィリエイトに流し込む収益モデルなのでアドセンスはなくても良いかもしれない。

 

アフィリエイトはこの3つに登録してればOK

 

広告を選ぶポイント

  • 特化ブログと親和性が高い広告を探す
  • 単価の高い広告に絞り込む

 

ここで親和性の高い広告が見つからない場合は収益化し辛いカテゴリーなので、カテゴリーを少し変えましょう。

 

ここまででもうお分かりだと思いますが、

特化ブログは収益から逆算してコンテンツを作る必要があります。

 

アフィリエイトで収益化するポイント

  • サービスを実際に使ってみる
  • 不安に感じたポイントを解消する
  • まじな話どうなの?をコンテツにする

 

アフィリエイトはフルコミッションの営業となんら変わらないので、自分の営業力が全てです。ポイントとしては実際にサービスを使って心の底からそのサービスを人に紹介したいと思うことでしょうか。

 

ブログに訪れた人はそのサービスでどう生活が変わるか具体的にイメージできない状態なので、買ってみようと思うまでに至る不安を整理して解消してあげるとか、具体的にイメージ出来る状態にすることがポイントになります。

 

とはいえ記事書いてるうちに分かってくると思うので

「習うより慣れろ」が一番近いかもしれません。

 

収益化の目標値

1PV=5円くらいが見えてくると目標値到達といったところです。

 

月6000PV

1日200PV

月3万円

 

ここまで来るのに6ヶ月

実働は70時間〜80時間

気合入れて記事投入したり、バズって被リンクをすぐに稼げば時間を短縮できます。

そういうのがなくても半年かければだれでも到達できると思います。

 

月3万円のその先の収益化

絶賛チャレンジ中ですが、収益3万円を外注記事に予算振りしてみようと思います。

 

1本辺りのコストが3000円であれば月10本記事を上げられます。

これで追加の時間を投下することなく成長させることができるので、また別の特化ブログを始めるもよし、新しいことに時間を割くことができるようになります。

 

まとめ

たぶん主婦でもできる特化ブログの収益化ということで、3つのポイントをまとめました。これを意識していれば月3万くらいは軽く稼げると思うので、妊娠中や子育てで働けない主婦の方の在宅ワークにいかがでしょうか。

 

特化ブログ収益化3つのポイント 

  1. 掛け算でブルーオーシャン特化ブログを作る
  2. テキスト量でGoogleをハックする
  3. リライト競争に勝つ

ホワイトカラーの仕事はロボットがやるから無くなるって本当?

ロボットが日常業務を自動化するようになる

まさに最近ホワイトカラーの日常業務を自動化するプロジェクトをやっていたので、あと2・3年もすると企業のバックオフィス(総務・人事・会計・労務・法務)の仕事は、かなり大部分をロボットが代わりにやるようになるという肌感があります。

 

そもそもロボットって何?

いわゆる工場のロボットではなく、人間の代わりにブラウザを操作したり、メールを送ったり、Excelを開いてデータを集計して別のファイルに保存したりするものをロボットと呼んでいます。

 

これまでのシステムとロボットって何が違うの?

これまではシステムを人間が操作する2階層でしたが、間にロボットが挟まるのをイメージしてください。システムをロボットが操作して、そのロボットを人間が操作することで半自動〜自動で作業を行うことができるようになり、生産性が飛躍的に向上します。

 

ロボットを使った具体的な事例

具体的にどういうことかというと、かんたんな経費申請でも人間がやる作業はこんなにたくさんあります。

  • 申請書類のチェック
  • ワークフローシステムで承認してもらう
  • 会計システムへの入力
  • SAPなどのERPへの再入力
  • 給与システムへの連携

 

この1つずつの作業は定型業務なので、1つずつ業務とその分岐や通知を洗い出して、それを1つずつ実装しいきます。この時は申請書類OKにして、この時は申請NGだから担当者にメールするといった具合に、1度実装してしまえばロボットはミスしないし給料も請求してこないので低コストでバックオフィス業務が回るようになります。

 

ホワイトカラーの仕事のほとんどは定型業務だから自動化できる

生産性UPに貢献したBPOと定型業務

一昔前に大手コンサルがBPO(ビジネス・プロセス・アウトソーシング)の旗を振って、ノンコア業務とかバックオフィス業務の外注によるコスト削減を達成してきました。達成できたコスト削減額はだいたい15%〜30%と言われており、ある一定の成果をあげてきました。BPOができたのはホワイトカラーの業務が15%〜30%が外注化できるほどに定型業務だったからです。

 

BPOよりもコスト削減の期待ができるRPA

RPA(ロボティック・プロセス・オートメーション)は、ホワイトカラーの定型業務をロボットに代替させて自動化する考え方です。BPOは15%〜30%しかコスト削減効果がありませんでしたが、RPAは人間の定型業務をすべて代替できるため45%〜75%の削減効果があると言われてます。特に定型業務の多い会計なんかは90%がロボットに代替されるとか。

 

3分で分かるRPA | Resource

 

RPAがコスト削減できる3つの特徴

  1. ロボットのコストは安い
  2. ロボットはミスしない
  3. ロボットは変化に対応できる

 

ロボットは一度作ってしまえば維持費はサーバー代だけなので、絶対に人間を雇うよりも安くなります。作るのにコストはかかってくるので、イニシャルコストは発生しますが人間を雇う時も面接したり追加コストは発生しますよね。

 

次に、ロボットはミスしたり騙したりしないので、正しく処理を行うべきところで活躍します。人間だとチェックに時間がかかってしまうことでも、システムには得意分野なことが多いので大幅なコスト削減につながります。

 

最後に、今後ロボットが進化していく前提での話ですが、機械学習やAIのテクノロジーを取り込んでいくことで変化に対応できるようになっていくかもしれません。現状は定型業務をこなすだけですが、異常を検知すれば人間に確認を取ったりすることなんかはすぐできそうですね。

 

結果、ホワイトカラーの仕事は無くなる?

すべての仕事はなくなりませんが、定型業務は確実になくなっていきます。逆にいうと、定型外の業務が主になることでよりスキルの二極化が進み、企業間競争も加熱するのではないでしょうか。SIerや業務改革コンサルタントの人にとっては、今後数十年の飯の種がRPAだったりするかもしれませんね。

 

RPAの事例や概念をもっと知りたい方は、日本で唯一RPA専業でやってる会社の本が出たので一読してみはいかがでしょうか。 

 

TwitterCardを設定してBOTのつぶやきをリッチに見せる

この記事で紹介すること

TwitterBotが呟いた記事に含まれているリンクを、カード表示にしてリッチに見えるようにする。

 

Before 

f:id:kitahashi-ryoichi:20161223160003p:plain

After

f:id:kitahashi-ryoichi:20161223155520p:plain

このテックブログ.xyz/entries/44135をAfterのカード表示にしてくれるTwitterカードを今回はご紹介します。

 

Twitterカードを表示するメリット

  • CTRが上がる

以上

Twitter Card Analytics — Twitter Developers

 

Twitterカードを表示する手順

facebookのOGP同様、サイトのメタタグに設置することで機能するので、メタタグをマークアップしていきます。

 

4つの中からカードの種類を選ぶ

  1. Summaryカード
  2. Summaryカード(画像大)
  3. Appカード
  4. Playerカード

Webサイトの場合は1か2で、アプリダウンロードさせたければ3を選びます。4は動画コンテンツをやってる人向けです。今回はWebサイトなのですが、ナショナルジオグラフィックのような大きい写真コンテンツでもない限りは1のSummaryカードを選ぶのが妥当です。

 

metaを書く

<head>の中にTwitterカード用のmetaを書いていきます。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@tech_news_jp" />
<meta name="twitter:title" content="Webエンジニアのためのテックブログまとめ" />
<meta name="twitter:description" content="Webエンジニアのために参考になるテックブログをあつめて毎日更新!これであなたも一流のエンジニアに。" />
<meta name="twitter:image" content="http://xn--pckc9cl6fsg.xyz/images/common/logo.png" />

細かくは記事ページだったらtwitter:imageを、記事サムネイルにするなどのif分岐は必要になってきますが、今回はロゴ画像だけにして割愛します。 

 

TwitterカードValidatorでチェックする

ただ本家のValidatorは、公開されているURLしかチェックしてくれないので不便です・・・。

https://cards-dev.twitter.com/validator

 

Twitterカードの注意点

透過は背景灰色になるので、気になる人は白背景のロゴやサムネイルを用意しないといけないかもしれません。

 

公式

Twitterカード — Twitter Developers

5分でRailsのTwitterBotを作る手順

やりたいこと

自動的にTwitterに通知するBOTを作りたい。

今回は、「Webエンジニアのためのテックブログまとめ」で、評価+100以上の記事を殿堂入りとしてTwitterにつぶやかせます。

 

前提条件

RailsまたはRubyで作っていきます。

 

TwitterBotを作る手順

Twitterアプリを登録する

Twitter Application Management

Create New Appから登録します

 

f:id:kitahashi-ryoichi:20161223154428p:plain

 

入力項目

  1. Name 「Tweet Bot」とか何でも良いです
  2. Description 「This bot post high quality entry.」とか適当に
  3. WebSite 「http://example.com

 

 

作ったらアクセストークンを生成します

Keys and Access Tokensタブをを開いて、「Create my access token」ボタンをクリックします。

f:id:kitahashi-ryoichi:20161223154815p:plain

f:id:kitahashi-ryoichi:20161223155010p:plain

ここで作った4つのキーとトークンは投稿する時の認証に使います。

 

  • Consumer Key
  • Consumer Secret
  • Access Token
  • Access Token Secret

 

Twitter Ruby Gemをインストール

ファイル:/Gemfile

gem 'twitter'

そしていつものコマンドを打ちます

bundle install

 

GitHub - sferik/twitter: A Ruby interface to the Twitter API.

 

Rakeタスクを作る

/lib/tasks/bot.rake

require 'twitter'
namespace :bot do client = Twitter::REST::Client.new(
consumer_key: ENV['TWITTER_CONSUMER_KEY'],
consumer_secret: ENV['TWITTER_CONSUMER_SECRET'],
access_token: ENV['TWITTER_ACCESS_TOKEN'],
access_token_secret: ENV['TWITTER_ACCESS_TOKEN_SECRET'],
) task :tweet => :environment do client.update('つぶやきの内容をここにいれる')
end
end

 

つぶやく

client.update("I'm tweeting with @gem!")

 

フォローする

client.follow(213747670)

 

ユーザー情報を取得する

client.user(213747670)

 

詳しいAPIのメソッドはコチラのリファレンスを参照してください

GitHub - sferik/twitter: A Ruby interface to the Twitter API.

 

TwitterAPIのアクセストークン等を環境変数に入れる

GitHubとかにアクセス情報をコミットしたくないので、bash_profileなどに入れちゃいます。

~/.bash_profile

export TWITTER_CONSUMER_KEY=hogehoge
export TWITTER_CONSUMER_SECRET=hogehoge
export TWITTER_ACCESS_TOKEN=hogehoge
export TWITTER_ACCESS_TOKEN_SECRET=hogehoge

 

環境変数を最新にするために、sourceしておきます

source ~/.bash_profile

 

Rakeタスクを実行してみる

rake bot:tweet

 

すると・・・つぶやきができるはずです。

 

こんな感じ

f:id:kitahashi-ryoichi:20161223155520p:plain

最新のWeb技術をゆるくおさえられる「Webエンジニアのためのテックブログまとめ」作りました。

Webエンジニアのためのテックブログまとめというサービスをリリースしました。単純に有名企業がやっているテックブログを探したりフィードに登録するのが面倒な人向けに、まとめて見られるサービスです。

 

ばばん! 

 

ターゲット

Webエンジニアとして働いてる人で、最新のテクノロジーや他社の事例をするっと見たい人におすすめです。

 

提供しているサービス

  • 143のすべての企業テックブログのフィードに対応
  • Qiita::Organizationのテック記事に対応
  • はてブ数+Qiitaイイネ数でランキング

 

こんな感じでテック記事の週間ランキングが見れます

f:id:kitahashi-ryoichi:20161220164736p:plain

 

今後追加するサービス

  • 個人ブログで上がっているテック記事にも対応
  • テック記事を100点中何点と評価する機能を追加
  • ElasticSearchでサイト内検索と精度の高いレコメンドを提供

最終的には、すべてのテック記事にスコアを付けて、優良な記事をちゃんと評価して残していくエコシステムにしていきたいと考えています。各社ものすごいコストかけた優良記事を残しているので、もっと広めたい!

 

作ってからの反省

  • 日本語ドメインはもうなんか怪しすぎる・・・二度と取らない
  • レスポンシブで実装したけどアクセス元がほぼMacでChromeだった
  • メディアだったので最新技術なにもつかってない

 

開発工数とか

11月末からスキマ時間にコツコツ作り込んで、だいたい70時間くらいになりました。シンプルにRails5で作っていて、Rails5のパフォーマンスの良さには頭が下がるばかり・・・。IDCFの500円サーバーで余裕で動くので、世の中すごい便利になったなぁと思います。もう年ですね。

 

今はクラウドワークスでロゴのコンペを実施したり、特集コンテンツを作ってくれるライターの相談をしながら運用面を詰めているところですね。

 

というわけで年明けのアプリリリースに向けて鋭意開発中です。

どうぞよろしくお願いいたします!