Hirosaji Tech Blog 🍙

Web開発の蚘事が倚め。絵垫支揎の蚘事も少し。

Pythonず地図ポリゎンで、絵の発想力を鍛える

先日の京郜芞術倧孊KUAの特別授業にお、面癜いワヌクショップを䜓隓したした。
「䞍芏則な圢の"枠"を描いお、その"枠"の䞭を絵で埋める」ずいうワヌクショップです。

5秒で理解できるスゎいスラむド画像はKUA公匏ツむヌトより

"枠"の圢から描くものを連想しお発想力を鍛える、ずいう斬新な内容でした。

短時間で、か぀䜕床でも新鮮な気持ちで取り組める、絶劙な蚭蚈のワヌクです。
そしお今回、このワヌクにさらに手軜に取り組めるよう、䞍芏則な"枠"を自動生成するPythonスクリプトを曞きたした。

この蚘事では、そのスクリプトの抂芁ず䜿甚䟋を玹介したす。

DEMO

Polygon Generator for Drawing | Google Colab

生成する画像䟋

生成する画像のサンプルはGoogle Driveに眮いおたす

なぜ自動生成するか

ワヌクショップを玹介した寺田おら先生は、
「自分で"枠"を甚意し続けるずどうしおも圢にクセが出るため、繰り返しお取り組む堎合は、友人などに甚意しおもらうず良い」
ず、意蚳するずそのようなこずを仰っおいたした。

先生の蚀うように、"枠"䜜りを友人に頌むのも䞀぀の手ですが、"枠"のバリ゚ヌションを求めるず耇数人に頌む必芁がでおきたす。さすがにそれは心理的ハヌドルが高い。
そんなわけで、自動生成できるようにしようず考えたした。

どう䜜ったか

䞍芏則な"枠"の自動生成は、意倖ず前䟋が芋぀かりたせんでした。
なので、いざ䜜るずなるず、现かい条件やルヌルをれロから考える必芁がありたした。

ただ、今回の実装では少し暪着したした。

䟋えば、郜道府県や垂区町村の境界線。
むラストの"枠"に応甚できるず思いたせんか。

チヌバくんずいう偉倧な前䟋あり画像はトラベルWatchより

そんな着想をもずに今回は、地図のポリゎンデヌタを加工しお、簡易的に"枠"を生成するスクリプトを曞きたした。

芁点の解説

甚意したスクリプトには、それほど蟌み入った凊理を含めおいたせん。
詳しくはフルコヌドを掲茉するDEMOをご芧ください。

ざっず芁点だけ説明するず、適圓な地域のポリゎンデヌタをランダムで抜出し、そのポリゎンに次の加工を斜したした。

  • 簡玠化simplify
  • 平滑化smoothing

この぀の凊理によっお鋭角な゚ッゞを枛らし、䜿いやすい"枠"を生成できるようにしたした。
぀の凊理は、GeoPandasを䜿えばそれぞれ行で曞けたす。

# Simplify
simplify_area = sample_area.simplify(tolerance=0.65)

# Smoothing
smooth_area = simplify_area.buffer(1)

匕数の数倀は、デヌタセットに合わせお調敎したしたが、奜みに合わせお再調敎しおも良いず思いたす。
ポリゎンデヌタは䜕を䜿っおも良かったのですが、今回はGeoPandas同梱のデヌタセットを䜿いたした。

参考リンク

実際に䜿っおみる

実際に自分でも、"枠"を生成しおワヌクに取り組んでみたした。

枠を埋めるポヌズを考えるだけでも楜しい

枠を䞀぀の物䜓ずしお捉えるのも面癜い

実際にやっおみるず、すごく楜しいです。
絵垫にずっお真っ癜なキャンバスから描く題材を考えるのは倧倉な工皋ですが、この䞍芏則な"枠”が絶劙な制玄になっお、アむデア出しを促進しおくれるようでした。

"枠"を埋めるためなら䜕を描いおも良く、画力が問われないハヌドルの䜎さも魅力です。
今埌、自分でも息抜きやりォヌミングアップに䜿っおいこうず思いたす。

おわりに絵垫を支揎するコヌドを曞いおたす

今回は、むラストレヌタヌの発想力を鍛えるワヌクショップの課題を自動化したした。
PyCon JPでの発衚を皮切りに、今回のような絵垫を支揎するためのコヌドをたたに曞いおたす。

もし関連するSlackやDiscordなどご存じの方がいたら、Twitterで教えおください🙏

画像ベタ貌りの「党文公開」蚘事はPDFで読もう

読みづらい「党文公開」はもったいない

曞籍の「党文公開」っお良いですよね。
マヌケティング界のスゎい発明だず思いたす。

「党文公開」のおかげで私たちは、曞籍を賌入するたでのハヌドルを超えお、気になっおいた著者や䜜品ぞの興味を深めるこずができるわけです。

ただ、党おの「党文公開」蚘事が、Webの読者に適した圢にマヌクアップされおいるわけではありたせん。
䞀郚の蚘事は、"曞籍の画像"を貌り付ける圢で「党文公開」がされおいたす。

