ソフト一般：息子と一緒に Makers：So-netブログ

	ブログをはじめるログイン

Qt のアプリケーションを作ってみる（４）　[ソフト一般]

前回、クリックすると背景色とテキストを変えるアプリケーションを作りました。今回はクリックで画像を移動するアプリケーションを作ってみたいと思います。

まず、前回作成した Rectangle を MouseArea ごとコピーをして左右に並べます。それぞれが画像を表示するためのエリアになります。

Rectangleは全部で３つで、Rectangle1、Rectangle2、Rectangle3 です。QMLファイルは下記のようになりました。

動きをつけるために、StateGroup という属性をQMLファイルに追加します。ここに画像を移動するための記述を加えます。

MouseAreaがクリックされた時に、どのStateに移動するかを各Rectangleの属性に記述します。

それでは、アプリを起動してみましょう。

左をクリックしてみます。

右をクリックしてみます。

期待通りにアプリケーションが動いてくれました。本当に簡単に動きがつけられますね。QMLの仕様が秀逸です。Qtなかなか使えそうです。Tutorial を読んでいたら、画像の移動時にアニメーションが付け加えられることも分かりました。次はアニメーションでアプリに味付けしてみたいと思います！
（＾_＾）／～

関連記事
Qt のアプリケーションを作ってみる（３）
http://makers-with-myson.blog.so-net.ne.jp/2014-09-22

Qt のアプリケーションを作ってみる（２）
http://makers-with-myson.blog.so-net.ne.jp/2014-09-21

Qt のアプリケーションを作ってみる（１）
http://makers-with-myson.blog.so-net.ne.jp/2014-09-20

Application Development with Qt Creator

出版社/メーカー: Packt Publishing
発売日: 2013/11/20
メディア: Kindle版

OpenGL Tutorials using Qt4

出版社/メーカー: Omid Sakhi
発売日: 2013/11/10
メディア: Kindle版

Qt QuickではじめるクロスプラットフォームUIプログラミング

作者: 折戸孝行
出版社/メーカー: アスキー・メディアワークス
発売日: 2013/08/01
メディア: 大型本

タグ：Qt

2014-09-23 21:51 nice!(34) コメント(0) トラックバック(0)

Qt のアプリケーションを作ってみる（３）　[ソフト一般]

前回作ったQtアプリケーションに簡単なアクションを付け加えたいと思います。画像をクリックするとウィンドウの背景とテキストを変更してみます。

まず画像のエリアに矩形のウィンドウを設定します。左のエレメントからRectangle オブジェクトをドラッグ＆ドロップで画像と同じ領域に設定します。

次に、同じくエレメントからMouseAreaをドラッグ＆ドロップをしてRectangleオブジェクトに被せます。ナビゲータウィンドウで「mouseArea1」が「rectangle1」の子要素になっているのが味噌です。

次にQMLファイルを編集します。赤字が修正を加えたところです。MouseAreaでClickedが発生すると、ウインドウの背景色とテキストを変更するように記述してみました。赤文字が自動生成ファイルから編集を加えた部分です。

それではアプリケーションを起動してみましょう。初期状態は背景はグレイです。

画像をクリックすると、、、

きちんと期待通りの動作をさせることができました。

ここまでC++のコードを一切編集していません。リソースの編集もAndroidよりも直感的にできますし、かなり整理された仕様であると感じました。なかなか期待できるテクノロジーです。

次は、クリックで画像を移動させるようにアプリケーションを進化させたいと思います。
（＾_＾）／～

関連記事
Qt のアプリケーションを作ってみる（２）
http://makers-with-myson.blog.so-net.ne.jp/2014-09-21

Qt のアプリケーションを作ってみる（１）
http://makers-with-myson.blog.so-net.ne.jp/2014-09-20

Application Development with Qt Creator

出版社/メーカー: Packt Publishing
発売日: 2013/11/20
メディア: Kindle版

Qt Quick

作者:
出版社/メーカー: Book on Demand Ltd.
発売日: 2013/01/19
メディア: ペーパーバック

Qt QuickではじめるクロスプラットフォームUIプログラミング

作者: 折戸孝行
出版社/メーカー: アスキー・メディアワークス
発売日: 2013/08/01
メディア: 大型本

タグ：Qt

2014-09-22 23:59 nice!(31) コメント(0) トラックバック(0)
共通テーマ：趣味・カルチャー

Qt のアプリケーションを作ってみる（２）　[ソフト一般]

