ファイルメーカー（FileMaker）でもWebスクレイピングできた - Twitterのフォロワー数を取得してみる

## 概要
- Twitterのフォロワー数を取得してみたい（Twitter APIは使わない）
- FileMaker標準の機能だけでWebスクレイピングする
- 実験環境 FileMaker Pro 17 Advanced（17.0.7.700）

このような形で、フォロワー数を取得できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475697/54f2b443-d342-b5dc-bcea-6d32a896b32b.png)

## ファイルメーカー（FileMaker）でスクレイピングする方法
それでは、ファイルメーカー（FileMaker）でスクレイピングする方法をご紹介します。
### Webビューアの表示内容からHTMLコードを取得する
まず、スクレイピングしたい対象のページをWebビューアで表示させます。
今回は、好きなTwitterIDを入力したらそのアカウントページが開くようにTwitterIDをフィールド入力させて、それをURLにくっつけています。

Webビューアの設定 => Webサイトの選択 => カスタムWebアドレス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475697/b703c5da-5f8d-09d6-286b-2c8b8c40504e.png)

これでWebビューアにスクレイピング対象のページを表示させることができましたので、次はそのページからHTMLコードを抽出します。
FileMakerには[GetLayoutObjectAttribute](https://fmhelp.filemaker.com/help/16/fmp/ja/index.html#page/FMP_Help/getlayoutobjectattribute.html)関数が用意されており、これを利用できます。

```
GetLayoutObjectAttribute ( オブジェクト名 ; 属性名 { ; 繰り返し回数 ; ポータル行番号 } )
```
属性名には「content」を指定します。オブジェクト名にはWebビューアの名前を指定するのですが...自分はWebビューアオブジェクトに名前をつける方法を知りませんでした。

調べてみると、Webビューアの名前はレイアウトモードで付けることができるようです。

よく使うフィールドタブではなく、そのとなりのオブジェクトタブにて対象のWebビューアの名前を変えることができます。名前は任意のもので良くて、今回は「TwitterPage」と名前を付けました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475697/243fe62e-9a01-ecb8-0da5-ff33611571ff.png)

Webビューアに名前を付けたら、スクリプトにて次のようにGetLayoutObjectAttributeを書きます。

```
GetLayoutObjectAttribute ( "TwitterPage"; "content" )
```

これで、次のようなWebビューアに表示しているページのHTMLコードが返ってきます。

```
<!DOCTYPE HTML>
<!DOCTYPE html PUBLIC "" ""><HTML lang="ja" data-scribe-reduced-action-queue="true"><HEAD><META 
content="IE=11.0000" http-equiv="X-UA-Compatible">
                                 
<META charset="utf-8">       
・・・
```
返ってきた値は変数やフィールドに格納しておきましょう。

## 取得したHTMLコードから該当箇所を抽出する
私は、取得したHTMLコードは変数「$HTMLソースコード」に格納しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475697/dcb0a1ea-574f-2621-cc76-59c15c0b0a7d.png)

そのソースコードから、Middle関数とPosition関数を使用してtitleを抽出してみます。

- [Middle関数](https://fmhelp.filemaker.com/help/16/fmp/ja/index.html#page/FMP_Help/middle.html)  
テキストの先頭文字位置で指定された文字から、文字数で指定された文字数分のテキストを抽出する。  
例：Middle ( "(408) 555-9054" ; 2 ; 3 ) は「408」を返す。
- [Position関数](https://fmhelp.filemaker.com/help/12/fmp/jp/html/func_ref3.33.78.html)  
テキスト内で検索テキストを検索し、指定された回数目の先頭文字位置を返す  
例：Position ( "Mississippi" ; "iss" ; 1 ; 1 ) は、「2」を返す。

これらを組み合わせると、titleは次のように抽出できます。

```
Middle (
$HTMLソースコード;
Position( $HTMLソースコード; "<title>"; 1; 1 ) + 7 ;
Position( $HTMLソースコード; "</title>"; 1; 1 ) - Position( $HTMLソースコード; "<title>"; 1; 1 ) - 7
)
```
- $HTMLソースコードの中から
- ```<title>```の閉じカッコの次の文字が何文字目か計算して
- ```<title>～</title>```の間に何文字あるのか計算

という考え方でtitleタグ内の文字を抽出できます。

## Twitterのフォロワー数を取得してみる
最初に挙げたフォロワー数の取得例では[ピティナのTwitterアカウント](https://twitter.com/ptna_web)のフォロワー数を取得しています。

実際のHTMLコードを覗いてみると、フォロワー数は次のように記載されていました。

```
<LI class="ProfileNav-item ProfileNav-item--followers"><A title=6,271人のフォロワー
```
ここから「6,271」のみ取り出すための記述が次のものになります（WebビューアでTwitterにはログインしていない状態でHTMLコードを取得しました。ログインしている場合は変わるかもしれません）。

```
Middle (
$HTMLソースコード;
Position( $HTMLソースコード;"<LI class=\"ProfileNav-item ProfileNav-item--followers\"><A title=\""; 1; 1 ) + 65 ;
Position( $HTMLソースコード;"人のフォロワー"; 1; 1 ) - Position( $HTMLソースコード;"<LI class=\"ProfileNav-item ProfileNav-item--followers\"><A title=\""; 1; 1 ) - 65
)
```
この抽出結果をフィールドに設定してあげると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475697/3b117448-e4bb-2142-92b4-3247a1c10646.png)

最初に紹介したようにフォロワー数が取得できた状態となります！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475697/54f2b443-d342-b5dc-bcea-6d32a896b32b.png)

## さいごに
Twitterのフォロワー取得については、HTMLの構造変更などの影響を受けないようにTwitter APIを利用した方が良いかと思いますが、今回はファイルメーカー（FileMaker）でもWebスクレイピングできることの紹介例として扱ってみました。

ファイルメーカー（FileMaker）は非エンジニアでもデータを簡単に扱うことができるので、ファイルメーカー（FileMaker）にデータを取り込んであげることで活用の幅が広がるかもしれません。

そのような機会があれば、ぜひファイルメーカー（FileMaker）でスクレイピングを試してみてください！