圓然ですが、画像で構成された「党文公開」蚘事が、読者の閲芧端末に合わせお最適化されるこずはありたせん。
たた、これは個人的な意芋ですが、画面をスクロヌルしながら画像の連続を読む、ずいう読曞䜓隓はあたり心地の良いものではないず思いたす。

そこで私は、そんな画像でできた「党文公開」蚘事をPDFにしお、電子曞籍のように読むこずにしたした。

PDF化したこずで、私の読曞ぞのモチベヌションは明らかに䞊がりたした。
読曞においお、読みやすさっお倧前提なんだなず実感させられたした。

今回はそんなTipsを共有すべく、PDFを䜜るたでの䞀連の流れを玹介したす。

画像ベタ貌りの「党文公開」蚘事をPDFにする

PDFを䜜るたでの工皋は、次の通りです。

  1. 蚘事内の画像をすべおDL
  2. 画像をPythonスクリプトで読み蟌み、PDFを䜜成

それぞれ、詳しく解説したす。

1. 蚘事内の画像をすべおDL

たずはPDFの玠材ずなる画像デヌタを収集したす。

䞀぀䞀぀手䜜業でDLするのは面倒なので、今回はImage Downloaderを䜿いたす。
Image Downloaderは、衚瀺するWebペヌゞから画像を䞀括でDLするためのChrome拡匵です。
画像のナンバリングもできお、ずおも䟿利なツヌルです。

今回は䟋ずしお、カゞュアルに人物スケッチを孊べるこずで人気の䞋田スケッチ人物本の「党文公開」蚘事を䜿っお説明したす。
Image Downloaderをむンストヌル埌、察象の蚘事を衚瀺したら、次のように画像をDLしたしょう。

① PDFに含める画像を遞択
「Select all」にチェックマヌクを付けお䞍芁な画像を陀くず楜

② ナンバリングのprefixを入力
この䟋だず、”img01”, “img02” ... ずいう名前で画像がDLされる

ちなみにnoteの蚘事は、画像にLazyloadが蚭定しおあるので、事前に䞀番䞋たでスクロヌルしお党おの画像を読み蟌んでおきたしょう。

DL埌は、䞀぀のフォルダに画像をたずめおおいおください。

2. 画像をPythonスクリプトで読み蟌み、PDFを䜜成

DLした画像から、぀のPDFを䜜りたす。

色々ず方法はありたすが、今回は次のPythonスクリプトを䜿いたす。

from PIL import Image
import os

if __name__ == '__main__':

    # Function to sort by modified dates
    def getfiles(dirpath):
        a = [s for s in os.listdir(dirpath)
             if os.path.isfile(os.path.join(dirpath, s))]
        a.sort(key=lambda s: os.path.getmtime(os.path.join(dirpath, s)))
        return a

    # Declare an empty list 
    img_list = []

    # Request user input for pdf filename and image folder path
    folder = input("Enter the path of images folder : ")
    pdf_filename = folder.split("\\")[-1] + ".pdf"

    files = getfiles(folder) # get the files sorted by modified dates
    files.sort()
    print('Processing....')

    for count, filename in enumerate(files):
        image = Image.open(folder+'/'+filename) #open each file
        image = image.convert('RGB')

        # To change as portrait layout for landscape images
        width, height = image.size 
        if(width>height):
            image = image.transpose(Image.ROTATE_90)
        # Append each processed image in img_list[]    
        img_list.append(image)

    # All images in img_list[] are converted to a pdf
    img_list[0].save(pdf_filename, "PDF", resolution=100.0, save_all=True, append_images=img_list[1:])
    print("Done!")

ざっくりいうず、次のような内容のスクリプトです。

  • input()で、画像をたずめたフォルダのパスを入力埅ち
  • 入力されたパスから、各画像のファむル名を取埗
  • 取埗したファむル名をもずに、Pillowで各画像のレむアりトを統䞀
  • PDFずしお保存

実行䟋は次の通りです。

$ python img2pdf.py
Enter the path of images folder : ./target/䞋田スケッチ人物本
Processing....
Done!

実行するず、画像を保存したフォルダず同じ名前のPDFが生成されたす。

スマホなら瞊長、タブレットだず暪長のレむアりトにするず読みやすいず思いたす。
甚途に合わせお、スクリプトを調敎しおみおください。

おわりに

今回は、画像でできた「党文公開」蚘事をPDFにしお、電子曞籍のように読むたでのプロセスを玹介したした。
これを参考に、みなさんの日垞の読曞がさらに捗るようになれば嬉しいです。

ただ、䜜ったPDFはあくたでも個人の目的で䜿うようにしおください。
画像の再配垃を犁止しおいる蚘事は倚いです。甚途に぀いおは自己責任でお願いしたす。

参考リンク


※この蚘事はWorks Human Intelligence Advent Calendar 2021に投皿したした

SlideShareを䜿うのやめたす

スラむド資料を共有するサヌビスずしお、玄幎ほどSlideShareを䜿っおきたしたが、䜿うのをやめるこずにしたした。
キッカケは盎近でPyConの発衚資料の共有に䜿ったずきに、SlideShareの悪い点を再確認したからです。

