制作に関わる人は必ず管理しなければいけないスケジュール。

人によって得手不得手あるかと思います。

さらにデザイナーも生業としているため、使い勝手の他に見た目も多少拘りたい、、と思って国内、さらに海外と多種多様なツールを触ってきてようやく今の形に落ち着いたのでご紹介致します。

プロジェクト管理ツール

規模にもよりますがプロジェクトとして始動する場合、制作だけでも多くのやり取りや動きが発生しチャットやメールだけでは大切な情報が埋もれてしまいます。

そのためプロジェクトを細分化し、進捗管理を行うことで納品漏れやスケジュール超過等のリスクを抑えることができます。

backlog

backlogはプロジェクト管理で定番のツールで、企業の規模に関わらず利用されています。

また、無料の範囲内でも十分に機能として使用でき、下記のように使い分けすることが可能です。

タスク管理ツール

プロジェクトと個人的なタスクは分けた方が良いと考えています。

下記のようにプロジェクト管理では進捗や結果の報告、タスク管理ではプロジェクトで発生したタスクをさらに細分化し何がいつまでに必要か一目でわかるように整理します。

リマインダー（Mac純正アプリ）

Appleデバイス利用者しか使用できませんが、比較的操作しやすくMacやiPhoneで連携や編集も可能です。

また、純正アプリのため比較的軽く、常時表示させても動作に支障はあまりない印象です。

ブラウザ（アプリ、 SAAS）管理ツール

「ブラウザ管理ツール？」と思う方も居るかと思いますが、プロジェクト管理で挙げたbacklogの複数アカウント管理の他、多くの企業とやり取りする際に利用ツールが被ることがあります。

例えば

この場合、その都度ログアウトする必要があり毎回のログインも手間になってしまいます。

「ブラウザ管理ツール」を用いることでその煩わしさを解決することが可能となります。

Biscuit

Biscuitはブラウザ上で利用が可能なアプリ（SAAS）を管理することができます。

Googleドライブやbacklogなど種類も豊富に用意されていますがURLベースでの登録も可能なためWEB上で利用可能なツールであれば特に制限はありません。

上記画面のように仕事、個人で分けることも可能ですしプロジェクト単位で分けることも可能です。

チャットツール

チャットツールは企業やジャンル毎に利用しているツールが違うため、企業に合わせて利用することをお勧めしますが個人的には長く使ってきたchatworkをお勧めします。

chatwork

chatworkは中小企業でも比較的に利用者数が多く、関係者同士でチャットグループをサクッと作れるのも重宝できます。

Slackを利用する企業も多いですが、私の周りでは比較的chatworkが多い印象です。

フリーランス等の個人単位でも契約可能ですし、企業として複数名を契約／管理することも可能です。

ここ最近無料プランが「直近40日＆5,000件のメッセージのみ閲覧できる」という制限が加わってしまったため、可能であれば有料プランで利用することをお勧めします。

ファイル管理ツール

制作となると膨大なファイルを管理し、時にはクライアントや協力会社にファイルを共有することも必要となります。

DropboxやBox、Googleドライブなどのオンラインストレージもありますが動画を扱うと10TB、30TBと容量も増えコストもバカにならないため、下記オープンソースを活用してオンラインストレージを構築しました。

nextcloud

nextcloudはPCを媒体にオンラインストレージとして構築/利用が可能となります。

もちろん専用のファイル共有リンクも作成でき、専用のアカウントを作成することも可能です。

また、デスクトップアプリ、iPhoneやAndroidアプリも用意されているためDropboxのように気軽に扱うことも可能です。

媒体となるPCに外付けHDDを増設するができるため、容量をどこまでも増やすことも可能となります。

ただし、回線の一部を解放したりコマンド入力やセキュリティ管理も必要となるためサーバー開発の知識も必要にはなりますが、勉強にはちょうどいいレベルではないかと思います。

現在Box等で容量無制限となるプランもありますので、そちらを利用するのも一つの手です。

まとめ

今回ご紹介した各ツールも使い慣れるまで大変だと思いますが、最終的なゴールは制作を滞り無く進行し納品まで完了させること。

それさえ出来ればExcelでも問題ないと思っています。

ただ、オンライン上で多くの人と関わり合えるツールがあると細かい進捗も確認でき、最終的に自分が楽をできる状況（無茶なスケジュールに追い込まれないようにするため）に作り上げることもできるため、ぜひ一度はお試しいただければと思います。

ブロック要素、インライン要素について

原則としてdivやpなどの各要素に対して自動的に装飾（css）が施されるため、それを活用したりリセットをかけたりしてHTMLコードを書いていきます。

「ブロック」「インライン」はそれぞれ下記のcssが設定されています。

ブロック：display:block;

インライン：display:inline;

それぞれで使う場面が変わってきますので解説していきます。

ブロック要素

ブロック：display:block;