前回作ったQtの"HelloWorld"アプリを作り変えて、簡単なイメージを表示できるようにしてみます。今回使うイメージは100px*100pxの小さなPNGファイルです。

これをアプリケーションのプロジェクトフォルダに置いておきます。
（私の環境では、C:\Qt\Samples\MyFirstQt になります）

Imageを張り付ける前に、画像の見栄えがよくなるようアプリケーションのウィンドウサイズを少し小さくしておきます。

Imageオブジェクトは左のエレメントからドラッグ＆ドロップで張り付けることができます。プロジェクトフォルダにコピーしたイメージファイルは、右のImageのソース：プルダウンから選択できました。

テキストもついでに”Hello World”から"Taro Yoshino"に変更しています。

再生ボタンを押してアプリケーションを起動してみましょう。

あれ？なぜかイメージが表示されません。エラーには、”Image: Cannot open”と出ています。デザインツールでは普通に選択できたのに腑に落ちません。ということでグーグル先生に問い合わせてみました。

Thread: Can’t load the image after I register the qml file to Qt resource system
http://www.qtcentre.org/threads/54999-Can%E2%80%99t-load-the-image-after-I-register-the-qml-file-to-Qt-resource-system

上記サイトで、file:/// で直接ファイルを指定すれば大丈夫とありますので、QMLファイルを直接編集してみました。

気を取り直してアプリケーションを起動してみましょう。

無事イメージが表示されました。まだまだこなれていないですねぇ。次はこのアプリに少し動きをつけてみたいと思います。
（＾_＾）／～

関連記事
Qt のアプリケーションを作ってみる（１）
http://makers-with-myson.blog.so-net.ne.jp/2014-09-20

Qt QuickではじめるクロスプラットフォームUIプログラミング

作者: 折戸孝行
出版社/メーカー: アスキー・メディアワークス
発売日: 2013/08/01
メディア: 大型本

実践 Qt 4プログラミング

作者: Mark Summerfield
出版社/メーカー: オライリージャパン
発売日: 2012/04/25
メディア: 大型本

Qtプログラミング入門―使いやすいフレームワークを基礎から解説 (I・O BOOKS)

作者: 津田伸秀
出版社/メーカー: 工学社
発売日: 2011/12
メディア: 単行本

タグ：Qt

2014-09-21 23:06 nice!(28) コメント(0) トラックバック(0)
共通テーマ：趣味・カルチャー

Qt のアプリケーションを作ってみる（１）　[ソフト一般]

昨日、QtCreator をインストールしたので、Qt のアプリケーションを作ってみたいと思います。

Qt の Tutorial の「Creating a Quick Application」を順を追ってやっていきたいと思います。Tutorialは QtCreatorメニューの「ここからスタート」を奥深く掘っていくとあります。（説明が長くなるので場所は省略・・・）

早速プロジェクトを作ってみましょう。QtCreatorメニューの「新しいプロジェクト」を押します。

作成するアプリケーションの種類を聞かれるので「Qt Quick Application」を選択します。

プロジェクト名は「MyFirstQt」にしました。あとからコンポーネントやらキットやら聞かれますが、詳しいことは分からないので、何も考えずに「次へ」を押してプロジェクトを作ります。

main.qml というファイルが作成されました。これがQtアプリの構成を記述する重要なファイルになるようです。

「デザイン」を押すと作成されたプロジェクトのレイアウトが表示されました。

何も考えずに、再生ボタンを押してみます。するとアプリが立ち上がりました。

味気ないアプリですが、あっという間に”HelloWorld”までたどり着きました。これからいろいろ味付けしていきたいと思います。
（＾_＾）／～

Qt QuickではじめるクロスプラットフォームUIプログラミング

作者: 折戸孝行
出版社/メーカー: アスキー・メディアワークス
発売日: 2013/08/01
メディア: 大型本

実践 Qt 4プログラミング

作者: Mark Summerfield
出版社/メーカー: オライリージャパン
発売日: 2012/04/25
メディア: 大型本

Qtプログラミング入門―使いやすいフレームワークを基礎から解説 (I・O BOOKS)

作者: 津田伸秀
出版社/メーカー: 工学社
発売日: 2011/12
メディア: 単行本

タグ：Qt

2014-09-20 23:59 nice!(29) コメント(0) トラックバック(0)
共通テーマ：趣味・カルチャー

Qt をインストールしてみた　 [ソフト一般]

今日は少し早めに帰ってきた（といっても22時過ぎ）ので、Qt をインストールしてみることにしました。

QtのDownloadページ、有償版を買え買えオーラがすごいですが、ここは勇気をもって無償版をダウンロードします。

