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

ゼロツク

最終的にゼロから人の役に立つ物を作りたいなぁ

働く場所を自ら選び、仕事を獲得するために何度も読みたい記事

自分用のメモです。適宜追加したいと思います。

ファーストキャリアを選ぶ

1. リーダーシップ
2. 生産性の概念
3. マーケット感覚
4. 自分のアタマで考えるスキル

プレ・インタビュープロジェクトを実施する

君が彼らの課題を解決できることをどうやって証明するのか?その方法とは、採用される前にその仕事をやってしまうことだ。僕はこれを「プレ・インタビュープロジェクト」と呼んでいる。

内定者インターン、新入社員として活躍する

初級編
 01:依頼されたことに100%で答える
 02:ちょっとずつ、期待を超える
 03:言われてないことをやる
 04:わからなかったらすぐに聞く

三点リーダー(……)の使い方とMacでの打ち方、変換方法

駆け出しライターが、執筆の仕事中に気になったことを調べてメモしています。前回は、表記ルールを公開しているメディアについて書きました。

 今回は、三点リーダー(……)についてです。

三点リーダーは、2回使うのが基本

文章の語尾に「なんだと……」「なんだと・・・」のように使う連続した点。それを三点リーダーというらしい。そして、基本的には「中点(・)」を3つ連続するのではなく、「三点リーダー(…)」を2回繰り返すのが正解のようだ。

三点リーダーのMacでの変換方法について

三点リーダーのタイピングは、「てん」と打って、「…」を変換することが多いらしい。でも、それはめんどくさい。

調べてみると、「option + ;」で「…」を打つことができた。ショートカットキーなのかな?

三点リーダーをベースラインではなく、真ん中に表示する方法

三点リーダーは、基本的に「……」というようにベースラインでの表示となる。しかし、「中点(・・・)」のように真ん中で表示したい時もある。読みやすさや感覚的に。

その場合は、下記のように三点リーダーのみ日本語フォントを指定することが解決するようだ。

<span style="font-family: 'HG丸ゴシックM-PRO';">……</span>

 はてなブログのHTML編集で書いてみると、

・通常の三点リーダー「……」
・日本語三点リーダー「……」

というように変わって見える。え?わかりにくい?

通常「……」CSS指定後「……」

これでわかった。

ピリオドを3回繋げると紛らわしい問題「...」

雑談になるが、ピリオドを3回繋げると「...」、三点リーダー「…」となる。うーん、わかりにくい。基本は押さえて、あとはライターが自分で考えて使い分ける記号なのかもしれない。

日本語表記ルールブック

日本語表記ルールブック

  • 作者: 日本エディタースクール
  • 出版社/メーカー: 日本エディタースクール出版部
  • 発売日: 2012/03
  • メディア: 単行本
  • 購入: 3人 クリック: 3回
  • この商品を含むブログを見る
 

 

表記ルールを公開しているWebメディアまとめ

現在、駆け出しライターとして複数のメディアで執筆をさせてもらっています。最近、仕事をする中で気になるようになってきたのが、表記ルール。

特にクラウドソーシングでの案件では、『共同通信社の記者ハンドブック』を参考にしてください。とだけ書かれていることがあります。もちろん、メディアがこれまでの経験から独自の表記ルールを決めて、Google docsなどで提示してくださることも多いです。

自分がWebメディアを作っていく上で参考にしたいと思い、表記ルールを公開している媒体があるか、調べてみました。

LIGブログの表記ルール

元LIGブログ編集長の朽木誠一郎さんが、いくつかの日本語表記ルールについて殿堂入りの記事を書いたことで、注目していたカテゴリー「ライティング・編集を学ぶ」。

その後、エリーさんがLIGブログの表記ルールをまとめていました。

iemoの表記ルール

キュレーションメディアのiemoが、キュレーター向けの表記ルールを公開していました。「必ず守ってほしいルール」と「読みやすくするためのルール」に分けているのがよいですね。

パソコンで執筆していると、どうしても漢字変換をしてしまう癖があります。予測変換機能を弄ってみようかな。