今回は過去にも報告されたSlideShareのデメリットに、今回私が䞍満に感じた点を加えお、SlideShareをやめる理由をなるべく網矅的に䞊べたす。

SlideShareをやめる理由

① 再アップロヌド機胜の廃止

この機胜が2017幎に廃止されおしたい、圓時倚くのナヌザが䞍満を明らかにしおいたした。

他のサヌビスに無かった匷力な匷みを、SlideShareはこの時に倱ったのです。私も圓時は盞圓䞍満に思いたしたし、今も思っおたす。
日本ではこの廃止を機に、別のサヌビスに乗り換えた人も倚かったようです。

② Youtube動画の埋め蟌み機胜の廃止

時期は䞍明ですが、Youtube動画をスラむドの途䞭に埋め蟌む機胜も廃止されたした。

䜙談ですが、私がこれに気づいたのは、研究宀の埌茩から来た䞀通のメヌルがキッカケです。
「先茩が残しおくれおたスラむド、閲芧できたせん」

どうにも、Youtube埋め蟌み機胜が廃止された埌も、スラむド䞊のYoutube動画を読み蟌むスニペッドが残っおいたようで、それが悪さしお閲芧自䜓が䞍可胜になっおいたようです。
DevToolsで確認したらSSVideoEmbedSlide is not definedずの゚ラヌが確認できたした

これをScribdにバグ報告芁・Scribdアカりントしたら「ごめん、もうそれ動かないから、動画抜いおアップロヌドし盎しお」ずの旚の返信を頂いたものの、その日埌くらいにはバグが盎されおいたした。めでたしめでたし。

③ 初期ロヌド時のスラむドの質が安定しない

キャッシュの無い状態でスラむド資料のペヌゞを開いたずき、各スラむドの解像床が䜎い状態で衚瀺されるこずがよくありたす。
どれくらい解像床が䜎いかは、党画面衚瀺するずわかりやすいです。


△ 15むンチのMacBook Proで党画面衚瀺した図

「党画面衚瀺にしたのに、党画面衚瀺にならない」ずいう状態になりたす語圙力

DevToolsで確認するず、解像床が䜎い画像党スラむド分をロヌドしたのちに、通垞サむズの画像をロヌドする仕様のようで。
ナヌザの通信環境が悪かったり、スラむド資料の枚数が倚いず、この珟象に盎面するこずがあるようです。

この珟象はナヌザ䜓隓ずしお臎呜的で、解像床が䜎いけど䞀応読めおしたうスラむドが衚瀺されるず、その瞬間にナヌザの期埅床が萜ちお離脱率がグンず䞊がっおしたいたす。
衚瀺䞭のスラむド画像だけでも、優先的にロヌドする仕様になっお欲しいものです。

④ Twitter埋め蟌みの初期サむズが小さい

スラむド資料を配垃するずきによく䜿われるのがTwitterです。
しかし、SlideShareのURLを茉せたTwitter投皿がTLで衚瀺される際の埋め蟌みのサむズは、盞察的に小さいです。

䟋えば、メタ情報で蚭定されおいるカヌドサむズがsummaryであれば小さい方、summary_large_imageであれば倧きい方なのですが、SlideShareで衚瀺されるのは前者のサむズです。

投皿のサむズが小さい分だけ、投皿の存圚感が薄くなるのは明癜です。
カンファレンスなどのハッシュタグ怜玢で、実況や感想が入り乱れる怜玢結果の䞭、投皿のサむズが小さいずナヌザに認知すらされないこずもありたす。この機䌚ロスは、䟋えば登壇資料を宣䌝する登壇者にずっおかなりの痛手です。

ただ、埋め蟌みをクリックするず、むンラむンでそのたたスラむドを閲芧できたす。
この点は、良いナヌザ䜓隓が期埅できたす。TwitterでSlideShareを掻甚すべきかどうかは、賛吊が分かれそうです。

â‘€ ホット゚ントリでサムネが衚瀺されない

せっかくはおブのホット゚ントリに茉っおも、サムネむルが衚瀺されたせん。2021/10/23珟圚

サムネむルがないホット゚ントリは、誘目性に欠けたす。
これはプラットフォヌム偎の問題の可胜性もあるのですが、匷力なナヌザ同線であるホット゚ントリに茉ったのにサムネむルが衚瀺されないず、悲しい気持ちになりたす。

⑥ SlideShareのメリットが他サヌビスで代替できる

SlideShareの再アップロヌド機胜が廃止された際、それでもSlideShareを䜿い続ける理由を敎理しおくださった方がいたした。

tekunabe.hatenablog.jp

抜出するず、SlideShareのメリットは次の点です。

  • 自動リンク機胜がある
  • タむトルを倉曎しおもURLが倉わらない

しかし、この぀の仕様は、珟圚のGoogle Slidesにも共通したす。

他に、海倖や䞀郚業界でのシェアが高いずいったメリットがありそうですが、これもゆくゆくはGoogle Slidesに代替される予感がしたす。

どのサヌビスに乗り換えるか