http://www.qt.io/download/
Download Qt.png

ダウンロードしたファイルをクリックするとインストーラーが立ち上がります。

手順に従えばなんなくインストールできます。各種ファイルをリポジトリからダウンロードしてくるので、ものすごく時間がかかります。お風呂にでも入ってほっておきます。

Qtのインストールを終えて QtCreator を起動してみました。なかなか起動しません。初回起動で時間がかかるのかな？と思ったらこんな画面が出てきました。OTZ...

グーグル先生に、「QtCreator MSVCP120.dll」で検索したら下記サイトがひっかかりました。

Missing MSVCP120.dll file at Startup
http://qt-project.org/forums/viewthread/43383

アドバイスに従って、Qtのメニューの中から「Maintenance Tool」を起動し、パッケージマネージャーを選択します。

Qt5.3 を開くとインストールされたコンポーネントのリストが表示されます。この中から「MSVC2013 32bit」と「MSVC2013 64bit」をチェックしました。

コンポーネントのダウンロードにものすごく時間がかかるので歯でも磨いてほっておきます。
無事に更新が完了後、QtCreatorを立ち上げてみたら、、、ダメでした。

しょうがないので、もう一度グーグル先生に「MVCP120.dll」で検索してみました。そこで行き着いたサイトが下記。他製品のサポートページなので、ちょっと気が引けますが。

http://www.native-instruments.com/jp/support/knowledge-base/show/2399/device-updater-msvcp120.dll-windows/

ここで重要なのは、「注意：ご使用のWindowsが64bit版であってもvcredist_x86.exe をインストールしてください。」の部分。

早速、VisualStudioのダウンロードページへ飛んで「vcredist_x86.exe」をインストールしてみました。

Visual Studio 2013 の Visual C++ 再頒布可能パッケージ
http://www.microsoft.com/ja-JP/download/details.aspx?id=40784

起動してみます。ようやくエラーが消えてくれました。

やはり、まだまだこなれていないですねぇ。でもこういうのを使いこなすのもオープンソースの醍醐味のひとつです。思いのほか手こずったので、今日はここまで。続きは明日にでも～。
（＾_＾）／～

Qt QuickではじめるクロスプラットフォームUIプログラミング

作者: 折戸孝行
出版社/メーカー: アスキー・メディアワークス
発売日: 2013/08/01
メディア: 大型本

実践 Qt 4プログラミング

作者: Mark Summerfield
出版社/メーカー: オライリージャパン
発売日: 2012/04/25
メディア: 大型本

Qtプログラミング入門―使いやすいフレームワークを基礎から解説 (I・O BOOKS)

作者: 津田伸秀
出版社/メーカー: 工学社
発売日: 2011/12
メディア: 単行本

2014-09-19 23:59 nice!(28) コメント(0) トラックバック(0)
共通テーマ：趣味・カルチャー

俺氏「Qt」というアプリケーションフレームワークに興味をもつ　 [ソフト一般]

ソフトウエアネタばかりで恐縮ですが、最近「Qt」というアプリケーションフレームワークに興味を持っています。

http://qt-project.org/

興味をもったきっかけは、Ubuntu Phone でした。Ubuntu Phoneには、QtがAndroidに変わるアプリケーションフレームワークとして使われているようなのです。

このソフトの何がすごいかというと、ひとつのC++のソースコードで、Windows、Linux、Android、さらには iOS 上で動くソフトウエアができてしまうのです。しかもネイティブコードなので、サイズが小さく動作も速い。

開発ツールの QtCreator も Android Studio と Arduino を足して２で割ったような感じで使い勝手もよさそうです。

これらのすべてがフリー（LGPL v2 ライセンス）で配布されているのだからスゴイ！オープンソースコミュニティ恐るべしです。Qt が Android を脅かす日が来るかも知れませんね。

近いうちに実際に使ってみた体感レポをあげたいと思います。（＾_＾）／～

Qt QuickではじめるクロスプラットフォームUIプログラミング

作者: 折戸孝行
出版社/メーカー: アスキー・メディアワークス
発売日: 2013/08/01
メディア: 大型本

実践 Qt 4プログラミング

作者: Mark Summerfield
出版社/メーカー: オライリージャパン
発売日: 2012/04/25
メディア: 大型本

Qtプログラミング入門―使いやすいフレームワークを基礎から解説 (I・O BOOKS)

作者: 津田伸秀
出版社/メーカー: 工学社
発売日: 2011/12
メディア: 単行本

タグ：Qt

