個人開発者をもっと知りたい。YouDevをリリースしました。

2020-05-14T10:35:03+09:00

YouDevをリリースしました。 2020.5.01

YouDevは個人開発者にスポットを当てて、個人開発者をもっと知ってもらう(僕自身が知りたい。。)サービスです。

サービスは認知されていても開発者にはスポットが当たってないなと思い、個人開発者は自分がリリースしたサービスをサービスだけでなく開発者自身をもっとアピールしてもいいんじゃないかな？と思い作成しました。

常に個人開発者を募集してるので、自分は個人開発者だ！って思う人は登録お願いします！

なお、改善点もできる、できないに関わらず受け付けております！

僕のスペック

・へっぽこエンジニア
・開発歴：３年
・個人開発歴:半年(2020.01に今年は個人開発をやる！と決めた。)
・開発言語：python(半年)
・デザインセンス：皆無 (フレームワーク使わずにデザインは、まじ無理。 )
・昨今の新技術のスピードにはついていけてない。
・pythonって熱いんじゃね！？ってただ思ってるにわか。
・個人開発始めた時にQitaに投稿してこう！と思ったが、なんか雰囲気が違った。(へっぽこエンジニアの出る幕なさそう。。)
・QitaってMarkDownでしか書けないの！？なにそれ無理！

YouDevの目指すもの

とにかく個人開発者ってのを知りたくなった。

個人開発者ってどんな人がいてどんな活動してるんだろう？って思った時に役立つようなサービス

個人開発者にとって有益な認知拡大の活動の場を目指す。

本番環境

こんな感じ。

DBはPostgresSQLをあまり利用したことがなかったのでMySQLを利用。
本当はAWSのRDSを利用したかったが、収益化してるサービスでも無いのでEC2の中に大人しくインストールしました。
でも、やっぱりRDS使ってみたい。。

S3もできれば利用を避けたかったが、ユーザが登録する画像データもあるので、S3を使うことにしました。
そもそもEC2のストレージ容量が8GBしか無いのでここもでも大人しくS3にしました。

ただ、サービス内で共通して利用する画像データやCSS,スクリプト系はEC2側にstaticフォルダを新規で作成してそこから配信してます。(最悪、壊れても良いファイルなので。)

ソースコードはprivateのgithubで管理してます。

DjangoでAmazon S3を使う

僕は本番環境稼働直後はmediaファイルをEC2のstaticと同じディレクトリで運用していたのでまずはそれらをS3へ移行しなくてはならない。。

S3バケットの作成

まじはS3のバケット作成をする。

ここは基本的につまずきポイントは無かったです。

1.バケットの作成
2.IAMユーザの追加(ここでアクセスキーはコピーしといたほうがいいかも。)
3.グループの作成(ポリシーはAmazonS3FullAccessを適用)
4.2で作成したユーザを3で作成したグループに追加
5.バケットのユーザに2で作成したユーザを追加

S3への移行

まずは以下で認証の確認

$ aws configure list

      Name                    Value             Type    Location
      ----                    -----             ----    --------
   profile                             None    None
access_key                             None    None
secret_key                             None    None
    region                             None    None

設定がされてないと、S3に接続できないので、先ほど作成したユーザのアクセスキーとシークレットキーを設定する

$ aws configure

AWS Access Key ID [None]: <アクセスキー>
AWS Secret Access Key [None]:<シークレットキー>
Default region name [None]: <なにも入力してない>
Default output format [None]:<なにも入力してない>

これでS3に接続できるようになるのでいざ、アップロード！


$ cd /usr/share/nginx/html/media/ #ここは移行したいファイルがあるディレクトリ

$ aws s3 cp --recursive uploads s3://<バケット名>/<フォルダ名>

これでいけました！

ちなみに
・--recursive をつけるとディレクトリが対象になります。
・cp ではなくsyncを使用した場合はコピーではなく同期になります。

Django側の設定

Django側でmediaファイルのアップロード、参照先をS3に向くように変更して上げなければいけない。

DjangoでS3を利用するには以下のモジュールが必要なのでインストール

```python:インストール
$ pip install django-storages
$ pip install boto3


settingに以下を追加する

```python:settings.py

INSTALLED_APPS = [
    ...
    'storages', #追加
]

...

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'social_django.context_processors.backends',
                'social_django.context_processors.login_redirect',

                'django.template.context_processors.media', #追加
                #これを追加してあげることでtemplateから{{MEDIA_URL}}でS3を参照できるようになります。
            ],
        },
    },
]

...

# MEDIA_URL = '/media/'
AWS_ACCESS_KEY_ID = '<アクセスキー>'
AWS_SECRET_ACCESS_KEY = '<シークレットキー>'
AWS_STORAGE_BUCKET_NAME = '<バケット名>'

AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME
AWS_LOCATION = 'media'
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
MEDIA_URL = "https://%s/%s/" % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION)

これだけでS3へのアップロードおよびS3の参照ができるようになります。

使用したライブラリ系

Djangoで作成したサービスにソーシャル系サービス(twitter,google,facebook等)でログインできるようにするライブラリです。

twitterアカウントでの認証設定

```python:インストール
$ pip install social-auth-app-django


```python:settings.py
INSTALLED_APPS = [
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'social_django', #ここを追加
]
...

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'social_django.context_processors.backends',#ここを追加
                'social_django.context_processors.login_redirect',#ここを追加
            ],
        },
    },
]

...

SOCIAL_AUTH_URL_NAMESPACE = 'social' 