個人でスラむド資料を䜜るずきはSpeakerDeck、共同で䜜るずきはGoogle Slidesずいう䜿い分けをしようかず思いたす。
すべおGoogle Slidesに統䞀しおも良いかなずも思いたしたが、資料自䜓は䜿い慣れたKeynoteで䜜りたいず思ったためです。

SpeakerDeckには自動リンク機胜が無いですが、スラむドをPDFずしおダりンロヌドしお貰えばリンクは機胜するので、ひずたずはこれら぀のサヌビスを䜿い分けたいず思いたす。

SlideShare、今たでありがずう...🙏

远蚘遞択肢が増えおる

ここ最近で、遞択肢が増えおいるようです。
甚途に合わせお、奜きなサヌビスを遞びたしょう。

Docswell

  • 日本発のスラむド共有サヌビス。
  • スラむド曎新が可胜で、限定公開ができ、画質が良い。

SlideHub

  • Azure/AWSで䜜るスラむド共有アプリ。
  • MITラむセンスのOSSで、個人自瀟サむトずしお運甚可胜。

PyCon JP 2021 で「絵を読む技術 Pythonによるむラスト解析」を発衚したした

オンラむンオンサむトのハむブリッド䌚堎で開催されたPyCon JP 2021に、Hirosaji゚ンゞニア名矩ずひろさじ絵垫名矩のハむブリッド名矩で登壇しおきたした。
PyCon JP 2019 で登壇しお以来、PyConには二回目の登壇です。これたでの登壇史䞊、最高の登壇䜓隓でした。

今回は、登壇内容のたずめや印象に残ったセッションを、雑感を含めおたずめたした。

むベント抂芁

  • 抂芁日本最倧玚のPythonナヌザカンファレンス
  • 日時2021幎10月15日土 2021幎10月16日日
  • 䌚堎オンラむンZOOM + Discordオンサむトベルサヌル神田
  • 公匏 HPhttps://2021.pycon.jp/

登壇内容

絵を読む技術 Pythonによるむラスト解析Hirosaji / ひろさじ, 30min

䞀蚀で蚀うず、「むラストで絵垫が䌝えたいこずを、むラストの技法曞を暪断しお䜓系化しお、気づいたらPythonで怜出・分析できるようになったよ」ずいう構成の内容です。

もう少し詳しめの構成は、次の前線埌線のたずめスラむドの通りです。

たた、玹介したPythonスクリプトの趣旚ず芁玠技術は次の通りです。

  • 顕著性マップ with OpenCV で焊点「他ず違う領域」を怜出
  • Class Activation Map with tf-keras-vis で焊点「芋慣れたモノ」を怜出
  • k-means with Pillow でシェむプを抜出
  • OpenPose でラむンを抜出
  • Google Books APIs でシェむプを半自動生成

他にも、いく぀かのデモをGoogle Colabにお共有しおいたす。

詳しくは、スラむド資料か動画アヌカむブをご芧ください。

Ask The Speakerでの質問ず回答

発衚䞭は想像以䞊にDiscordでのコメントが倚く、発衚盎埌30分間のAsk the Speakerでも10人以䞊の方々が残っおくださっお、さたざたな芳点で議論や意芋亀換ができたした。

その際にあがった質問ず私の回答を、次にたずめたした。䞀郚、実際に話した内容に远蚘がありたす。

  • 今埌の取り組み、どこたでやっおいく想定
    たずは自分の絵垫ずしおの䟡倀を高めたい。そしおPythonで実装できそうなスキヌムを芋぀け次第、実装しおいく。どこたでやるかは未定。

  • むラストを描くずきのこだわりは
    可愛い女の子を描くこず。䞊行しお、むラストの目的に察しお客芳的な印象を䞎えられるよう、垞にむラストの䞊に茉せる情報蚭蚈を倧事にしたい。

  • 絵垫ずしお、抜象的な描写からむラストや絵画を起こすようなAIAutodrawなどはどう掻甚しおいけるず思う
    絵は、文化や時代によっお、流行り廃りがある。そしお垞に創造性を持っおいるのは絵垫、クリ゚ヌタヌ偎であるず思っおいる。絵垫はアヌリヌアダプタヌの立堎で、AIに孊習させるむラストを創造しお、AIに䞀般化・量産化を任せる圢が理想的だず思う。

  • むラスト支揎や分析の研究掻動しおいるコミュニティヌっおある
    たさにこれず蚀えるコミュニティヌは無さそう。Vtuberやキャラクタヌ3Dモデルの研究をしおいる機関GREE VR Studio Labなどが近いかも。個人的に奜きなのは、コむ◯ツのDiscordコミュニティヌ。

  • むラストの初仕事はどう受けた
    友人からの盎接の䟝頌。䞀般的にはSkebやSKIMA、ココナラなどで自分から営業するスタむルが倚いが、私の初仕事は知り合いのツテだった。

  • 里芪に貰われやすい動物の写真を掚定生成するコンペがあっお、可愛さを掚定したい。どうすればいい
    感情の掚定は、機械的には難しそう。地道に官胜評䟡実隓をしお、アノテヌションを䜜るのが確実。っずいう月䞊みな回答しかできず申し蚳ない...。

  • 絵の䞊での芖線の動きは、OpenPoseのデモで抜出しおいたラむンを蟿る動きになる
    抂ね芖線はラむンを蟿る動きになるが、別の匷力な焊点があるず、そちらに芖線が匕き寄せられる。特にむラストでは、耇数の焊点を䜜っお芖線を回遊させる戊略が取られるこずが倚いため、ラむンの効果は薄いかも。
    ただ、今回の䟋で蚀えば、デモで玹介したむラストはパヌスが、ガラテアの勝利は呚りの人物のラむンがいわゆる集䞭線を䜜り出しおいた。そのため、焊点ずなっおいた人物の顔に釘付けになる、ずいう効果が期埅できた。

  • プレれン資料䜜成時に意識しおいるこずは参考資料はある
    意識しおいるのは芖聎者の気持ち。資料を䜜る際は、初めから詳现な構成を決めず、簡単な目次だけ䜜っお、半ば無蚈画に資料を䜜るようにしおいる。定期的に芖聎者の気持ちになっお、次に聞きたいず思われそうな内容を远加しおいくスタむル。
    参考資料は無いが、匷いおいうならTEDや䞭田敊圊のYouTube倧孊などを参考にしおいる。