2014-09-18 23:58 nice!(27) コメント(0) トラックバック(0)
共通テーマ：趣味・カルチャー

タイトルバナー（フォトヘッダー）画像を変えてみた（解説編）　[ソフト一般]

タイトルバナー（フォトヘッダー）画像の変更方法を解説します。
So-netの公式サイトで変更方法が解説されていますが、画像サイズが指定されているのが気に入りません。

「オリジナルフォトヘッダー」を使う
http://blog-help.blog.so-net.ne.jp/originalphotoheader

どうせなら細長いバナー画像（フォトヘッダー）を設定したいなと思うのですが、上記サイトの通り設定してもうまくいきません。

実際に 900px ｘ 300px の画像を設定してみます。（標準は 900px ｘ 520px）
管理サイトの「テンプレート管理」を開きます。現在使っているテンプレートを選択して「編集」をクリックします。

上記サイトの手順にしたがって、900px x 300px の画像に差し換えてみます。

プレビューを見てみると、バナー画像のエリアは変わらずに広いままです。このままだと間抜けです。

バナー画像の表示エリアを変更してみました。

プレビューを見ると、ほぼ希望通りの表示になっていますがタイトルテキストの位置が気になります。

タイトルテキストを上にもっていくようにテキストエリアの位置を調整します。

テキストと画像のかぶりも少なくなり、見栄えがよくなりました。

かなり簡単に修正をしましたが、使うテンプレートによって定義内容は異なります。もし編集される場合は、お使いのテンプレートの内容を熟知した上で変更してくださいね。
（＾_＾）／～

スラスラわかるHTML&CSSのきほん

作者: 狩野祐東
出版社/メーカー: ソフトバンククリエイティブ
発売日: 2013/05/28
メディア: 大型本

作りながら学ぶ HTML/CSSデザインの教科書

作者: 高橋朋代
出版社/メーカー: SBクリエイティブ
発売日: 2013/12/17
メディア: 大型本

HTML5+CSS3の新しい教科書基礎から覚える、深く理解できる。

作者: 赤間公太郎
出版社/メーカー: エムディエヌコーポレーション
発売日: 2013/09/20
メディア: 単行本

タグ：So-netブログ

2014-08-18 23:58 nice!(38) コメント(4) トラックバック(0)
共通テーマ：趣味・カルチャー

Aptana Studio3 をインストールしてみた　 [ソフト一般]

大分前に作ったホームページ。しばらく放置状態だったのですが、最近のHTML5の流行で、久しぶりにホームページ制作に取り掛かってみようと思いました。

とは言うものの、当時使っていたオーサリングツールはWindows 98向けのもの。あまりにも古いので今更使う気にもなりません。そもそも HTML5 に対応していませんし。

ということで、ネットを漁っていたら Aptana Studio3 という eclipse プラグインのフリーのオーサリングツールを見つけました。もちろん HTML5 対応です。

フリーの高機能HTMLエディタ「Aptana Studio3」の日本語化と「Zen-Coding」のインストール方法。
http://meglog.net/useful-tools/aptana-studio3-zen-coding.html

なんか便利そうな Zen-Coding。でも名前が変わっているようです。

zencodingが名前を変えてパワーアップ！ Emmetに注目しよう
http://tagamidaiki.com/zencoding-change-emmet/

日本語も Shift-JIS を使う場合はコツがいるようです。

Aptanaの日本語文字化け解消メモ
http://no-time-to-read.seesaa.net/article/95987303.html

ということで上記サイトを参考にインストールと日本語化をしました。

さて、問題はこの後です。ホームページとリンクしたいのですがどうしたらよいかよく分かりません。色々と試行錯誤の末、メニューの中のリモートという項目を使えばなんとかなりそうだと分かりました。

リモートをクリックするとタブが一つ追加されます。

その中の地球＋マークを追加すると、サーバーとのコネクション設定が出てきます。

FTPを使う場合はセキュリティの関係上、プロバイダ提供のルータがある家でのみ使うようにしましょう。サーバーとの接続がプロバイダのネットワーク内でピア２ピアになるので途中でパスワードを抜かれる心配はありません

サーバーとの接続が成功したら、次は既存のコンテンツを引っ張ってきます。右クリックで Connection Manager という項目が出てくるのでクリックします。

FFFTPのような画面が現れますので、ローカルディスクとFTPサイトとの同期をとります。ドラッグアンドドロップでコンテンツを同期させることが可能です。

6 connection manager.png

次はプロジェクトへこのコンテンツを追加します。App Explorer のタブをクリックするとプロジェクトの追加を促されます。インポート・プロジェクトをクリックします。

