初めてのモバイルアプリ開発 ～仕様説明編～

# シリーズ目次
- 仕様説明編
- [インストール他 準備編](https://qiita.com/sasaco/items/57e06bde2d0ffe3440c0)
- [アプリを作ってみよう編]()


# 仕様説明

今回は、下の本を参考に 技術士試験問題のクイズアプリ を 作成してみようと思います。

[Ionicで作る モバイルアプリ制作入門](https://www.amazon.co.jp/Ionic%E3%81%A7%E4%BD%9C%E3%82%8B-%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%82%A2%E3%83%97%E3%83%AA%E5%88%B6%E4%BD%9C%E5%85%A5%E9%96%80%E3%80%88Web-iPhone-Android%E5%AF%BE%E5%BF%9C%E3%80%89-%E6%A6%8A%E5%8E%9F/dp/4863542364)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142847/d39ab311-c535-b4c8-e258-c1479be1f0a4.png)


# クイズを集める

## 問題文をスクレイピングする

問題分は ここから拝借します。
[技術士試験ナビ](https://pe.hpeo.jp/)

```python:jupyter
from selenium import webdriver
from selenium.common.exceptions import NoSuchElementException
from selenium.common.exceptions import TimeoutException
```

```python:jupyter
browser = webdriver.Chrome('chromedriver.exe')
browser.set_page_load_timeout(30)
```

```python:jupyter
def getQuestion(entry_content):
    entry_list = entry_content.find_elements_by_tag_name("p")
    question = ""
    anser = ""
    choice = []
    image = []
    for p in entry_list:
        img = p.find_elements_by_tag_name("img")
        span = p.find_elements_by_tag_name("span")
        name = p.get_attribute('class')

        if len(img) > 0:
            # 画像
            for i in img:
                src = i.get_attribute('src')
                image.append(src)
        elif len(span) > 0:
            anser = span[0].text # 答え
        else:
            if name == "":
                if question == "":
                    question = p.text
            else:
                choice.append(p.text)
                
    return question, anser, choice, image
```

```python:jupyter
question_csv = []
anser_csv = []
choice_csv = []
image_csv = []

base_url = 'https://pe.hpeo.jp/entry/pe/1k/{}'

for i in range (2111, 2144):
    url = base_url.format(i)
    browser.get(url)
    entry_content = browser.find_element_by_class_name("entry-content")
    h1 = entry_content.find_elements_by_tag_name("h1")
    if len(h1) > 0:
        continue
    question, anser, choice, image = getQuestion(entry_content)

    question_csv.append([i,question])
    anser_csv.append([i,anser])
    choice.insert(0, i)
    choice_csv.append(choice)
    image.insert(0, i)
    image_csv.append(image)
```

```python:jupyter
# ファイルに書き込む
import csv

with open('question.csv', 'w') as f:
    writer = csv.writer(f, lineterminator='\n')
    for row in question_csv:
        writer.writerow(row)
        
with open('anser.csv', 'w') as f:
    writer = csv.writer(f, lineterminator='\n')
    for row in anser_csv:
        writer.writerow(row)
        
with open('choice.csv', 'w') as f:
    writer = csv.writer(f, lineterminator='\n')
    for row in choice_csv:
        writer.writerow(row)
        
with open('image.csv', 'w') as f:
    writer = csv.writer(f, lineterminator='\n')
    for row in image_csv:
        writer.writerow(row)
```

取得した
問題、答え、挿図, 選択肢 を整形して ４つのcsv ファイルを作成しました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142847/b3bd862e-e864-25c6-23d6-57f6068162cd.png)


# 次回

[インストール他 準備編](https://qiita.com/sasaco/items/57e06bde2d0ffe3440c0)