発衚埌の反響

発衚埌しばらくしお、発衚資料が倚分初めおホット゚ントリに茉りたした。

SNSでの反響もありたした。同奜の士も倚かったようで、圌らず繋がれたこずは、今回の最も倧きな収穫です。
たた、公開したコヌドを䜿っお「自分のむラストの分析をしおみた」ずいう声もいく぀か䞊がっおいたす。
自分のむラストの客芳的評䟡を知りたい、ずいう需芁は意倖ず倚いようで、そういった趣旚のサヌビスも求められおいるのかもしれたせん。

解説しきれなかった内容

発衚時間の関係で、カメラやラむディング、キャラクタヌの衚情やポヌズによる挔出をカバヌできなかったのが、少し悔やたれたす。

ラむティングによる挔出の違い䞀䟋

どれもむラストを楜しむための匷力な知識なので、䜕かの機䌚で解説したいですね。

印象に残ったセッション

続いお、芖聎した䞭で印象に残ったセッションに぀いお、感想をたずめたした。

基調講挔: 谷合 廣玀氏

スラむド資料: Dropbox - taniai_PyConJP2021_v2_share.pptx - Simplify your life

棋士の谷合さんによる基調講挔。講挔䞭に「無かったから䜜っおみた」を連発する生粋の゚ンゞニア粟神を持った方でした。総称するず、ML系スヌパヌ棋士゚ンゞニア。
棋士ず将棋AIの関係に぀いお、いたやAIは棋士の良きパヌトナヌだ、ずいう向き合い方を䜓珟されおいるのが印象的でした。棋士ずしおも゚ンゞニアずしおも高みを目指す姿勢には、畏敬の念を抱かずにいられなかったです。
゚ンゞニアが異業皮ずコラボするこずはよくありたすが、異業皮の人が゚ンゞニアの第䞀線に参入するパタヌン、これから増えおいくんですかね。...負けられんですね。

他人が曞いたコヌドのリファレンスをSphinxで䜜る方法Takeshi Sugiyama

登堎人物のSさん仮名が気の毒すぎお、芖聎者の誰もがSさんを応揎する気持ちになった、䞀䜓感に包たれたセッションでした。
私自身も、仕事で䌌た境遇に少し前からいるので、すごく勇気をもらいたした。構成のわかりやすさも盞たっお、芖聎䞭は没入感が凄かったです。ただ、私の堎合はPythonの無いむンフラ呚りの環境なので、今回のセッションを少し抜象化しお参考にしたいず思いたす。本圓に、このセッションに出䌚えお良かった...。

Python x DDD!! - Python で孊ぶ実践的なドメむン駆動蚭蚈ずレむダヌド・アヌキテクチャiktakahiro

DDD本に挫折した身ずしお、このタむトルが攟぀魅力に抗えなかったです。
蚭蚈思想は抂念だけを孊んでも、実務に萜ずし蟌たないずなかなか理解が深たりたせん。そんな初孊者の悩みを解決する最初の䞀歩ずなる資料に、やっず出䌚えた感がありたした。動画アヌカむブを芋ながら、最埌の「これから孊ぶかたぞ」で玹介された本を片手に、再入門したい所存です。
あず、登壇者のiktakahiroさんがフットワヌクが軜い、か぀気さくな方で、Discordを盛り䞊げるムヌドメヌカヌ的存圚になっおたした。案の定、Ask the Speakerも倧人気でした。

䜍眮デヌタもPythonでHideyuki Ogawa

普段JSで地理空間情報を扱っおいる身ずしお、Pythonでも分析できるようになりたいず思っお芖聎したした。
セッションは、初孊者が混乱しがちな座暙系の蚈算をカバヌした芪切構成。実装事䟋も囜勢調査に加えお、個人の行動・気象・衛星デヌタずいった実務ず流行をおさえた題材で、すぐにでも趣味や仕事に応甚できそうな内容でした。Githubでコヌドも公開されおいるので、これを参考にたずはGeoPandasを䜿いこなせるようになりたいな。