まだまだありそうなのですが、簡単に検索してみたところ2つのWebメディアが表記ルールを公開してました。新しい媒体に執筆することになった時は、過去記事を読んだり、編集部に確認したりしよう。

 

記者ハンドブック 第13版 新聞用字用語集

記者ハンドブック 第13版 新聞用字用語集

 

 

日本語表記ルールブック

日本語表記ルールブック

  • 作者: 日本エディタースクール
  • 出版社/メーカー: 日本エディタースクール出版部
  • 発売日: 2012/03
  • メディア: 単行本
  • 購入: 3人 クリック: 3回
  • この商品を含むブログを見る
 

 

アイデアは形にしないと意味がない。完結的な人間になろう。

先日、「Webメディア「FEELY」サービス運営・事業譲渡に関するお知らせ|株式会社IREMONOのプレスリリース」というプレスが流れてきた。あれ?creiveを運営している会社なんだ!

何て会社だ・・・株式会社IREMONO(長野県諏訪郡富士見町)。ほう!長野!これはおもしろそう。企業ページを見てみる。え?編笠山や西岳の登山口の近くだ!通勤登山できると、登山バカの血が騒いで、サイトをたどっているうちにこんな記事に出会った。

株式会社IREMONOのPiyon Yumiyon (渡辺 裕明)さんが書いてるブログの1記事。「いいことば」では、子カテゴリーに名前を載せているのだが、どの名前を使ってよいのかわからず色々調べてしまった(笑)

株式会社IREMONOの役員には「代表取締役 邉 裕明」。Wantedlyには「Piyon Yumiyon」。Facebookには「Piyon Yumiyon (渡辺 裕明)」。と様々な名前を持つ方のようだ。ここは一応企業サイトに書いてあるお名前を使わして貰おう。

検索好きでいつも思うんだが、何だかストーカーみたいだな。。。。インターネット怖し。

「プロフィール」
株式会社IREMONO (イレモノ) - 好きを、大切に。
Piyon Yumiyon プロフィール - Wantedly
https://www.facebook.com/yumiyon.piyon

完結的な人間とは

記事を読んで感銘を受けたのは、大学3年生の時に「完結的な人間」になろう。と決め4年間行動に移してきたということ。1つ1つwebサービスを作る毎にステップを踏んでいる経緯が書かれている。

僕自身も何でもやってみたい!と思ってしまう性格であり、企画、デザイン、フロントエンド、サーバー、マネタイズと1周したいと思う。1歩先を進んでいる方のように感じてしまった。

僕が定義する「完結的な人間」とは、Webプロダクトを制作する際に「企画、デザイン、フロントエンド、サーバーサイド、プロモーション」までを1人で行える人間のこと

完結的な人間になろうと決めたその日から、様々なスキルを身につけるため、勉強しながら複数のサービスを開発してきました。

アイデアは形にしないと意味がない

人は互いの共通点を見つける事で親近感を勝手に抱く生き物だと思うが、この1記事の中でいくつもの共通点を見つけた。

この「アイデアは形にしないと意味がない」という題名。どこかで聞いた事あると思ったら、2年前にブログを書いていた。wantedlyの仲さんの記事を読んで、その通りだなとこの時書いていた訳だが、まだまだ頭の中で収まっていることが多く、もっと形にしていかないと。と反省。

「幸福が現実となるのは 、それを誰かと分かち合った時だ。」

以前、1つ前のブログの中で自己紹介で自分の行動の原点の1つに「in to the wild」を見た事。と書いた。映画のDVDも書籍も持っている。

大学受験時代たまたま電車の広告で見つけた映画「in to the wild」http://intothewild.jp/top.htmlを見て、衝撃を受ける!

自己紹介 - わらしべ長者で世界一周航空券をめざす!?

そんな映画の言葉を引用されている。

1人でやっても、それを分かち合う相手がいなければ全然楽しくないからです。(ノンフィクション小説&映画「Into the Wild」で主人公が最後に口にした「幸福が現実となるのは 、それを誰かと分かち合った時だ。」という言葉にあるように)

 自分にとっては耳が痛い言葉だ。なぜなら僕の苦手なことであり、克服したい事の1つが「頼ることが下手」であるから。

