From 77e3bc00e2ad0caf6c05ec9e76b546b914e0f209 Mon Sep 17 00:00:00 2001 From: kik0220 <4346449+kik0220@users.noreply.github.com> Date: Wed, 8 May 2019 19:32:04 +0900 Subject: [PATCH] feat: add wired.jp custom parser (#409) * feat: add wired.jp custom parser * fix: author test * fix: date_published selector * test: fix dek and contest * test: fix content (without clean dek) --- fixtures/wired.jp/1556585529692.html | 459 +++++++++++++++++++ src/extractors/custom/index.js | 1 + src/extractors/custom/wired.jp/index.js | 40 ++ src/extractors/custom/wired.jp/index.test.js | 118 +++++ 4 files changed, 618 insertions(+) create mode 100644 fixtures/wired.jp/1556585529692.html create mode 100644 src/extractors/custom/wired.jp/index.js create mode 100644 src/extractors/custom/wired.jp/index.test.js diff --git a/fixtures/wired.jp/1556585529692.html b/fixtures/wired.jp/1556585529692.html new file mode 100644 index 000000000..3a40b0b99 --- /dev/null +++ b/fixtures/wired.jp/1556585529692.html @@ -0,0 +1,459 @@ + + + + + +あの有名フォント「Helvetica」は、こうしてデジタル時代に生まれ変わった|WIRED.jp + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+
+ + + +
+ + + +
+
+ + +

あの有名フォント「Helvetica」は、こうしてデジタル時代に生まれ変わった

+

世界で最も多く使われているであろうフォントのひとつ「Helvetica」が、このほどリニューアルを遂げた。まるで水のように生活に浸透しているフォントのデザインは、いかに伝統を守りながら、デジタル時代に合わせて最適化されたのか。

+ +
+ + +

Helvetica_Now

PHOTOGRAPH COURTESY OF MONOTYPE

「Helvetica」は、おそらく世界で最もよく使われているフォントだろう。1957年に誕生したこの書体を紹介する動画は、「Helveticaは水のようだ」というナレーションで始まる。

サンセリフの簡素な字形には「ユビキタス」という形容詞がぴったりで、ニューヨーク市の地下鉄の案内表示や、アメリカン航空、アメリカンアパレルといった企業のロゴに採用されている。このフォントで「John & Paul & Ringo & George.」と書かれた有名なデザインのTシャツもある。

ニューヨーク近代美術館(MoMA)では2007年、Helveticaの誕生50周年を祝う記念展覧会が開かれた。デザイナーのダニー・ヴァン・デン・ダンゲンは当時、『ニューヨーク・タイムズ』のインタヴューに対し、「Helveticaのように完璧につくられたものなら、数百年はもつはずです。優れた建築作品と同じです」と話している。

リニューアルするときがやってきた

ただ、チャールズ・ニックスはこの書体が気に入らなかった。ニックスはフォントヴェンダーのMonotypeでディレクターを務めている。Helveticaのライセンスを保有しているのもMonotypeだが、ニックスは以前から、Helveticaは小さいサイズだと読みづらいし、カーニングもおかしいと感じていた。

グラフィックデザインの世界では、Helveticaを読みやすくするさまざまな工夫が知られている。例えば、カンマ(,)やピリオド(.)だけサイズを大きくするといったことで、ニックスは「こうした状況は冗談で、“Helveticaのストックホルム症候群”と呼ばれています」と話す。

ニックスを含むMonotypeのデザイナーチームは数年前、Helveticaをリニューアルするときがやってきたと考え始めた。無個性で目立たないはずのこのフォントも、あまりにもいたるところで使われたことで、鼻につくようになってきたからだ。

ロゴやブランディングにHelveticaを採用していた企業が、別のフォントでデザインの刷新を図る事例がよくあった。例えば、グーグルは2011年にHelveticaの使用をやめ、独自のフォント「Roboto」を導入した。アップルは2013年にオリジナルのフォントを使い始めたし、IBMやNetfixも同じ動きを見せている。

再び、Helveticaに恋に落ちる

そしてとうとう、アルファベットだけでなく数字や記号、句読点も含め4万字すべてをデザインし直した新作フォント「Helvetica Now」が登場した。Monotypeはこの新しいフォントによって、永遠の定番とされてきたHelveticaが魔法の力を取り戻すことを期待している。

VIDEO COURTESY OF MONOTYPE

Helvetica Nowは、「Apple Watch」の小さな画面から巨大な屋外広告まで、どのような状況でも一定の判読性を確保することを目指してつくられた。改良には2年を要したが、ニックスは新しいフォントによってHelveticaが再評価されるよう願っている。

ニックスはこれについて、自分の最愛の人を新しい角度から眺めるようなものだと表現する。「土曜日の朝、その人の顔には陽の光が美しく降り注いでいます。そして突然、その人をまったく別の方向から見つめ直すようになるのです。再び恋に落ちるのだと言ってもいいでしょう」

デジタル時代になって露呈した弱点

スイスのハース鋳造所が1957年に発売したHelveticaは、当初は「Neue Haas Grotesk」という名前だった。デザインを担当したマックス・ミーディンガーとエドゥアルト・ホフマンは、シンプルですっきりした感じを出すことを最優先して、この書体をつくり上げた。

理想はフォントがまったく主張しないことである。名前がHelveticaに変更されたのは1961年で、それから徐々に世界的に知られるようになった。

Helveticaの人気が高まったことで、サイズやウェイト(活字の太さ)が追加された。ただ、太字や細字を含むフォントファミリーは細部が微妙に異なるなど一貫性に欠けており、欠陥が目立つようになってしまった。

こうした問題を解決するために、ドイツのLinotypeが1982年に「Neue Helvetica」を発表した。これは来るコンピューターの時代に備えた動きでもあり、ニックスは「Neue HelveticaはHelveticaのデジタル化の最初の試みでした」と説明する。「ただもうかなり以前のことで、それからさまざまなことが起きています」

例えば、1982年にはインターネットでの使用といったことは想定されていなかった。Neue Helveticaはオリジナルを単純に拡大縮小することで大小のサイズをつくり出していたため、字の大きさに合わせて字形の微調整を行うといったことはできなかった。コンピューターの画面で見ると、カンマやピリオドのバランスが悪かったし、ポンド(£)のような通貨記号も潰れてしまっていた。

現在という時代に合った芸術作品

Helvetica Nowでは、こうした部分に改良が加えられている。まず、使用環境に合わせて「Micro」「Display」「Text」の3種類が用意された。Microは4〜7ポイントでも読みやすいように線の間の空間を大きくとり、カーニングも広めに設定している。

Displayは逆に、14ポイント以上での使用を想定してバランスが整えられている。Textは幅広く使えるようにデザインされた。視覚的な情報が多い状況で視認性を上げるために、スペースを多めに設けてあるという。

helvetica now

IMAGE COURTESY OF MONOTYPE

また、小文字の「a」などには異体字も採用したり、オリジナルのHelveticaの特徴だった大文字の「R」の直線に近いはらいを復活させるといったことも行なっている。

Helveticaの魅力はこうした細部にあると、ニックスは説明する。MonotypeのチームはHelvetica Nowも同じ力をもつことができるよう努力したという。

「メトロポリタン美術館にイーゼルをもち込んで、レンブラントの絵を模写するようなものですね。素晴らしい画家が過去に描いた作品を丁寧になぞっていくのです。ただ、わたしたちがやろうとしたのはタイプフェイスをつくり上げることです。わたしたちが生きている現在という時代に合った芸術作品を完成させるのです」

Helveticanow_alternates

IMAGE COURTESY OF MONOTYPE

誰もが、あらゆるものに

Helveticaは今後も、ウェブサイトやTシャツで使われ続けるだろう。Helvetica Nowを使うにはライセンスを購入する必要があり、誰もがこぞって新しいフォントを使い始めるとは考えにくい。ただ、フォントの入れ替えはソフトウェアのアップグレードのようなもので、徐々に進んでいくはずだとニックスは話す。

「そのうち、いろいろなところで見かけるようになるでしょう。誰もがあらゆるものに、このフォントを使うのです。どこにでもあるようになりますよ」

RELATED

+ + + +
+

SHARE

+
+ + +
+ +
+ + + +
+ + + + +
+ +
+
+
+ + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/extractors/custom/index.js b/src/extractors/custom/index.js index 23476f90f..fb31366dd 100644 --- a/src/extractors/custom/index.js +++ b/src/extractors/custom/index.js @@ -123,3 +123,4 @@ export * from './www.oreilly.co.jp'; export * from './www.ipa.go.jp'; export * from './weekly.ascii.jp'; export * from './techlog.iij.ad.jp'; +export * from './wired.jp'; diff --git a/src/extractors/custom/wired.jp/index.js b/src/extractors/custom/wired.jp/index.js new file mode 100644 index 000000000..b14cf86ba --- /dev/null +++ b/src/extractors/custom/wired.jp/index.js @@ -0,0 +1,40 @@ +import URL from 'url'; + +export const WiredJpExtractor = { + domain: 'wired.jp', + + title: { + selectors: ['h1.post-title'], + }, + + author: { + selectors: ['p[itemprop="author"]'], + }, + + date_published: { + selectors: [['time', 'datetime']], + }, + + dek: { + selectors: ['.post-intro'], + }, + + lead_image_url: { + selectors: [['meta[name="og:image"]', 'value']], + }, + + content: { + selectors: ['article.article-detail'], + + transforms: { + 'img[data-original]': $node => { + const dataOriginal = $node.attr('data-original'); + const src = $node.attr('src'); + const url = URL.resolve(src, dataOriginal); + $node.attr('src', url); + }, + }, + + clean: ['.post-category', 'time', 'h1.post-title', '.social-area-syncer'], + }, +}; diff --git a/src/extractors/custom/wired.jp/index.test.js b/src/extractors/custom/wired.jp/index.test.js new file mode 100644 index 000000000..c7c7fdf82 --- /dev/null +++ b/src/extractors/custom/wired.jp/index.test.js @@ -0,0 +1,118 @@ +import assert from 'assert'; +import URL from 'url'; +import cheerio from 'cheerio'; + +import Mercury from 'mercury'; +import getExtractor from 'extractors/get-extractor'; +import { excerptContent } from 'utils/text'; + +const fs = require('fs'); + +describe('WiredJpExtractor', () => { + describe('initial test case', () => { + let result; + let url; + beforeAll(() => { + url = 'https://wired.jp/2019/04/25/helvetica-now/'; + const html = fs.readFileSync('./fixtures/wired.jp/1556585529692.html'); + result = Mercury.parse(url, { + html, + fallback: false, + }); + }); + + it('is selected properly', () => { + // This test should be passing by default. + // It sanity checks that the correct parser + // is being selected for URLs from this domain + const extractor = getExtractor(url); + assert.equal(extractor.domain, URL.parse(url).hostname); + }); + + it('returns the title', async () => { + // To pass this test, fill out the title selector + // in ./src/extractors/custom/wired.jp/index.js. + const { title } = await result; + + // Update these values with the expected values from + // the article. + assert.equal( + title, + `あの有名フォント「Helvetica」は、こうしてデジタル時代に生まれ変わった` + ); + }); + + it('returns the author', async () => { + // To pass this test, fill out the author selector + // in ./src/extractors/custom/wired.jp/index.js. + const { author } = await result; + + // Update these values with the expected values from + // the article. + assert.equal( + author, + 'TEXT BY ARIELLE PARDES\nTRANSLATION BY CHIHIRO OKA WIRED(US)' + ); + }); + + it('returns the date_published', async () => { + // To pass this test, fill out the date_published selector + // in ./src/extractors/custom/wired.jp/index.js. + const { date_published } = await result; + + // Update these values with the expected values from + // the article. + assert.equal(date_published, `2019-04-25T16:00:25.000Z`); + }); + + it('returns the dek', async () => { + // To pass this test, fill out the dek selector + // in ./src/extractors/custom/wired.jp/index.js. + const { dek } = await result; + + // Update these values with the expected values from + // the article. + assert.equal( + dek, + '世界で最も多く使われているであろうフォントのひとつ「Helvetica」が、このほどリニューアルを遂げた。まるで水のように生活に浸透しているフォントのデザインは、いかに伝統を守りながら、デジタル時代に合わせて最適化されたのか。' + ); + }); + + it('returns the lead_image_url', async () => { + // To pass this test, fill out the lead_image_url selector + // in ./src/extractors/custom/wired.jp/index.js. + const { lead_image_url } = await result; + + // Update these values with the expected values from + // the article. + assert.equal( + lead_image_url, + `https://wired.jp/wp-content/uploads/2019/04/190315_Helvetica_Now_Device_AS-1024x768.jpg` + ); + }); + + it('returns the content', async () => { + // To pass this test, fill out the content selector + // in ./src/extractors/custom/wired.jp/index.js. + // You may also want to make use of the clean and transform + // options. + const { content } = await result; + + const $ = cheerio.load(content || ''); + + const first13 = excerptContent( + $('*') + .first() + .text(), + 1 + ); + + // Update these values with the expected values from + // the article. + assert.equal( + first13, + '世界で最も多く使われているであろうフォントのひとつ「Helvetica」が、このほどリニューアルを遂げた。まるで水のように生活に浸透しているフォントのデザインは、いかに伝統を守りながら、デジタル時代に合わせて最適化されたのか。' + ); + }); + }); +});