#AUTHENTICATION_BACKENDSを追加
AUTHENTICATION_BACKENDS = [
    'social_core.backends.twitter.TwitterOAuth',
    'django.contrib.auth.backends.ModelBackend',
]

#以下は本番環境では環境変数に設定すること！
SOCIAL_AUTH_TWITTER_KEY = 'xxxxxxxx' # Consumer Key (API Key)
SOCIAL_AUTH_TWITTER_SECRET = 'xxxxxxxxx'# Consumer Secret (API Secret)
SOCIAL_AUTH_LOGIN_REDIRECT_URL = '' # ログイン時のリダイレクトURL
LOGOUT_REDIRECT_URL = '' #ログアウト時のリダイレクトURL

```python:project/urls.py
urlpatterns = [
...
path('', include('social_django.urls')), #追加#
#↑を追加することでアプリ側から以下URLにアクセスすることで各処理が可能になります。
#ログイン:/login/twitter
#ログアウト:/disconnect/twitter/
#complete:/complete/twitter/
...
]

/complete/twitter/はtwitterAPIのCallbackのURLになります。
例)
![スクリーンショット 2020-05-12 22.04.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634341/9372ed3a-53ce-966f-9242-fad1e712c676.png)

あとはmigrateすることで利用ができるようになります

```python:migrate
$ python manage.py makemigrations social_django
$ python manage.py migrate

requests-oauthlib

これはTwitterAPI利用の際のOAuthを数コードで実装できるようになるライブラリです。

```python:インストール
$ pip install requests requests_oauthlib



```python:settings.py

TWITTER_ACCESS_TOKEN = 'XXXXXX' #追加
TWITTER_ACCESS_TOKEN_SECRET='XXXXX' #追加

ここでは例として、ユーザ情報を取得する方法を記載します。

上記をsettings.pyの任意の場所に記入します。

```python:views.py

CK = settings.SOCIAL_AUTH_TWITTER_KEY
CS = settings.SOCIAL_AUTH_TWITTER_SECRET
AT = settings.TWITTER_ACCESS_TOKEN
ATS = settings.TWITTER_ACCESS_TOKEN_SECRET

def getAccount(request,screen_name):
url = "https://api.twitter.com/1.1/users/show.json" #エンドポイントは公式のドキュメント参照
params = {
'screen_name':screen_name
}
req = twitter.get(url, params = params)

if req.status_code == 200:
    res = json.loads(req.text)

else:
    res=""
    print("Failed: %d" % req.status_code)

return res


###MaterializeCSS(デザイン)

[公式ドキュメント](https://materializecss.com/)

冒頭で述べたとおり、ライブラリ使わなきゃCSSなんてやってられないです。。。
scssもインストールできるので気に入らなければメインカラー等は一括で変更できます。

**※注意:セレクトボックスは不具合があり、セレクトの選択欄が下のセレクトボックスに重なる場合
正しく選択できない不具合がありました。**

絶望していましたが、以下のgithubに改修コードが上がっていたのでこれを利用すれば解消します！

[改修版git hub](https://github.com/Dogfalo/materialize/issues/6444)


###cropper.js

画像をトリミングしてくれるライブラリです。
もちろん、僕が自前でトリミングの処理を実装できるわけもないので利用しました。

何回、ドキュメント読んでも実装方法が謎でしたが、数十回目を通してようやく理解できたのが以下のサイトです。

[へっぽこでも数十回目を通せばわかるはず！](https://simpleisbetterthancomplex.com/tutorial/2017/03/02/how-to-crop-images-in-a-django-application.html)

だいたい以上が使用したライブラリです。

#つまずいた

###mysqlのバージョン
 Django3.0からはmysqlへ接続するドライバはmysqlclient推奨と公式ドキュメントに書いてあるもんだから、大人しくインストールしてみたがエラー。。

```python:
$ pip install mysqlclient

> ~
 check the manual that corresponds to your MySQL server version for the right syntax to use near 'rsion' at line 1
 ~

謎のエラー

原因：mysqlのバージョンが古いことに起因してるみたい

開発環境はAWSのCloud9を利用しているんですが、cloud9だと初期状態でmysqlがインストールされている。

が、バージョンが5.5でmysqlclientは5.7からしか使えないみたいだったので、5.5を削除して5.7をインストールしました。

 sudo yum remove mysql* #mysqlの削除
 #(慎重な方はsudo yum -y remove mysql-config mysql55-server mysql55-libs mysql55)

 sudo yum -y install mysql57-server mysql57
 sudo yum -y install mysql-devel

絵文字をmysqlへ登録

もともとcharsetをutf-8にしていたので絵文字が登録できなかった。

設定ファイルの変更

```/etc/my.cnf
[mysqld]
character-set-server=utf8mb4

[client]
default-character-set=utf8mb4


mysqlの再起動

```/etc/my.cnf
sudo service mysqld restart

すでにテーブルがutf-8で作成済みだったので変更

ALTER TABLE targettable CONVERT TO CHARACTER SET utf8mb4;

Djangoの場合、Django側にも設定が必要

python:settings.py DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'xxx', 'USER': 'xxx', 'PASSWORD': 'xxx', 'HOST': '', 'PORT': '', #OPTIONSを追加 'OPTIONS': { 'charset': 'utf8mb4', }, } }

これで絵文字の出力、登録ができるようになりました！

さいごに　！

今後も色々、頑張って機能追加して行きますので是非とも登録お願いします！Youdev

ふーど。@個人開発の投稿 - Crieit

個人開発者をもっと知りたい。YouDevをリリースしました。