「ブロック要素」は使用するだけで横幅いっぱい（行全体）の領域を使用するため、下記画像の背景色が横に広がりそれぞれで次の段に表示されていることがわかります。

※上記画像はわかりやすいように背景色を足しています

インライン要素

インライン：display:inline;

ブロック要素とは違い、インライン要素は個々の表示領域しか横幅を取りません。

そのため、下記画像のようにインライン要素同士を並べると全て横に並んでしまいます。

※上記は「a」「button」「img」「select」「span」をそれぞれ表示しています

それぞれの使い方

基本的にブロック要素でグループ化且つデザイン的な整形を施し、インライン要素で対象を表示させたり一部を改変するといった使い方がデフォルトと考えていれば概ね間違いはありません。

さらにSEOが絡んでくると使い方もまた変わってきますので、使い方を理解した後はタグの意味も覚えると良いかと思います。

みなさんはコーディングする際にどのような方法、イメージで設計を行いますか？

自分が組みやすいように設計する人や会社のルールに沿って制作をする人、スピード重視で勢いで進めなければならない人、、さまざまな要因が絡み合い、現状の方法に行きついたのかと思います。

Googleが「サイトはこうあるべき」と謳う内容に沿ったコーディングを心がける

ここからはSEOとの絡みとなりますが、WEBサイトはアップすれば自然と表示されて検索順位も上昇するという訳ではなく、いくつかの事柄が絡み合うことで検索順位等も変わってきます。

基本的にWEBサイトはGoogleのサーバー内にある情報を表示させています。

そのため、検索結果をより良いものとするためには下記のようにGoogleから高い評価を得る必要があります。

• Googleが推奨する方法で設計
• ユーザーにとって有益なコンテンツを作る
• ユーザーにとって操作しやすい（わかりやすい）サイト構成とする

Googleが推奨する設計方法

コーディングで使用するタグには作文や小説のようにそれぞれ役割があります。

これらのタグは実際にユーザーが画面上で見ることは基本的にありません。

Googleがサイトをクロール（巡回）した際に「ここは見出し」「ここは引用」「ここが本文」と飽くまでもGoogleのロボットが読み取りやすくするためのルール付けとなります。

このルールに沿った土台をあらかじめ整えておくことで、クロールスピードや優先度等が向上しやすくなりますので、もしルールが定まっていないままコーディングを設計している場合は、作文や小説のように各タグの意味を理解した上で設計することをおすすめします。

TwitterがAPI無料化を廃止すると発表がありましたね。

ここ最近のTwitterは動きが激しく、稼働中のプロジェクトに影響が出てしまんじゃないかと頻繁に情報を調べている次第です。

TwitterAPIが無料だったことでこれまで無料で利用出来ていたツールも続々と廃止を発表。

自動投稿が無料で可能だったtwittbotも今後どうなるか、、という状況だったので「Pythonを使ってブラウザそのものを指定した時間に起動し、投稿フローまで行えればAPIの制約も回避しつつ投稿できるのではないか」と思い検証してみました。

実際のPythonコード

下記はMac Monterey（12.6）で実行した際のコードです。

# ライブラリ
import os
from selenium import webdriver
import schedule
import time
# tweetstart開始
def tweetstart(): # アカウント情報 Inputs = ["ログインID", "パスワード"] # Tweet内容を入力 textInputs = ["テスト投稿です！"] # chromedriverのパス情報 path = os.getcwd() Exefile= path + "/chromedriver" # Chromeを起動 driver = webdriver.Chrome(executable_path=Exefile) # ブラウザを操作してTwitterにアクセス driver.get("https://twitter.com/i/flow/login") time.sleep(2) # ユーザー名入力 driver.find_element_by_name("text").send_keys(Inputs[0]) # 次へボタンクリック driver.find_element_by_xpath('//*[@id="layers"]/div/div/div/div/div/div/div[2]/div[2]/div/div/div[2]/div[2]/div/div/div/div[6]').click() time.sleep(2) # パスワード入力 driver.find_element_by_name("password").send_keys(Inputs[1]) # ログインボタンクリック driver.find_element_by_xpath('//*[@data-testid="LoginForm_Login_Button"]').click() time.sleep(2) # ツイート内容を入力 element_text = driver.find_element_by_class_name("notranslate") element_text.click() element_text.send_keys(textInputs) # ツイートボタン tweet_button = driver.find_element_by_xpath('//*[@data-testid="tweetButtonInline"]') driver.execute_script("arguments[0].click();", tweet_button) # ツイート後、ブラウザを閉じる print("successful")
# 毎日12:00に起動
schedule.every().day.at("12:00").do(tweetstart)
# 20秒毎に起動
# schedule.every(20).seconds.do(tweetstart)
#1時間毎に起動
# schedule.every(1).hours.do(tweetstart)
# 毎秒チェックが入るので60秒間のスリープを実行
while True: schedule.run_pending() time.sleep(60)
# プログラムスタート
if __name__ == '__tweetstart__': tweetstart()

