Qt ユーザー会のウェブサイトを更新しています

はじめに

みなさん、こんにちは。Qt Champion の @task_jp です。好きな Qt Quick のエレメントは ShaderEfefct、嫌いなエレメントは QtObject です。

Qt Advent Calendar 2014 の５日目に書いた「Qt Creator をつかいこなそう」の記事の中で Qt Creator のコミット画面のレイアウトを改善しました という内容に触れましたが、Submit editor: Unclutter UI というパッチで「そのパッチで見た目は改善されたけど意味的な構造がぐちゃぐちゃになったからもうちょっとなんとかしようぜ」と言われたことにいまいち納得いっていない日々を過ごしています。

日本 Qt ユーザー会のウェブサイトを改造中です

この記事を書くまでにはもうちょっとちゃんとしたかったんですけど、、、遅れてきた読書の秋のせいでここ２週間ほど全然作業が捗りませんでした。

2012年に @luyikei 君が qt-users.jp のサイトを作ってくれて、今まで管理してくれていましたが、「Qt ユーザー会のウェブサイトだから Qt/Quick で作り直してもいい？」って聞いたところ快諾してくれたので、今回 Qt で１から作り直してみました。

誰のためのどういうウェブサイトにするか？

1. トップページ は Qt を使ったことない人が Qt を使いたくなるようなものにしたいと思いました
2. Qt をはじめたばかりの人に向けたコンテンツを「Qt をはじめよう！」という形でまとめたいと思いました
3. それ以上のユーザーに向けた有用なコンテンツを「Qt をつかいこなそう！」という形でまとめたいと思いました
4. すべてのユーザーが期待する内容をカバーすることは不可能なので、困ったときにまず見る場所として「こまったときは？」というコンテンツを作りたいと思いました。

2 と 3 については Qt ユーザー会として様々なコンテンツを提供していけたらいいなぁと思っています。

4 についても、「メーリングリスト で聞いてね」以上になにか有用な情報を提供できたらいいなぁと思っているので、こんな風にしたらいいんじゃない？というアイディアがある方は是非お知らせください。

運用とか技術的な話

VPS の移転

今までは @kenya888 が個人的に借りていた お名前.com の VPS で運用していましたが、日本 Qt ユーザー会として ConoHa支援プログラム の支援を受けることができましたので ConoHa の VPS に移転しました。

サーバーサイドのフレームワーク

Silk - Simple and flexible web framework という、私が２年くらい前に遊びで Qt で作った、QML で HTML とか CSS とかを宣言的に書けるサーバーサイドのフレームワークを採用しました。

• デモサイト
• ソースコード

クライアントサイドのフレームワーク

シンプルなレイアウトエンジンを探していたところ、Skel: A lightweight responsive framework for the www というなんか良さそうなものを見つけたので採用してみました。

(あんまり使い方よく分かってなくて変なところが色々あるので詳しい方や勉強してみようという方がいましたらちょっと相談にのってくれたらうれしいな）

Qt Quick の XMLHttpRequest は同期処理ができない

今までのウェブサイトの運用で、一番面倒くさかったのが 勉強会のアナウンスを WordPress にコピペする という作業でした。

新しいウェブサイトでは、どうしてもそこは解決したかったので、Doorkeeper の API とか、Zusaar の API とか、ATND の API に Qt Quick の XMLHttpRequest でアクセスして自動的に勉強会の情報を収集してデータベースに保存するようにしました。

それを表示するページが Qt 勉強会 になります。

その際、いちいち非同期通信でレスポンスを受け取ったら処理をする仕組みにするのがアホらしかったので、同期通信で処理をしようとしたところ、ドキュメントに

QML's XMLHttpRequest does not support synchronous requests.

って書いてあって「まじかよー」と思いました。

同期処理に対応するパッチを作った

おそらく誰も必要としていなかったから対応していなかっただけだと思うので（つまり積極的に対応しない理由はないと思うので）適当にパッチを作ってアップストリームに投げてみました。

WIP: support XMLHttpRequest sync mode

最初のバージョンはちょっとひどい実装になっていたのですが、WebKit に合わせて実装したら？というアドバイスをいただいてちょっとづつ改善中で、機能の修正自体はだいたいいいんじゃないかなぁと思っています。テストコードをちゃんと書いたり、ドキュメントを修正するのが面倒くさくてなかなか進まない感じです。

これによって、API にアクセスするコードが以下のようにシンプルになりました。

var request = new XMLHttpRequest
request.open('GET', url, false)
request.send()
// request.responseText を解析してローカルストレージに保存する簡単な作業

Qt Quick の UI をなめらかに動かすためには非同期で処理する必要があるのですが、今回のように Silk のバックグラウンドタスクとして処理を行う場合や別スレッドで動かす場合には、同期処理の方が実装が簡単になっていいこともあるので、是非取り込んでもらえるように頑張りたいと思います。

おわりに

現時点では、あっちもこっちも工事中な上に、ソースコードを公開したりもしていないので、協力してもらうこともできないというひどい有様ですが、近日中にアレコレ改善して、誰でも？Qt ユーザー会のウェブサイトの運用に関われるようにしたいと思います。

Qt のユーザー会に参加していたり、勉強会に参加している方のほとんどの方は Qt の C++ や QML の読み書きができるはずなので、今後、積極的にウェブサイトの運用／改善の面でも、デザインの面でも貢献してくれる人が増えたらいいなぁと思います。

明日は @KengoSawa2 さんによる「QCommandLinerParserの使用例について」です。
非常に便利なクラスなのですがうまく使うのには少しコツがいるツンデレちゃんと仲良くなる方法を丁寧に解説してくれることでしょう。