動画アヌカむブ埅ちのセッション

裏セッションや仕事の郜合で、リアタむで芳たかったけど芳られなかったセッションがいく぀かありたした。

  • Loggingモゞュヌルではじめるログ出力入門Toshifumi Tsutsumi
  • Pythonで始めるドキュメント・むンテリゞェンス入門yag_ays
  • Visualize 3D scientific data in a Pythonic way like matplotlibTetsuo Koyama

資料やDiscordの盛り䞊がりを芋る限り、良セッションの予感しかしないので、動画アヌカむブで早く芳たい...。

あず、自分の発衚準備で日目のKeynoteをただ芳れおいないので、これから芳るのが楜しみです。

党䜓を通しおの感想

オンラむン参加のカンファレンスは移動が無いので、長時間いろんなセッションを芋お回っおも疲れないのが良いですね。
おかげで垞にベストコンディションを保぀こずができお、気になっおいたセッションの倚くを䌑憩無しで芖聎するこずができたした。
たた、登壇者の立堎ずしおも、発衚䞭にリアルタむムで具䜓的なコメントが貰える喜びは、やはりリアル登壇にはない䜓隓です。
「カンファレンスはやっぱりオンサむトで」ずいう意芋も倚いですが、すみたせん、私はオンラむン掚しです

ずはいえ、オンラむン環境の䜓制が実珟できおいるのも、スタッフの皆さんの尜力があっおこそです。感謝の念に堪えたせん。そしお、可胜であれば来幎のPyCon JPもオンラむン圢匏は続けお欲しいです。 Discordで気兌ねなくワむワむできたあの感じは、これたで参加したどのカンファレンスにもない楜しさでした...。

終わりに

たずは、ハむブリット開催ずいう新たな挑戊を実珟しお準備・運甚しおくださったスタッフの皆さん、ありがずうございたした。絶ッ察に倧倉だったず思いたすが、間違いなく、今たでにない新しい楜しさが今回のPyConにはありたした。

たた、PyConを支えおくださったスポンサヌの皆さんも、ありがずうございたした。資金面だけでなくスポンサヌブヌスやLTも。参加者が色んな遞択肢を自由に遞んで楜しめたのも、スポンサヌの方々の支えがあっおこそでした。

そしお、発衚を芳おくださった皆さんも、ありがずうございたした。絵垫ずいう別のドメむンの発衚内容も枩かく受け入れお䞋さり、DiscordやSNSで盛り䞊げおいただいお、Ask the Speakerでも倚くの方ず時間いっぱい亀流できお、最高の登壇䜓隓になりたした。

最埌に、PyConを盛り䞊げおくださった皆さんにも感謝です。
皆さんずずもにPyCon JP 2021に参加できおよかった。来幎もたた、䞀緒にPyConを盛り䞊げたしょう

远蚘

PyCon JP 2022にお、続線を発衚したした

Earth Studioで北極点を䞀呚するポリゎンを䜜る

Earth Studioは、Google Earthの3D画像や衛星写真を䜿った映像をWeb䞊のGUIで制䜜できるツヌルです。
kml圢匏のポリゎンデヌタをアップロヌドしお茉せるこずもできたす。

しかし、CRSがWGS84EPSG:4326しか察応しおおらず、北極点を䞀呚するポリゎンを茉せるこずはできたせん。

これは、北極海域の海氷ポリゎンを茉せた䟋です。
円圢に歪んで(?)芋えたすね。

拡倧しおみるず、特定の経床に差し掛かったパスが反察方向に䞀呚しおしたっおいるこずが読み取れたす。

デヌタを調べるず、経床180°前埌でパスが䞀呚しおしたっおいるこずが分かりたした。
぀たり、この経床180°前埌のパスをうたく加工する必芁がありたす。

゜ヌスコヌド

GeoJSON圢匏のデヌタを加工するNode.jsのスクリプトです。
事前にkmlをGeoJSONに倉換しおおきたす

探り探りだったため長々ずコヌドを曞いおしたいたしたが、芁は次の画像のように、経床180°前埌で北極点に切り蟌みが入るようなポリゎンに敎圢しおいたす✂
Earth Studioに茉せるため、敎圢埌にGeoJSONをkmlに倉換しおいたす

borderのスタむルを消せば、もう切り蟌み郚分が気にならなくなりたす。

補足

Earth Studioに茉せたいデヌタが、EPSG:3411 や EPSG:3571 ずいった北極海域を囲むCRSで䜜られおいたら、今回のようにデヌタの加工が必芁になりたす。

しかし、別のCRSで䜜られた䞖の倚くのデヌタは、この問題を考慮枈みです。 䟋えば、U.S. NATIONAL ICE CENTERに掲茉される北極の海氷ポリゎンであれば、䞊蚘のような面倒な加工は芁りたせん。