インポートでディレクトリを設定して終わりです。

プロジェクトエクスプローラに設定したプロジェクトが現れます。試しにファイルをひとつ編集しアップデートできることまで確認できました。

まだまだ謎の多いAptana3 ですが、追々使いこなしていきたいと思います。
（＾_＾）／~

Aptana Studio Beginner's Guide

作者: Thomas Deuling
出版社/メーカー: Packt Publishing
発売日: 2013/01/31
メディア: ペーパーバック

HTML+CSSコーディング　ベストプラクティス　高速かつ堅牢なコードを効率よく書くために

作者: こもりまさあき
出版社/メーカー: MdN
発売日: 2010/08/25
メディア: 単行本

HTML+CSSコーディングが10倍速くなるZen Coding

作者: こもり　まさあき
出版社/メーカー: インプレスジャパン
発売日: 2010/11/26
メディア: 単行本（ソフトカバー）

タグ：ホームページ制作

2014-06-08 23:56 nice!(25) コメント(0) トラックバック(0)
共通テーマ：趣味・カルチャー

So-net ブログアプリ（Android）を試してみた　 [ソフト一般]

私はAndroid スマホを使っているのですが、ブログのレスポンスが遅くフラストレーションを感じていました。

Ameba のスマホアプリはレスポンスが良かったので、So-netも用意しているかな？と思い探してみたところ、、、やっぱり、ありました！

あれ？でも評価が著しく低い。。。　とりあえずインストールしてみます。

アプリを開くとＩＤとパスワードを聞いてきます。でも、So-netのＩＤとパスワードでは入れません。「基本設定から発行しろ」と書いてあるものの、よく分かりません。

いろいろ探してみて、ようやく見つけたのが『AtomAPI/XML-RPC/アプリ』の項目。。。

普通わからないでしょ！ヽ（｀Д´）ノ

ＩＤはあらかじめ定められた値が入っています。パスワードを発行するとＱＲコードが出てきます。値を読み取り、コピーアンドペーストでログインできました。

アプリのメインメニューは、あっさりとしています。しゃれた作りなら良いという訳ではありませんが、味気ない作りです。

記事の一覧画面です。よくあるバグですが、大企業の出すアプリとしては、見っとも良いものじゃないですね。。。記事一覧画面は編集用で、閲覧には向きません。閲覧にはブラウザを使いましょう。

編集画面には音声入力があります。これは評価できますね！

『下書き保存』があるので、サーバー側にも保存されるのかと思ったのですが、スマホ内に保存されるだけでした。スマホで下書きしてＰＣで清書！ということが出来るかなと期待したのですが、、、残念です。

So-netブログアプリは、短い写真付き記事の投稿には使えそうです。音声入力もあるのでキーボードが無くても簡単に記事が書けるのは良いと思いました。

ただ『下書き保存』だけはサーバーとリンクして欲しい所です。今後のバージョンアップに期待しましょう。
（＾_＾）／～

Java API for XML-Based RPC

作者:
出版社/メーカー:
メディア: ペーパーバック

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

作者: 山本陽平
出版社/メーカー: 技術評論社
発売日: 2010/04/08
メディア: 単行本（ソフトカバー）

はじめてのAndroidアプリ開発―Android4対応版 (TECHNICAL MASTER)

作者: 山田祥寛
出版社/メーカー: 秀和システム
発売日: 2012/11
メディア: 単行本

タグ：So-netブログ so-net Android

2014-01-20 23:52 nice!(32) コメント(0) トラックバック(0)
共通テーマ：趣味・カルチャー

Twitter はじめました　 [ソフト一般]

カミさんが、Twitter をはじめたいというので、私も Twitter を試してみることにしました。Twitter アカウントをお持ちの方がいたら、フォローしていただけると嬉しいです。

https://twitter.com/Taro_Yoshino

Twitter は、娘の得意領域なので、いろいろ聞きながら試してみました。ブログほど、かしこまらなくて良いということなので、砕けた物言いとなってしまっています。その点は、ご容赦ください。

アカウントを作ったついでに、このブログにも『Twitter Widget』を貼り付けてみました。せっかくですので、その手順を共有したいと思います。

手順は、おおまかに

(1) Twitter のページから『Widget』を生成する。
(2) So-net ブログのレイアウトツールで、Twitter の『Widget』を貼り付ける

という単純なものです。

（１）まず、Twitter のページから、『Widget』を生成します。ホーム画面のメニューから設定を選択してください。