高校時代に色々あってから、「in to the wild」の主人公のように、1人で何でもやることで、自分自身が生きている価値であったり、存在意義みたいなものをもがいて探していた。でも、本当は心の中では、仲間と一緒に作ることや、分かち合うことの方が最高だと知っている。

惹かれているということは、未来は決まっている?

 以前、松本に移住しサービスを開発されているヤマレコの的場さんについてもブログで書いた。僕自身は横浜の出身だが、千葉県いすみ市に移住している方にお世話になったり、長野でのWebサービス開発に惹かれたりと、都内のタワーマンションの100倍魅力的に感じてしまう。

最近思っているのは、過去に「こうだったらいいなぁ」と思っていることは未来に回収している可能性が非常に高いこと。考えていれば、勝手に人と出会ったり縁が繋がったりするのかもしれない。

実力が伴ってこそ綺麗ごとができる

クルミドコーヒーの影山さんが書いた、ゆっくり、いそげ ~カフェからはじめる人を手段化しない経済という本を読んで感じたことだが、きれいごとは実力が伴ってこそできる。

「完結的な人間になる。」「長野をオフィスにして起業する。」言うのは簡単だが、現実にするのは大変。行動しながら、失敗しながら、実力を付けてやりたいことができる人間になりたい。プログラミングやらなければ。

だらだらと書いてしまったが、機会があれば1度ログハウスのオフィスにお邪魔してみたいなぁ。と思う。(想えば叶うと書いたばかりだし)

はてなブログのトップページ記事一覧にアドセンスを挿入する方法

はてなブログの記事一覧やカテゴリーページである「archive-category」の記事の間にどうしてもアドセンスを設置したい。そんな想いでとうとう完結編まで来る事ができた。

Googleアナリティクスでカテゴリーページのアクセスが多いことに気付き、ググりまくって、コードを変えたりしてやっとできた・・・。まぁ、前置きは長くなるのでこれくらいにします。

僕ははてなブログproなので、無料の方は厳しいかもしれません。また、導入はこのブログではなく、違うやつでやっています。コードは、はてな記法じゃなくgitからでもなくてすみません。

スマホ記事一覧にアドセンスを挿入するコード

すなばいじりさん(id:psne)の記事を元に作成しました。また、現在はレスポンシブで無いため、スマホのみの表示としています。

【確認】「head」にアドセンスを呼ぶjavascriptが書いてあるか?

「設定」>「詳細設定」>「headに要素を追加」に下記のコードがあるか確認する。複数のアドセンスを設置している場合はこの方法で毎回読み込まなくてよくなる。もしくは、今回の下記コードに追加します。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

「デザイン」>「フッター」に設置するコード

下記のコードを新規アドセンス広告から、「自分のID」「広告ID」を持ってきて書き直してください。

また広告の大きさによって<style>を変更すると良いと思います。PC表示場合は、@mediaを使って切り替えるようです。これは元記事を参照してください。

僕は広告は真ん中に表示するために、<center>を入れました。

<script src="//niyari.github.io/hatenablog-modules/push-content.js" charset="utf-8"></script>
<script>
Htnpsne.PushHTML.init('<center><ins class="adsbygoogle my_adslot" style="display:inline-block" data-ad-client="ca-pub-自分のアドセンスID" data-ad-slot="広告ID"></ins></center>', 'googleads');
</script>
<style>.my_adslot{width:320px;height:100px;}</style>

アドセンス広告挿入画面

上記のコードを設置したことで、アドセンスを表示することが出来ました。上から2つ目の所に挿入されます。
・トップページの記事一覧
・カテゴリーの記事一覧

f:id:makio1186:20160130105744p:image

 

中編からの試行錯誤と表示できなかった原因

表示できるまで、色々と試行錯誤することになりましたが、副産物として勉強になったこともありました。ちょっと失敗してからの過程を振り返ります。

①中編ですなばいじりさんのコードをそのまま利用してアドセンス表示できず(他人のせいにするな!!)