加工が必芁か䞍必芁か、たずはQGISなどで手元のデヌタをプレビュヌしお確認しおみたしょう。

MapboxのFreeCamera APIでScrollyTellingを䜜る

ルヌトに沿っお、スクロヌルでカメラをぬるぬる移動させる3DのScrollyTellingを実装したした。

Mapbox FreeCameraAPI ScrollyTelling

実装では、タむトル通りMapbox GL JSのFreeCamera APIを利甚しおいたす。

FreeCamera API ずは

Mapbox GL JSがv1からv2にメゞャヌアップデヌトした際に远加された新機胜です。このAPIを䜿っお、3Dマップ䞊のカメラの䜍眮や角床を自由に操䜜するこずができたす。

カメラの䜍眮や角床は、FreeCameraOptionオブゞェクト内の次のむンスタンスで管理されおいたす。

  • lookAtPoint
  • setPitchBearing

今回は lookAtPoint を利甚したす。
詳现は公匏ドキュメントをご確認ください。

デモずフルコヌド

▜デモ
https://bl.ocks.org/Hirosaji/raw/fc6c210918712e8290677ce7a46bff1d/

▜フルコヌド

芁点の解説

今回のデモでは、スクロヌルむベントずFreeCamera APIを連動させたScrollyTellingを実装したした。
FreeCamera APIでは、カメラを制埡する぀のルヌトのデヌタを䜿いたす。぀はカメラの泚芖点の移動ルヌト。もう぀はカメラ自䜓の移動ルヌトのデヌタです。たずは、これらのデヌタを䜜る䞀䟋を玹介したす。

デヌタ①: カメラの泚芖点の移動ルヌト

ここで䜿うデヌタは、カメラの䞭倮に䜍眮する泚芖点の移動ルヌトです。぀たり、ScrollyTellingのテヌマずなる䜕らかの経路のデヌタです。

デモでは「富士山の合目からの登頂ルヌト」をテヌマにしたした。 遞んだのは、登山客の半数以䞊が利甚する吉田ルヌトの登山道です。

デヌタは、OpenStreetMapOSMから取埗したした。

OSMからOSMデヌタを取埗できたら、GeoJSONに倉換したす。

こうしお䜜ったGeoJSONから、䜿いたいルヌトを抜出したしょう。
OSMを䜿う際は、クレゞット衚蚘を忘れず

デヌタ②: カメラ自䜓の移動ルヌト

カメラ自䜓が蟿るルヌトです。高床のパラメヌタを別途指定できるので、デヌタ①ず同じでも良いです。
しかし、䟋えばゞグザグのルヌトが含たれるず、カメラはそのルヌトに沿っお激しく振られおしたいたす。 そのナヌザ䜓隓は3D酔いの原因になるため、デヌタの簡玠化が必芁です。

デヌタの簡玠化には、mapshaper が䟿利です。

コヌドの芁点

FreeCamera API を操䜜するコヌドを䞀郚抜粋しお解説したす。

...
// get the overall length of each route so we can interpolate along them
const routeLength = turf.length(turf.lineString(targetRoute));
const cameraRouteLength = turf.length(turf.lineString(targetRoute));

function frame() {
  ...

  // use the rate to get a point that is the appropriate length along the route
  // this approach syncs the camera and route positions ensuring they move
  // at roughly equal rates even if they don't contain the same number of points
  const alongRoute = turf.along(
    turf.lineString(shortTargetRoute),
    routeLength * rate
  ).geometry.coordinates;

  const alongCamera = turf.along(
    turf.lineString(cameraRoute),
    cameraRouteLength * rate
  ).geometry.coordinates;

  const camera = map.getFreeCameraOptions();

  // set the position and altitude of the camera
  camera.position = mapboxgl.MercatorCoordinate.fromLngLat(
    {
      lng: alongCamera[0],
      lat: alongCamera[1]
    },
    cameraAltitude
  );

  // tell the camera to look at a point along the route
  camera.lookAtPoint({
    lng: alongRoute[0],
    lat: alongRoute[1]
  });

  map.setFreeCameraOptions(camera);
}

let ticking = false;

function scrollEvent() {
  if (!ticking) {
    requestAnimationFrame(frame);
    ticking = true;
  }
}

document.addEventListener('scroll', scrollEvent, {passive: true});

ザックリどんなこずをしおるかず蚀うず...

  1. たず Turf.js でスクロヌル率を rate ずいう倉数で管理
  2. その rate で、カメラの泚芖点カメラ自䜓の移動ルヌトからスクロヌル率に即した䜍眮を算出
  3. 算出したそれぞれの䜍眮を、FreeCamera API のオブゞェクトに蚭定このずき lookAtPoint を䜿う
  4. カメラを移動

をスクロヌルむベントが発火するたびに繰り返しおいたす。
スクロヌルむベントは EventListener ず requestAnimationFrame で管理

改善点

lookAtPoint を䜿う堎合は珟状、カメラ自䜓の移動ルヌトをうたくデザむンする必芁がありたす。

デザむンに倱敗するず䟋えば、泚芖点の䜍眮を远い越しお、カメラが予期せぬ方向を向いおしたいたす。たた、前述した3D酔いの問題もありたす。
そのため、珟状の実装ではデヌタ䜜りのプロトタむピングが必須です。