Pythonコードの解説

ライブラリのインストール

上記コードを解説していきます。

#フォルダパスを設定するために使用
import os
#ウェブブラウザとしてChromeを操作するために使用
from selenium import webdriver
#定期的に実行させるために使用
import schedule
#プログラムを停止させるために使用
import time

実行するために下記をinstallします。

python -m pip install selenium==4.2.0

python -m pip install schedule

※seleniumはバージョン4.3をinstallすると若干記述の仕様が変わってしまうため、4.2を使用してください

プログラムの開始

def tweetstart():

tweetstartで関数を呼び出します。

ログイン情報を呼び出し

 # アカウント情報 Inputs = ["ログインID", "パスワード"]

Twitterへログインする際に入力する情報をそれぞれ設定します。

Tweet内容を入力

 # Tweet内容を入力 textInputs = ["テスト投稿です！"]

Tweetする内容を適宜入力します。

chromedriverのパス情報

 # chromedriverのパス情報 path = os.getcwd() Exefile= path + "/chromedriver"

chromedriverを呼び出すためのパス情報を記述します。上記はtwitter_auto.pyと同階層に「chromedriver」を設置している場合の設定です。

chromedriverは事前に下記からダウンロードしてください。

https://sites.google.com/a/chromium.org/chromedriver/downloads

chromedriverのバージョンが複数ありますが、現在使用している「Chrome」のバージョンと同じバージョンをダウンロードしてください。

Windowsの方は「chromedriver.exe」をダウンロードし、指定してください。

※「Chrome：110.0.5481.77」であれば「chromedriver：110.0.5481.77」をダウンロード

Chromeを起動

 # Chromeを起動 driver = webdriver.Chrome(executable_path=Exefile)

Chromeを起動します。

executable_pathの中にはExefileの指定先がセットされています。

Twitterへログイン

 # ブラウザを操作してTwitterにアクセス driver.get("https://twitter.com/i/flow/login") time.sleep(2) # ユーザー名入力 driver.find_element_by_name("text").send_keys(Inputs[0]) # 次へボタンクリック driver.find_element_by_xpath('//*[@id="layers"]/div/div/div/div/div/div/div[2]/div[2]/div/div/div[2]/div[2]/div/div/div/div[6]').click() time.sleep(2) # パスワード入力 driver.find_element_by_name("password").send_keys(Inputs[1]) # ログインボタンクリック driver.find_element_by_xpath('//*[@data-testid="LoginForm_Login_Button"]').click() time.sleep(2)

TwitterログインURLをセットします。

URLを開いた後、ブラウザ上でページを読み込む時間として「time.sleep(2)」を設定し、余裕を持たせます。

ユーザー名入力欄を取得するために「name=”text”」を指定し、事前に設定しておいた「ログインID」をInputs[0]で呼び出しています。

「次へ」のボタンをxpathで指定し、「パスワード」とその後の「ログイン」の流れも同様にセットしています。

Tweetする

 # ツイート内容を入力 driver.find_element_by_class_name("notranslate").click() element_text.send_keys(textInputs) # ツイートボタン tweet_button = driver.find_element_by_xpath('//*[@data-testid="tweetButtonInline"]') driver.execute_script("arguments[0].click();", tweet_button) # ツイート後、ブラウザを閉じる print("successful")

実際にTweet内容を投稿します。

入力欄にclass指定されている「notranslate」に対してクリックを行い、「textInputs」の中身を反映します。

その後「ツイートする」ボタンをクリックし、無事投稿が終えたらブラウザを閉じます。

時間を指定

# 毎日12:00に起動
schedule.every().day.at("12:00").do(tweetstart)
# 20秒毎に起動
# schedule.every(20).seconds.do(tweetstart)
#1時間毎に起動
# schedule.every(1).hours.do(tweetstart)

tweetstartを起動する時間を指定します。

今回は毎日12:00に起動されるよう指定していますが秒、時間などそれぞれ指定が可能です。

毎秒毎にチェック処理が入るため少し負荷を軽減

# 毎秒チェックが入るので60秒間のスリープを実行
while True: schedule.run_pending() time.sleep(60)

毎秒毎にチェックが入ってしまうため、60秒のスリープを挟んでいます。こうすることで時間のチェックを60秒毎に処理させることが可能となります。

プログラムスタート

# プログラムスタート
if __name__ == '__tweetstart__': tweetstart()

tweetstartを実行します。

Pythonの呼び出し方法

例えば「twitter_auto.py」としてファイル名を作成した場合下記で実行します。

python twitter_auto.py

今回ご紹介の方法は投稿テキストが1パターンのみとなりますが、json等を用いて「random」を行うことでランダムに投稿テキストを指定することが可能かと思います。

2/14追記

Twitter API無料版廃止までの期間が再度延長したようですね。（今回は期間の発表がありませんが数日とのこと、、）

まだまだ動きが激しいですね。