アドセンスを動的に生成し、archive-categoryに挿入できないか考え始める

②アドセンスをDOMオブジェクト生成(Javascriptで動的に生成)して、挿入することを調べて考える。勉強が足らず、表示するコードが分からずググりまくる旅にでる。

副産物として、記事中のアドセンスは多くの方のように「はてなブログで「文中にアドセンス広告を入れる」を自動化する方法」を利用していたが、1回記事下or上に表示してから、移動されるのに不満があり、こちらの改善をする。結果として、DOMオブジェクトを使い、記事中のアドセンスを表示できた!

Adsense を Javascript で動的に作成し、ブログの好きな場所に挿入する
記事中のアドセンス挿入でアクティブビュー視認可能率が低下する?(続) (id:akanesky)さん 

③DOMオブジェクト生成したアドセンスコードを、「archive-category」に表示できないか?と、すなばいじりさんや、池田仮名 (id:bulldra)さんの記事からgithubに行き、コードを眺めてみる。

はてなブログのアーカイブページやプロフィールページにアドセンス広告を表示させるプラグイン
はてなブログのカテゴリーや記事一覧にアドセンスなどを表示させるやつ

もう1度すなばいじりさんのコードに立ち返り分析した

中編の記事で出力されなかったコードをもう1度見直すと、改善点が見つかったのでもう1度やってみる。すると、、、、できるではないか!!

劇的before→after

before

間違え①:アドセンス出力コードがない
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
間違え②:アドセンスコードから<ink></ink>をそのまま抜き出しているため、styleがある
間違え③:PC表示しないのに、@media以下がstyleにかいてある。