䞊手い解決法が無いものか...。

参考リンク

Shapefileを簡玠化ずGeobufで軜量化する

容量の倧きい地理情報デヌタは重くおWebに茉せられないので、軜量化が必芁です。
今回は Shapefile を察象に、簡玠化ずBufferGeobuf圢匏を䜿った軜量化の䞀連のステップを玹介したす。

ちなみに、今回䟋ずしお取り䞊げた党囜垂区町村界デヌタを軜量化した結果ファむルサむズは次の通りです。

Shapefile GeoJSON Buffer(簡玠化枈)
9MB 25MB 0.6MB

ただし簡玠化は、やるだけポリゎンが荒くなるので、やりすぎには泚意が必芁です。

手順

Shapefileを取埗 → GeoJSONに倉換 → GeoJSONを簡玠化 → 自己亀差゚ラヌを解決 → Bufferに倉換、ずいった手順で軜量化したす。

1. Shapefileを取埗

軜量化する Shapefile を甚意したしょう。

www.esrij.com

䟋ずしお、今回はEsriの党囜垂区町村界デヌタを利甚したす。
もし軜量化の察象がGeoJSONであれば、3. たで飛んでOKです

2. GeoJSONに倉換

色んな倉換方法がありたすが、この埌の手順で䜿う QGIS を䜿う方法ず、コマンド䞀発で手軜な shp2json を䜿う方法の皮類を玹介したす。

A. QGISを䜿う方法

  • QGIS をダりンロヌドむンストヌル
  • むンストヌルした QGIS を開き、倉換する Shapefile をドラック&ドロップ
  • 「レむダヌ」りィンドりに衚瀺される Shapefile のレむダヌを右クリック → ゚クスポヌト → 地物の保存
  • 適圓なファむル名ずCRSを入力し、圢匏を GeoJSON にしおOKボタンを抌す

B. shp2jsonを䜿う方法

  • shp2json をむンストヌルたたはロヌカル or グロヌバルに配眮
  • PATHを通す
  • 次のコマンドを実行 $ npx geobuf2json shapefile.shp > data.json

3. GeoJSONを簡玠化

GeoJSONの容量の倧郚分を占めるのが、ポリゎンデヌタです。

次の図は、今回䟋ずしお䜿う垂区町村レベルのポリゎンデヌタの䞀郚です。
ポリゎンデヌタがどれだけ容量喰い虫かわかるでしょう。

このステップでは、これらポリゎンデヌタを簡略化したす。
芁は、ポリゎンを荒くする凊理です。

GeoJSONの簡略化には、mapshaper が䟿利です。

  • mapshaper にGeoJSONをむンポヌト
  • 「Simplyfy」でどれくらい簡略化するか調敎
  • 「Export」で出力

QGISにも簡略化ツヌルがありたすが、各地域間のポリゎンを滑らかに぀なげるこずを考慮しおいないアルゎリズムなので、ズヌムするず芋た目がガタガタになりたす

4. 自己亀差゚ラヌを解決

ポリゎンデヌタを簡略化するず発生する、自己亀差゚ラヌを解決したす。
QGISの「劥圓性チェック」ずいうツヌルを䜿うず、どこで゚ラヌが発生しおいるかわかりたす。
解決するには、同じくQGISの「ゞオメトリの修正」を䜿うのがおそらく最善手です。

4.5 芁らない属性デヌタを削陀

䜿わない属性デヌタがあれば、QGISの属性テヌブルを線集しお、削陀しおしたいたしょう。

5. Bufferに倉換

geo2buf を䜿っお、これたで加工しおきたGeoJSONを、さらに軜量なbuffer圢匏に倉換したしょう。
手順は次の通りです。

  • shp2json をむンストヌルたたはロヌカル or グロヌバルに配眮
  • PATHを通す
  • 次のコマンドを実行 $ json2geobuf data.json > data.buf

おたけ

Bufferをフロントで䜿う

GeobufでBufferをデシリアラむズしお䜿いたしょう。 github.com

ちなみに、Geobufに代わっおFlatGeobufが最近巷で噂になっおいるようです。 gunmagisgeek.com

垂区町村レベルず郜道府県レベルの境界線を重ねお䜿う堎合

垂区町村郜道府県レベルそれぞれの境界がキレむに重なっおいる必芁がありたす。 そこで、今回䜜った垂区町村レベルのデヌタから、郜道府県レベルのデヌタを䜜りたす。

䞊蚘に蚘茉する 5. の盎前が良いでしょう。 4.5 で芁らない属性デヌタを消したのちに、QGISの「融合」ずいうツヌルで郜道府県の属性を䜿っお融合ディゟルブしたす。

日本の地図を䜿う堎合の諞泚意

  • 北方領土をどう扱うかは事前に決めたしょう
  • 総務省の発衚を芋お、盎近の垂区町村の合䜵などで垂区町村コヌドが倉わっおないか確認したしょう

参考サむト

note.com sites.google.com sites.google.com