<!-- カテゴリー一覧にアドセンス -->
<script src="//niyari.github.io/hatenablog-modules/push-content.js" charset="utf-8"></script>
<script>
Htnpsne.PushHTML.init('<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-自分ID"
data-ad-slot="各アドセンスのID"></ins>', 'googleads');
</script>
<style>.my_adslot{width:320px;height:100px;}@media (min-width:500px){.my_adslot{width:468px;height:60px;}}@media (min-width: 800px){.my_adslot{width:550px;height:90px;}}</style>

after

<script src="//niyari.github.io/hatenablog-modules/push-content.js" charset="utf-8"></script>
<script>
Htnpsne.PushHTML.init('<center><ins class="adsbygoogle my_adslot" style="display:inline-block" data-ad-client="ca-pub-自分のアドセンスID" data-ad-slot="広告ID"></ins></center>', 'googleads');
</script>
<style>.my_adslot{width:320px;height:100px;}</style>

【課題】記事一覧で記事列の挿入部位を指定する方法が不明

今回は、結局すなばいじりさんのコードをgitから利用しているため、「記事一覧の2番目」にアドセンスを挿入するしか無かった。

しかし、自分のブログにはタイトル下にアドセンスがあるため、4とか5番目くらいに挿入できると都合が良い。

記事中でも「3つ目のh3の前」などと指定ができるので、これを記事一覧でもできないか考えて改善していきたい。最終的には他人のgithubコードを利用せずに、DOMオブジェクト生成して、自分で場所を決めて出力したいな。

とにかく、色んな方の記事やコードに出会いお世話になりました。ありがとうございます。

【追記】Wordpressでは多く行われてるカスタマイズのようです。
WordPressのループで記事と記事の間に広告を入れて、表示位置を毎回ランダムにする 
【STINGER】記事一覧にかっこよくアドセンスを挿入するWordPressカスタマイズ方法
【STINGER6】トップページの記事一覧にアドセンスを表示する方法
【Stinger5】収益増加!トップページ記事一覧にアドセンスをのせるカスタマイズ
AFFINGER(Ver.20151021)でトップの記事一覧に広告を入れる方法

WordpressでQ&Aサイトが簡単に作れるテーマ「QAEngine、AskBug、AskMe」

WordpressでQ&Aサイトを作ろうと考えると、DW Question & Answerが良く紹介されていますが、意外と知られてない海外制のテーマがあるのでメモします。

 

プラグイン「AnsPress」のテーマ版「AskBug」

無料でQ&Aサイトが作れるAnsPressというプラグインが、少しだけ日本語の記事になっていますが、同じ会社がテーマとしても有料で販売しています。1部分をQ&Aにするのではなく、Q&Aサイトを作りたい!という場合はこちらの方が良さそう。

AnsPress | FREE WordPress question and answer plugin

https://anspress.io/downloads/askbug/

Question and Answer WordPress Theme「QA Engine」

こちらもQ&Aサイトがそのままテーマになっています。有料テーマのため、購入して弄ってみないと分かりませんが、海外では評価も良いようです。

Ask Me - Responsive Questions & Answers WordPress

【参照】
10 Best Question and Answer WordPress Themes & Plugins | DesignMaz

はてなブログでトップページやカテゴリー一覧に特定のHTMLを挿入する

前回、はてなブログで記事一覧やカテゴリー記事にアドセンスを導入するメモという記事の中で、「カテゴリー一覧にアドセンスを挿入したい」という想いで、とりあえずググって、記事を拝見しコピペして動作するか確認、失敗する。という所までいった。

今回は、どこに原因があってアドセンスが表示されなかったのか?段階を踏んで検証することで解決の糸口を探したい。そんなメモ。
プログラミングは初心者であり、あくまで素人の仮説を積み重ねるしかないので、参考になるかどうかはわかりません。

前回で記事一覧にHTML挿入するコードはいくつかありそうだったが、1番カスタマイズしやすそうな、すなばいじりさんのコードを元にやってみる。

アドセンスが表示されない原因は?

【すなばいじりさんのコードアドセンスが表示されない】

・アドセンスが表示されない考えられる原因は?
→Javascriptが正常に動いていない
→表示するHTMLが間違っていて、アドセンスコード側に問題がある

検証すること。
・Javascriptが動いているか確認する
・特定のHTMLが表示されることを確認する

→すなばいじりさんも現在使ってるコードを利用して、まずHTMLを表示してみる。
 はてなproのため、フッターに挿入。
 スマホとPCは別々にしているため、スマホのフッターです。
 本番表示はせずに、デザインの段階でプレビューを確認。

f:id:makio1186:20160127203018p:image

うん。表示はされるようだ。

ということは、すなばいじりさんのコードそのままで、javascriptは正常に動作しているはず。HTMLも出力される。

HTMLを弄って、自分の表示したい記事を挿入してみると、下記のように表示される。特定のHTMLは挿入できることが検証できた。

f:id:makio1186:20160127203219p:image

再度アドセンスでやってみた結果

次に、もう1度アドセンスで表示を挑戦してみる。

320×100のサイズのアドセンスを、記事一覧の中に挿入したい。そこで下記のコードをすなばしりさんの記事を参考に「デザイン>フッター」に挿入する。

<!-- カテゴリー一覧にアドセンス -->
<script src="//niyari.github.io/hatenablog-modules/push-content.js" charset="utf-8"></script>
<script>
Htnpsne.PushHTML.init('<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-自分ID"
data-ad-slot="各アドセンスのID"></ins>', 'googleads');
</script>
<style>.my_adslot{width:320px;height:100px;}@media (min-width:500px){.my_adslot{width:468px;height:60px;}}@media (min-width: 800px){.my_adslot{width:550px;height:90px;}}</style>

 

 

f:id:makio1186:20160127203427p:image

 アドセンスの所に問題がある?

結果は上記の画像のように、HTMLは挿入されなかった。アドセンスも新規広告のまま、アクティブにならず、配信環境が整っていないようだ。

CSSの部分での指定は、「@media」以降がPCでそれ以外がスマホなので、サイズの指定も間違っていないはず。

結果としては、下記のアドセンスのコードに何かしらの問題かあることが、また仮説として浮かび上がった。まだ表示までの道のりは長そうだ。

<script>
Htnpsne.PushHTML.init('<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-自分ID"
data-ad-slot="各アドセンスのID"></ins>', 'googleads');
</script>

 【追記】

やっと出来た、完結編!