きゃべログ

プログラミングや電子工作などについての記事がほとんどです

英語論文の最初の一歩に「英文書類や英語論文で必須の基本表現」

0 件のコメント

研究で英語論文を書くことになりました。現状英語にあまり自信がないため、最低限わきまえるべき事項をおさえたいと思いこの本を読みました。

英文書類や英語論文で必須の基本表現
篠田 義明
南雲堂
売り上げランキング: 704,286

この本は英語書類や英語論文など、口語より堅い英語が求められる場でかなり活きる本だと思います。30のセクションに別れており、それぞれに英語論文を書くにおいて気をつけるべき1つのトピックが書かれています。また、いずれのセクションについてもインプットするための文書の後に練習問題がついており、実際にアウトプットすることで効果的に身につけられる構成となっています。

実はこの練習問題は、大学の講義で課題として出題されたものです。解答ページには著者による解答例だけでなく、課題提出者のよくある誤答例、正答数などが具体的に示されています。また、それぞれに補足説明もあるので理解をさらに深めることが可能です。

インプットの書き方がとても良いです。例えば、「論文において、so,butばかりでは幼稚っぽくなってしまうから気をつける」とよく言われますが、この問題について、どうしてこの記述が問題なのか、改善方法は何なのか、というところがしっかり書かれています。文章量もそこまで多くなく気軽に読めるのに対し、インプットできることは多い一冊になっています。

この本では、より明確に、簡潔に書ける方法を解説しています。どのように書けば伝わりやすいか、何が伝えたいのかを明確にするという書き方を推奨し、トレーニングしてくれるので、英語だけでなく日本語にも応用が効きます。日本語にせよ英語にせよ、意図が掴みづらい文章を書いてしまっていることに悩んでいる方には最適です。

初めて英語による書類作成・論文執筆をされる方で不安を持たれている方には是非おすすめしたい一冊です。

0 件のコメント :

コメントを投稿

【GAS】HtmlServiceのNative, Emulated modeに終了予告

0 件のコメント

Google Apps Script Advent Calendar 201510日目の記事です。カレンダーを埋めるマンとして活躍したいと思います。1日目の@soundTrickerさんがGASの2015年の歩みについて書かれた記事と重複する部分もありますが、以前から書きたかったHtmlServiceの仕様変更のお話を書きたいと思います。

先日、12月18日にGoogleさんからこのようなメールが届きました。このメールはGASでHtmlServiceのNATIVE,EMULATEDモードを使用している人に宛てて送信されているようです。

Please migrate your HtmlService from NATIVE and EMULATED modes to IFRAME sandbox mode.
NATIVE and EMULATED HtmlService modes will be turned off on June 16, 2016.
You are receiving this email because you have an Apps Script project which uses the Native or Emulated mode for HTMLService.
In December 2014, we announced the IFRAME sandbox mode for HtmlService which improves the application’s user interface speed.
Please migrate to IFRAME sandbox mode since it provides a faster UIs and has more capabilities than NATIVE and EMULATED modes.
Much more detail, including a migration guide is available in thisblog post.
Thank you,
The Google Apps Launch Team

要するに、HtmlServiceのNATIVEモードとEMULATEDモードは2016年の6月16日に機能停止するから、IFRAMEサンドボックスモードに変更したほうが良いよという連絡でした。

Apps Script Sunset Schedule | Apps Script | Google Developers
こちらのサポートページを確認したところ、少し期限に関する情報が変更されたようです。移行スケジュールを表にまとめてみます。

日付 内容
2015/11/12 新規スクリプトのデフォルト設定がNATIVEモードからIFRAMEサンドボックスモードに変更
2015/12/10 EMULATEDモードが終了し、すべてのスクリプトはデフォルトでIFRAMEモードにするよう要求
2016/4/28 既存のスクリプトを含め、すべてのスクリプトのデフォルトのデフォルト設定がNATIVEモードからIFRAMEモードに変更
2016/6/30 NATIVEモードは終了し、すべてのHTML Serviceから提供されるHTMLはIFRAMEモードに変更

高速なUIを利用するためにもIFRAMEモードをGoogleは推奨しているようですね。というわけで気をつけましょう。

こちらにIFRAMEサンドボックスモードに移行する方法が詳しく掲載されています。
Migrating to IFRAME Sandbox Mode | Apps Script | Google Developers

0 件のコメント :

コメントを投稿

C#で使える機械学習ライブラリ「Accord.NET」

0 件のコメント

この記事はC# Advent Calender 2015の4日目です。

基礎的なことを書きます。なんてコメントをしていましたが、記事公開日前日にC#に機械学習ライブラリで有名なものがあったかな?という疑問が突然浮かんできたのでこのようなタイトルの記事を書くことにしました。

C#で機械学習をするということ

機械学習をする言語といえば、scikit-learnという機械学習ライブラリやNumPy, SciPy, matplotlibなどの数値計算、グラフ描画のライブラリが充実しているPythonが有名です。他にデータマイニング用のソフトウェアWEKAの実装言語として使用されているJavaも選択肢の一つですね。

また、Googleが2015年11月10日にオープンソースとしてリリースしたTensorFlowという機械学習ライブラリは、Python ,C++から利用可能です。

この現状から、機械学習は圧倒的にPython優勢という土俵と言えますが、これまでC#を使ってきた私としてはC#でも機械学習をやってみたい。そんなモチベーションでこの記事を書きました。

パターン認識と機械学習 上
C.M. ビショップ
丸善出版
売り上げランキング: 28,712

C#で使える機械学習ライブラリ「Accord.NET Framework」

Accord.NET Machine Learning Framework

今回紹介するライブラリはAccord.NET Frameworkというライブラリです。こちらは機械学習に関するオープンソースのライブラリ群で、統計処理や行列計算、ニューラルアルゴリズム、信号処理、画像解析などやりたいことはこれで大体できそうなくらい充実しているようです。胸が高鳴りますね。なお、2015年12月3日現在バージョン3.0が公開されています。githubではソースを見ることも可能です。

できることの一例を紹介

ディープラーニング

深層ニューラルネットワーク、いわゆるディープラーニングを利用することができます。こちらはディープラーニングを利用した文字認識のアプリケーションの例です。

SVM(サポートベクタマシン)

分類器の一種であるSupport Vector Machineを使うこともできます。こちらも文字認識の例です。

ジェスチャコントローラ

画像認識の技術を用いてジェスチャ認識することも可能です。 こちらの例は顔の向きを解析し、ジェスチャとして認識するアプリケーション例です。

HMM(隠れマルコフモデル)

タッチインターフェースのジェスチャ認識をHMMを使用して実装している例です。C#という性質を生かしてWindows PhoneのアプリケーションやWindowsタブレット端末への応用ができそうですね。

カーネル判別分析

カーネル判別分析によりデータの分類もできます。

データサイエンティスト養成読本 機械学習入門編 (Software Design plus)
比戸 将平 馬場 雪乃 里 洋平 戸嶋 龍哉 得居 誠也 福島 真太朗 加藤 公一 関 喜史 阿部 厳 熊崎 宏樹
技術評論社
売り上げランキング: 3,836

サンプルコードを試してみる

Classification · accord-net/framework Wiki

公式ページのサンプルコードを実際に動かしてみたいと思います。環境はVisualStudio 2013を想定しています。

まずはグラフを表示するところから

プロジェクトの作成

C#のコンソールアプリケーションを作成しましょう。 今回プロジェクト名はAccordNetTestとします。

Accord.Net Frameworkのインストール

ツールバーのプロジェクト(P)>NuGetパッケージの管理を選択します。 左カラムのオンラインを選択したのち、検索窓にaccordと入力しましょう。そこから

  • Accord.Controls
  • Accord.Math
  • Accord.IO をインストールしましょう。 ひょっとすると依存関係の都合で同時に何かインストールされるかもしれませんが、気にしなくて大丈夫です。

使用するExcelデータの配置

こちらから今回使用するサンプルのExcelシートを保存します。配置位置はAccordNetTestプロジェクトの bin/Debug/ディレクトリに配置します。

なお、このデータには2次元の数値データと、そのデータの分類の正解のクラス(ラベリング)が記録されています。

ソースコード

Program.csを次のように編集します。便宜上公式のサンプルコードを少し変更しています。

using System.Data;
using System.Windows;

using Accord.Controls;
using Accord.IO;
using Accord.Math;

namespace AccordNetTest
{
    class Program
    {
        static void Main(string[] args)
        {
            //エクセルシートの読み込み
            DataTable table = new ExcelReader("examples.xls").GetWorksheet(1);

            //データテーブルから2次元ベクトルに変換
            double[][] inputs = table.ToArray<double>("X", "Y");
            int[] outputs = table.Columns["G"].ToArray<int>();

            //データをプロットする
            ScatterplotBox.Show("Yin-Yang", inputs, outputs).Hold();
        }
    }
}

ScatterplotBox.Show(string title, double[][] x, int[] z)の各引数は title:グラフのタイトル、x:(x,y)のデータのペア、z:xに対応するラベル、を意味しています。つまりinputにはX,Yのデータの対を格納し、outputにはそのラベルを格納しています。

参照の追加

このまま実行すると「参照されていないアセンブリで定義されています」といったエラーが表示されるかと思います。これはScatterplotBoxというAccord.NETのクラスがSystem.Windows.Formを継承しているためです。またdoubleの二次元配列を使用するためにSystem.Numerics.Complexを参照するみたいです。なのでツールバーのプロジェクト(P)>参照の追加(R)からSystem.NumericsSystem.Windows.Formsの参照を追加します。

実行

実行すると、データはエクセルで定義されたクラス通りプロットされたグラフが表示されます。

ナイーブベイズで分類してみる

先ほどのソースコードを少し編集し、Accord.NETライブラリを活用してデータを分類器にかけてみます。 今回試してみるのはNaive Bayesで、機械学習を勉強した時に初めて目にする分類器だと思います。日訳で単純ベイズ分類器というだけに、ベイズの定理で表せるシンプルな分類器です。

ソースコード

公式サンプルコードのまま実行するとエラーがでます。バージョンアップによる仕様変更が原因だと思いますが、それをサクっと解消して実行しましょう。

using System.Data;
using System.Windows;

using Accord.Controls;
using Accord.IO;
using Accord.Math;
using Accord.Statistics.Distributions.Univariate;
using Accord.MachineLearning.Bayes;

namespace AccordNetTest
{
    class Program
    {
        static void Main(string[] args)
        {
            //エクセルシートの読み込み
            DataTable table = new ExcelReader("examples.xls").GetWorksheet(1);

            //データテーブルから2次元ベクトルに変換
            double[][] inputs = table.ToArray<double>("X", "Y");
            int[] outputs = table.Columns["G"].ToArray<int>();

            // 2入力の分類器を作成
            var nb = new NaiveBayes<NormalDistribution>(classes: 2,
                inputs: 2, initial: new NormalDistribution());

            // ナイーブベイズ分類器はクラスのラベルが0から始まる自然数である必要がある。
            // そのため、-1のラベルを0に変換する。
            outputs = outputs.Apply(x => x < 0 ? 0 : x);

            // ナイーブベイズの度数分布表を初期化
            double error = nb.Estimate(inputs, outputs);

            //構築したモデルでサンプルデータを分類
            int[] answers = inputs.Apply(nb.Compute);

            // 結果をプロット
            ScatterplotBox.Show("Expected results", inputs, outputs);
            ScatterplotBox.Show("Naive Bayes results", inputs, answers)
                .Hold();
        }
    }
}

実行

実行すると2つのウィンドウが表示されます。 Expected resultsという名前のウィンドウには先ほど表示したものと同じ正解のグラフが、 Naive Bayes resultsという名前のウィンドウにはNaiveBayesで分類した結果のグラフが表示されます。

事例+演習で学ぶ機械学習 ビジネスを支えるデータ活用のしくみ
速水 悟
森北出版
売り上げランキング: 14,321

サンプルが動いたら

今回動かしてみたのは分類問題ですが、画像処理や音声信号処理など色々できるので公式ドキュメントを読んで色々遊んでみてください!

Sample gallery - Accord.NET Machine Learning in C#
公式のサンプルが非常に充実しています。 是非参考にしながら使ってみてください。

Framework modules
また、リファレンスが詳しく丁寧に書かれているので困ったらこれを読むといいと思います。

まとめ

今回初めてAccord.NETというライブラリを触ってみましたが、簡単なコードで機械学習を実装できます。 ちょっと凝ったアプリケーションを作ってみたい人や、研究における検証にも使えるのではないでしょうか。 今後Unityのコードに埋め込んで活用するという例も出てきそうですね。(出来るかはよくわからない) 以上C#コーダのための機械学習ライブラリの紹介でした。

ITエンジニアのための機械学習理論入門
中井 悦司
技術評論社
売り上げランキング: 1,911

0 件のコメント :

コメントを投稿

言語やフレームワークのロゴ700種以上がベクタで入手できるサイト

0 件のコメント

プログラミング言語やフレームワークのロゴ700種以上が手に入る

使用した技術をおしゃれにロゴを使って示したい場面ってまぁまぁあると思いますが、そんな時に役立つサイトを見つけました。

SVG PORN — 700+ high quality svg logos

PORNなんて単語がページ名に入っているので何かやらしいサイトなのかと思ったら、そんなこともなく単に便利なページでした。しかも拡張子がSVGというベクタ形式の画像データなので拡大しても画質が粗くならないのが嬉しいところです。

使い方

まずアクセスすると、こんな感じのページが表示されます。

検索窓があるので、お目当ての言語名やフレームワーク名を入力してみましょう。今回はandroidのロゴを探したいので入力してみます。「an」を入力するとインクリメンタルサーチでお目当ての画像が早速出てきてくれました。

もちろんフルネームで入力すると絞られて出てきます。便利。 出てきた画像自体がSVGなので、そのまま保存すればOKです。

まとめて全部保存したい場合

GitHubのリポジトリにすべてまとまっているので、クローンしちゃうかZIPでダウンロードするといいと思います。
gilbarbara/logos

おまけ

タグクラウドを表示できる機能もあるのですが、タグが大量すぎて正直あまり使えません(笑)

0 件のコメント :

コメントを投稿

[Android]ListViewにヘッダやフッタをつけた場合に、クリックイベントにおけるエラーを回避する方法

0 件のコメント

AndroidでListViewにaddHeaderView()addFooterView()を使うことでヘッダやフッタを付けることができます。その場合、ヘッダやフッタにそれ以外のアイテムと同じような動作を適用するとエラーが起こってしまうことがあります。 ヘッダやフッタにはそのような動作を適用したくない場合には下のように記述すると回避できます。

    public void onItemClick(
            AdapterView parent,
            View view, int position, long id){
        if( position > 0 && position < ((ListView)parent).getCount() - 1){
            //ここにヘッダやフッタ以外のアイテムに適用したい動作を含める
      }
    }

ポイントはviewの親となるListViewであるparentのアイテム数を数えて最初と最後は処理から省くというところですね。

0 件のコメント :

コメントを投稿

Qiitaの未読・既読を管理するChrome拡張を公開しました

0 件のコメント

概要

Jonda(よんだ)は「気になった記事をストックしたままにしない」を実現するChrome拡張です。ストックしてある記事の消化を効率化します。

機能

  • 既読/未読を管理、可視化、変更
  • ストック記事一覧ページに未読/既読ボタンを配置
  • 検索結果の記事一覧にもボタン設置可能
  • 記事中からも既読/未読の切り替えが可能

インストール方法

Chromeで次のURLを開いてインストールしてください。
Jonda -Qiita既読管理- - Chrome ウェブストア

参照

GitHubでソースも公開しています。
cabbage63/jonda

詳しい説明とかはこちらにあります。
Qiita記事の既読/未読を管理するChrome拡張を作ってみた - Qiita

使い方

忙しい人のための使い方

  1. 上記URLより拡張をインストール
  2. Chrome拡張機能の管理画面からJondaのオプションを開いて好みに応じてセッティング
  3. Qiitaにアクセス
  4. 既読管理が可能に!

設定の変更方法

Chromeのメニュー>その他のツール>拡張機能でこのアプリを探し、オプションをクリックすることで設定が変更できます。ここではどの記事を管理範囲にするかを設定できます。 初期設定ではすべてのユーザのストックを管理するようになっていますが、自分のストックのみ管理するように変更することも可能です。検索結果のボタン表示/非表示もこちらで設定できます。

ボタンが表示されるページ

  • ユーザのストックした記事
    – qiita.com/[ユーザ名]/stock
  • 検索結果
    – qiita.com/search?utf=8….
  • 記事のヘッダ
    – qiita.com/[ユーザ名]/items/[記事ID]

文字が読みたくない人のための使い方






さいごに

是非使ってみてください!
機能に関するご意見があればChrome Webストアかこちらのコメントでお願いします。

0 件のコメント :

コメントを投稿

キーワードに関係する論文をRSSフィードとして確実に取得する方法

0 件のコメント

研究をしていると、特定のトピックやキーワードに関する新しい論文は追跡したいもの。だけど毎日チェックするというのは面倒ですね。

そこで任意のキーワードに関連する論文をRSSで購読できる方法を発見したのでご紹介します。

CiNiiの検索を利用

CiNiiの検索結果はRSSフィードとしても活用できるらしい。
これを任意のRSSリーダーに登録することで特定のトピックを追跡できるらしい。

CiNii全般 - メタデータ・API - サポート - 学術コンテンツサービス - 国立情報学研究所

実際にやってみる

まずは検索しましょう。[CiNii](http://ci.nii.ac.jp/)にアクセスして、追跡したいキーワードで検索します。今回は「スマートフォン」について知りたいとしましょう。

Feedlyで購読してみる

Feedlyのフィード検索窓に、先ほどの検索結果の画面のURLを貼り付け、検索しましょう。

フィードの一覧が出てきましたね。おそらくどちらを登録しても大丈夫なのですが、今回は左のものを登録します。

フィード一覧から先ほど登録したものを選択すると、無事登録出来ています。論文というよりはブログの記事みたいなタイトルのものが多くてわかりづらいですが、これで論文の追跡ができます。特定の学会のもののみ購読したい場合はCiNiiの検索時に詳細検索をすると良いと思います。

別の方法

アドレスバーにRSSのアイコンが出ていれば、RSSリーダが対応している場合ここから直接登録出来るかもしれません。

まとめ

論文検索結果をRSSフィードとして購読し、特定のキーワードの論文を追跡することを可能にしました。 これまでルーティンワークとして論文検索をかけていた方は利用してみてください。

0 件のコメント :

コメントを投稿

【Railsチュートリアル10章】マイクロポストのサンプルデータ生成できない問題

0 件のコメント

Railsチュートリアル10章の10.2.2「マイクロソフトのサンプル」のところで問題が生じました。allメソッドの引数の数が期待される数と違う、とのことで色々調べてみたところ、limitの使い方がおかしいらしい。

lib/tasks/sample_data.rakeを以下のように変更すればよい。

#users = User.all(limit: 6)
users = User.all.limit(6)

最近Railsチュートリアルでハマってばっかりだなあ。

参考

limit - リファレンス - - Railsドキュメント

0 件のコメント :

コメントを投稿

Rails Tutorial 8章9章 フラッシュメッセージのCSSが適用されない問題の解決方法

0 件のコメント

前回の記事では7章のCSSが上手く反映されない問題について説明しました。
Rails Tutorial7章でBootstrapのCSSが反映されない問題

Bootstrap3を使用していると、8章と9章においてもCSSのスタイルが反映されないところがあるので補足しようと思います。いずれのパートにおいても対応方法が2種類あります。

8章のアラートに色がつかない

Bootstrap3を使用している方は8.1.5節のフラッシュメッセージに図8.6のような赤色のスタイルが適用されません。これは仕様変更にともなって、赤色のスタイルが適用されるクラスがalert-errorからalert-dangerに変更されたためです(記事末の参考を参照)。

sessions_controller.rbを編集する方法

app/controllers/sessions_controller.rbのflashを発生させる部分を変更させます。具体的には
flash[:error]flash[:danger]に変更することで解決できます。

custom.css.scssを編集する方法

app/assets/stylesheets/custom.css.scssに下記のコードを追加します。
CSSクラスをそのままにしておきたい場合はこの方法が良いでしょう。

.alert-error{
    @extend .alert-danger;
}

これにより、alert-noticeクラスにもalert-warningのスタイリングが適用されるようになります。

9章のアラートに色がつかない

Bootstrap3を使用している方は9.2.1節の図9.6のように、アラートの背景が黄色くならないと思います。これは仕様変更にともなって、黄色のスタイルが適用されるクラスがalert-noticeからalert-warningに変更されたためです(記事末の参考を参照)。

users_controller.rbを編集する方法

app/controllers/users_controller.rbのsigned_in_userを以下のように変更します。

def signed_in_user
    #元の
    #redirect_to signin_url, notice: "Please sign in." unless signed_in?
    redirect_to signin_url, warning: "Please sign in." unless signed_in?
end

すなわち、notice:warning:に変更すればよいです。

custom.css.scssを編集する方法

app/assets/stylesheets/custom.css.scssに下記のコードを追加します。

.alert-notice{
    @extend .alert-warning;
}

これにより、alert-noticeクラスにもalert-warningのスタイリングが適用されるようになります。

参考

Migrating to v3.x · Bootstrap

0 件のコメント :

コメントを投稿

Rails Tutorial7章でBootstrapのCSSが反映されない問題

0 件のコメント

Rails TutorialのRails4.0版に取り組んでいるのですが、指示に逆らってgemをすべて最新版を入れているので非常にエラーが多いです。
同じようにGemfileにバージョン指定をせず、最新版をインストールして勉強している皆さん向けの記事です。

問題の部分

Rails Tutorial 7章のフォームにスタイルを着ける部分で、図7.18と自分の作成したアプリの表示が異なり、首をかしげる。
完全に写経できたはずなのにフォームにエラーのスタイルが反映されない……。具体的には

  • The form contains 〜 errors.
  • エラーが生じているフォーム部分

が上手く表示されていない。

対処方法

調べてみるとBootstrapのバージョンが2から3に伴う仕様変更のせいらしい。

The form contains …のところの問題

問題はdivタグのalert-errorクラスがバージョン3でalert-dangerに変更された点である。そのため、該当部分を変更する。

app/views/shared/_error_messages.html.erb
<% if @user.errors.any? %>
  <div id="error_explanation">
    <div class="alert alert-danger">
      The form contains <%= pluralize(@user.errors.count, "error") %>.
    </div>
    <ul>
    <% @user.errors.full_messages.each do |msg| %>
      <li>* <%= msg %></li>
    <% end %>
    </ul>
  </div>
<% end %>

フォームのスタイルが変わらない問題

仕様変更により、フォームの要素にクラスを追加する必要があるらしい。ラベルにはcontrol-labelクラス、テキストフィールドにはform-controlクラスを付与する。

app/views/users/new.html.erb
<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<div class="row">
    <div class="span6 offset3">
        <%= form_for(@user) do |f| %>
            <%= render 'shared/error_messages' %>

            <%= f.label :name, class: "control-label" %>
            <%= f.text_field :name, class: "form-control" %>

            <%= f.label :email , class: "control-label" %>
            <%= f.text_field :email, class: "form-control" %>

            <%= f.label :password, class: "control-label" %>
            <%= f.password_field :password, class: "form-control" %>

            <%= f.label :password_confirmation, "Confirmation" , class: "control-label" %>
            <%= f.password_field :password_confirmation, class: "form-control" %>

            <%= f.submit "Create my account", class: "btn btn-large btn-primary" %>
        <% end %>
    </div>
</div>

結果

以上を適用すると下のような感じになる。

なんか思っていたのと少しだけ違うけど、まあいいかと妥協できるレベルに。
エラーメッセージがインデントされている理由はわからないけど、見やすくなった気がするから良し。
Confirmationのスタイルが適用されていないのは検証がうまくいっていないからかな?

参考

Migrating to v3.x · Bootstrap
1つ目の問題に関するサンプル
2つ目の問題に関するサンプル

0 件のコメント :

コメントを投稿

Emmetで簡単に既存のタグを他のタグで囲む方法

0 件のコメント

外側にタグを追加するのは面倒

Emmet-Vimを使用していますが、例えば次のコードの外側を<div>タグで囲みたいとします。
<!-- これを -->
<p>
    I am a vimmer.
    As yet I have no name.
    I've no idea where I was born.
</p>

<!-- こうする -->
<div>
    <p>
        I am a vimmer.
        As yet I have no name.
        I've no idea where I was born.
    </p>
</div>
まともに変更しようとすると、まず<p>の上に<div>を入力して、</p>の下に移動して</div>を入力するといった手間がかかります。
これを少しのコマンドで簡単に行いましょう。

Emmet-Vimを使用して入力文字数を削減!

以下に手順を紹介します。

今回の例では、
1. <p>タグの行でShift + v(Visual Lineモードに切り替え)
2. </p>タグの行へ移動
3. Ctrl + Y,を入力
4. VimのステータスラインにTag:と表示されるのでdivと入力

これで希望のコードが生成できます。

手順を一般的に書くと
1. 囲みたい部分の最初の行でShift + v(Visual Lineモードに切り替え)
2. 囲みたい部分の最終行へ移動
3. Ctrl + Y,を入力
4. VimのステータスラインにTag:と表示されるので挿入したい任意のタグを入力

複数のタグで囲みたいときに本領発揮

先ほどの例では、作業手順数に大差がないため、あまり有効性を感じられなかった方もいらっしゃると思います。この手法が真に力を発揮するのは複数のタグで囲む場合です。次の例を紹介しましょう。
<!-- これを -->
<p>
    I am a vimmer.
    As yet I have no name.
    I've no idea where I was born.
</p>

<!-- こうする -->
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <p>
                    I am a vimmer.
                    As yet I have no name.
                    I've no idea where I was born.
                </p>
            </div>
        </div>
    </div>
</body>

一気に面倒な作業に感じますね。
これでも簡単に変更できるのがEmmetのスゴい所。

手順3までは先ほどと同様で、異なる点はTag:以降に記述するコマンドのみです。Tag:以降に次を入力してください。
body>div.container>div.row>col-md-4

期待どおりのコードが生成できたはずです。
つまり、Emmetの記法をそのまま使って任意の選択箇所をタグで囲むことが可能ということになります。

Sublime TextのEmmetでも同様な操作が可能だと思います。ぐぐってみたところAlt + Shift + wらしいです。動作確認していないので保証はしませんが!

0 件のコメント :

コメントを投稿

Affinity DesignerとSketchのどちらが買いなのか

0 件のコメント

2016/2/21追記


Affinity Tips – Affinity製品の使い方ガイド
Affinity Designの操作方法やチュートリアルを紹介するWebサイトを開設しました! もしこの記事をきっかけにAffinity Designerを使うことになったら是非読んでくださいね! まだまだ記事数は少ないですが、どんどん更新していく予定です。

Macで使えるベクタードローツールを探していた

Windows環境ではフリーのソフトを簡単に導入できたのだが、Macではなかなか良いのが見つからない。そして有料のソフトを検討しはじめた。Adobe Illustratorの永続ライセンス販売を終了し、使用期間に対して課金するプランになり早2年、依然としてドローツールといえばIllustratorだが導入を悩んでしまう。やはりソフトは買い切りのものがいいという考えが捨てられず、App Storeで販売されているベクタドローツールから選ぶことに。

なんか色々あるけど…

App Storeのランキングを見たところ、ベクタドローツールはかなりの数存在するようだった。例えば、

  • iDraw(3000yen)
  • Affinity Designer(6000yen)
  • Sketch 3(11800yen)
  • Eazy Draw(120yen)
などである(価格は2015/8/7現在のもの)。ただし今回は高機能のものに絞りたかったのでAffinity DesignerとSketchの二択にすることに。

配色デザイン見本帳 配色の基礎と考え方が学べるガイドブック
伊達千代
エムディエヌコーポレーション
売り上げランキング: 19,104

Affinity DesignerとSketchとAdobe Illustratorを比較

Scott Lewisさんの記事を参考に比較してみる。
Can Sketch or Affinity designer replace Adobe Illustrator?

カスタムグリッド

イラレとSketchはグリッドサイズをカスタマイズして使用することが可能。Affinity Designerは現在は対応していない(実装予定ではある)。

シェイプツール

3ツールいずれも長方形や三角形、楕円などの基本的な幾何学図形は描画できる。Affinity Designerは他にも20種類ほどの形を描画することが可能。

ペンツール

イラストレータが機械的なペンのような感覚であるのに対し、他の2つのツールはチョークで描くような感覚らしい。

線の連結

形を分離したり、点をつないだりする機能がないことは考えられない。イラレではよくこの機能を使うが、Sketchにはこの機能が見当たらない。
Affinity Designerではノードツールで2点を選択することにより連結ができる。

パスファインダ

2つの図形を合体させたり、引き算したりする機能であり、イラレではもちろん備わっている機能である。
Sketch、Affinity Designerでもこれに類似した機能は存在する。パスファインダの処理を行った後でも、2つの図形を個別に編集できるところがイラレと異なる点である。

スナップ機能

点やグリッドにマウスカーソルを吸着させて、きれいな線を引くための機能である。イラストレータには優れたスナップ機能が存在し、Sketchにもそれに近い機能が存在する。
Affinity Designerはその2つに比べると直感性や容易さに欠ける。

ピクセルプレビュー

ベクタ画像をピクセルモードで出力した際にどう表示されるかは3つのツールいずれにも搭載されている。
Affinity DesignerはRetinaディスプレイでの表示のシミュレーションも可能な点において他より優れている。

アートボードの数

1つのファイルにアートボードを含める事ができると、アイコンの作成の際、様々な形式で出力させたりファイル名の設定が用意になる。
イラレとSketchにはこの機能がある。ただしイラレは1つのドキュメントにつき100までしかアートボードを作ることができない。
Affinity Designerには現在このような機能は存在していない。しかし今後実装予定である。

ファイル出力

イラレではアートボードをSVG、PNG、EPSなど様々な形式で出力することが可能である。
Sketchは更に優れており、アートボード毎に異なるフォーマットを指定して出力することが可能である。例えば、512*512のアイコンはPNG形式で、32*32のアイコンはSVGで保存する、などである。Affinity Designerではアートボードの制限のため、同時出力い対応していないが、直感的なダイアログにより様々な形式で画像を出力することが可能である。

ファイルインポート

イラレはこの機能においては特に優れている。PDF、EPS、SVGはもちろんのこと、その他30の形式のファイルをインポートすることが可能である。
Affinity Designerは特に問題なくSVG、EPS、PDF、さらにAi(イラレの独自形式)もインポート可能である。欠点を挙げるとすれば、Aiファイルをインポートしたときにグループ化したオブジェクトのグルーピングが解除されてしまうことである。
一方Sketchはこの分野には弱い。Aiファイルはサポートしていない上、対応する拡張子はSVG、EPS、PDFに限られる。

カスタムスクリプト

スクリプトが使えることにより便利なプラグインなどが使用可能になる。イラレはJavaScriptによるスクリプトコーディングが可能である。
SketchはCocoaScriptによるコーディングが可能である。
Affinity Designerにはスクリプティング機能はないが、今後AppleScriptによるスクリプティングが可能になると言われている。

まとめると

Adobe Illustrator
メリット
  • 成熟しているため情報を得やすい
  • 約10年も使用され続けている
  • 広く普及している
  • 写真編集ツールとDTPツールと連携できる
デメリット
  • 定期使用料がかかるのは不人気
  • 利用するトータルコストが高い
  • アートボード数の制限が100
  • アートボードごとにグリッドをカスタマイズできない
Sketch
メリット
  • たったの100ドル
  • 予め用意されたアイコンのテンプレート
  • 同時に他のサイズ・形式・場所に出力可能
デメリット
  • Macでしか使えない
  • ドローツールが不正確
  • 少し機能がかけている(点の連結・ダイレクト選択ツールなど)
  • UIの標準と離れている(Command + Spaceでズームなど)
Affinity Designer

メリット
- たったの50ドル
- Ai程広範囲ではないがユーザの欲しい機能が揃っている
- UIはAiによく似ているため親しみやすい
- ズームがいくらでもできる
デメリット
- Macでしか使えない
- アートボード数制限
- スクリプトが使えない
- バッチ処理が出来ない
- グリッドがカスタムできない

絵はすぐに上手くならない
成冨 ミヲリ
彩流社
売り上げランキング: 4,308

Affinity Designerの有用性

次にDeborah Johnsonさんによる記事を参考にAffinity Designerの長所を見てみる。
この方はSketchをこれまで長い間使ってきていたそうで、両方の経験を活かしたレビューをしている。その上でAffinity Designerをプッシュしている立場のようだ。
英語なので日本語で要点をまとめてみる。
Affinity Designer, Sketch, and Why You Don’t Have to Choose — Design Process — Medium

ラスタデザイン機能の有無

Affinity Designerにはラスタ画像編集の機能があり、Sketchにはない。そのため今回はベクタツールとしての機能に着目して比較している。

洗練されたペンツール

ペンツールはAffinity Designerのほうが優れているらしい。
基本の接点タイプがあるのに付け加え、点同士を連結・連結を解除したり、曲線を分断するボタンが存在する。

ブラシのカスタマイズ性

たくさんの独創的なベクタ・ラスタのブラシが使え、修正したりできる。自作することも可能。

ライブビュー

ブラシやブレンドモデル、レイヤ切り抜きやマスキングなどの効果をリアルタイムにプレビューすることが可能である。適用する前に実際に見ることが出来るのはとても便利。

スニッピングツール

簡単にオブジェクトを配置することが可能で、オプションはオブジェクト毎にカスタマイズできる。

履歴

Sketchユーザが切望していた、履歴をリストに列挙した機能がある。これにより簡単に過去のある時点に作業を戻すことができる。サイドバーでさっと履歴を見ることが出来る。

マスキングとレイヤクリッピング

Sketch3.1のアップデートによるマスキングに関する大幅な改善を考慮してもSketchよりAffinity Designの方が使いやすい。ドラッグ&ドロップでレイヤーを素早くクリッピング・マスキングすることが可能。

オブジェクト挿入モデル

オブジェクトを新たに作る際に、既存のオブジェクトに入れ子の中に作成することが可能。これにより入れ子構造を効率的に実現出来る。

レイヤ効果と修正

Affinity Designerにはベベル・グラデーションオーバレイ・3D効果など様々なレイヤ効果がある。レイヤ修正にもポスタライズなどたくさんの選択肢がある。

さらに多い色空間

Affinity DesignerはRGBだけでなくたくさんの色空間を用意してある。最も良い例がCMYK。

ドキュメントサイズの単位

インチやミリメートルなどで指定も可能。印刷物に対するサポートも厚い。

ではSketchは良くないのか?

Affinity DesignerとSketchは大きく異なる、いずれも素晴らしいツールである。Affinity Designerは機能が充実しているため複雑なベクタ画像の制作や詳細なアイコンの作成に適している。一方SketchはUIデザインやレイアウト作成など、基本的なベクタ画像の制作に有効である。つまりどちらも試してみる価値があるツールである。

結論

ものすごいスピードでIllustratorに追いついているとネットでの評判が高いAffinity Designerを導入することにしました。まだリリースから間もないことを考慮し、今後のアップデートにも期待したいと思います。
さっそく触ってみましたが、わくわくする感じ。使いこなせて面白いデザインができたらアップロードします。

Affinity Designer

Sketch
(App Storeでの配布は終了したようです。)

デザインのルール、レイアウトのセオリー。
伊達千代
MdN
売り上げランキング: 6,336

0 件のコメント :

コメントを投稿

pyenvでバージョンが切り替えられなくて苦労した話

2 件のコメント

2016/7/7追記

pythonを呼び出すときに優先してpyenvのpythonを呼び出すように初期化するコマンドを実行してみるといいかもしれません。 eval "$(pyenv init -)" これを実行して直ったら下記の手順を踏まなくても大丈夫ですね。

pyenvで指定したpythonが起動しない

ここまでのあらすじ

  • pyenvインストールしたった!
  • yyuu/pyenvリポジトリのreadmeの通りにPATH通したった!
  • いくつか違うバージョンのpythonインストールしたった!

意気揚々と使い出すがしかし……

  • $ python local 3.4.3でバージョン指定したった!
  • $ python -V (エンターキーターン!!)
  • Python 2.7.10
  • あれ?3.4.3指定したのに
  • 一応globalも指定してみて試すか $ python global 3.4.3
  • $ python -V 今度こそ!(エンターキーターン!!)
  • Python 2.7.10
        /\___/ヽ   ヽ
       /    ::::::::::::::::\ つ
      . |  ,,-‐‐   ‐‐-、 .:::| わ
      |  、(o),:  (o), :::|ぁぁ
    .   |    ::<      .::|あぁ
       \  /( [三] )ヽ ::/ああ
       /`ー‐–‐‐―´\ぁあ

確かな力が身につくPython「超」入門 (確かな力が身につく「超」入門シリーズ)
SBクリエイティブ (2016-03-16)
売り上げランキング: 19,659

解決編

怪しかったところ

なんでうまくいかないのかと、とりあえず$ which python実行すると、usr/local/bin/pythonが返ってきた。~/.pyenvを通ってないのはおかしい。

HomebrewでインストールしたPythonのせいだった

さっき返ってきたusr/local/bin/pythonっていうのは昔Homebrewでインストールしたpythonだったんですね。brew listしたらやっぱりいました。ということで

$ brew uninstall python
Uninstalling /usr/local/Cellar/python/2.7.10_2... (4906 files, 77M)
を実行。さよならぱいそん……
そして$ python -Vを実行すると、無事Python 3.4.3が返ってきました。めでたしめでたし。

Pythonスタートブック
Pythonスタートブック
posted with amazlet at 16.08.26
辻 真吾
技術評論社
売り上げランキング: 3,122

2 件のコメント :

コメントを投稿

Vagrantの仮想マシン内のRailsサーバにブラウザから接続出来ない時の対処法

0 件のコメント
  • 仮想マシンを使わずに直接rails sしてみるとうまくいく。
  • 仮想マシン上のhttpサーバには接続できる。
  • でもrailsサーバには接続できない→なんで?
という状態でした。
というわけでハマっていた所の対処について説明します。

ググってみたがその方法だけでは上手くいかなかった

ググってみたところ以下の記事が出てきました。
Vagrantの仮想環境でrails serverで動いているアプリケーションにMacのブラウザからアクセスしてみる | Fuzz blog
よくあるハマりポイントはポートフォワーディングとか
基本的にRails 4.2未満のバージョンではこれでサーバにブラウザからアクセスできるはずです。問題はRails4.2の場合です。

Rails 4.2の仕様変更

Ruby on Rails 4.2 リリースノート | Rails ガイド
注目していただきたいのは、上記ページの3.3節の2パラグラフ目です。
ただし、今回の変更により、別のPCからRailsサーバーへのアクセスは以前と同じようにはできなくなります。たとえば、development環境が仮想マシン上にあり、ホストマシンからこのdevelopment環境にアクセスする場合などがこれに該当します。
このような場合、サーバーを起動する際にrails server -b 0.0.0.0とすることで、以前と同じ動作を再現できます。
仮想マシンも上記の別のPCの例外ではありません。
なので先ほどの設定を終えた場合であればrails server -b 0.0.0.0とすることにより万事解決です。私は今回無事にWelcome aboard 画面を拝むことができました。

まとめ

  • ここに従って仮想マシンの設定をする。
  • 駄目ならオプション付きのrails server -b 0.0.0.0でサーバを立てる。

0 件のコメント :

コメントを投稿

VagrantとVirtualBoxの関係

0 件のコメント
最近Webのお勉強、とくにRailsの勉強をやっています。
その過程でVagrantを使ってみたりしているのですが、なかなか理解が難しい。
Vagrantは仮想マシンを構築するツールです。

VagrantとVirtualBoxはどう関係している?


使いながらもよくわからなくて気持ち悪かったのは、Vagrantの導入とセットでインストールするVirtualBoxとの関係でした。というのもVagrantを使っているとガッツリとVirtualBoxの操作をすることがあまりない。

わからないまま両方をとりあえずインストールしたのですが、気になって調べた所以下の記事が。
  初心者のための Vagrant, Chef, VirtualBox の関係 - Qiita

この記事によると、簡単に説明すればVagrantは仮想マシンであるVirtualBoxを操作する役割をしているとのことでした。なんとなくスッキリ。

ついでにもう一件。Vagrantを使う意味がわかりやすく書いてあるので、まったくわからなかった時期に役立ちました。
FuRyu Tech Blog » Blog Archive » この春エンジニアなった君に使って欲しいVagrant

0 件のコメント :

コメントを投稿

QiitaにUnity,Python関係のTipsを3件投稿しました

0 件のコメント
久々の投稿になりますね。
こちらにも何か新しい記事が書けたらと思いつつ、他で色々活動しております。
さて、空白の3ヶ月ほどにやったことの一つとして、QiitaにUnity関係のTipsを3件投稿しました。


プログラムの勉強をしていると、かなり検索に時間のかかる落とし穴があるので、そういうのをまとめています。よろしければ参考にどうぞ!

0 件のコメント :

コメントを投稿

PHP 文字列を比較するときの注意(パスワード認証の実装など)

4 件のコメント

先日PHPをいじっているときに躓いたところについてメモ。txtファイルから引っ張ってきた文字列と、フォームの送信データの一致を確認したいときに上手くいかなくて1時間ほど悩みました。例えばパスワードの一致不一致を判定するときなんかにそのまま使えそうなノウハウですね。同じことで困ってるどなたかの役に立つと信じてシェアします。

文字列比較の演算子は===を使う

文字列を比較する際に、他の言語と同様に==を使っていたのですが、どうもよくないらしいです。 この演算子を使っていると数値と文字列の比較をする際に、文字列が数値に変換されるようです。

では、何を使うか。===を使うのです。他の言語ではあまり見慣れないのですが、これも同値性を返す演算子です。 二つの違いは、型の相互変化を行うかどうかにあります。 (PHP: 比較演算子 - Manual) ==は型の相互変換を行ったうえで比較をし、===は同じ型の変数を比較することを前提に比較をします。 ですので、文字列同士を比較する際には、===を使う必要があるのです。

参考サイト
素晴らしき自動的な世界~或いは「型のない」世界~ - がるの健忘録

余計な半角スペースなどを取り除く

今回特に悩んだのはこの部分でした。 テキストファイルから文字列を抜き出すときに半角スペースが一緒に取り出されてしまうことがあります。 これをフォームに直接入力したものを比較すると一致の判定が上手くいきません。

例えば、フォームから値を取ってきて、テキストから読みだした文字列$sampleと比較する「$_POST('input') === $sample」みたいな場合ですね。 フォームで、「pass」と入力し、$sampleのテキストも「pass」を読み込みました。 どうしてかわからないけれども、echoで表示したところ$sampleの中身は「pass 」というもので、そりゃあ一致しないよなという自体でした。 この半角スペースがどう入ったかよくわからないのですが、そろえる為に入力した文字に半角スペースを加える記述をしたのですが、結果はfalse。 文字コードが違うのか、単純な半角スペースではないのかどうかわかりませんが、上手くいきませんでした。 よくよく考えたら、半角スペースを加えるよりは、取り除く方が素直な解決法だと思いました。 ここで使える関数がtrim()というものです。(PHP: trim - Manual) これは引数に与えた文字列の最初と末尾にあるスペースやタブなどを除去してくれます。 trim($sample)としてやることで、「pass 」が「pass」になってくれます。 こうして先ほどの比較文はtrueと上手くいったのでした。 trimは汎用性の高い文字処理関数なので積極的に取り入れていきたいですね。

いきなりはじめるPHP~ワクワク・ドキドキの入門教室~
谷藤賢一
リックテレコム
売り上げランキング: 3,435

【2016/10/24追記】改行コードなどが文字列の中ほどにある場合

上でご紹介したパターンでは文字列の最後に半角スペースが存在するというものでした。 txtファイルから読み出した場合改行(\n)が含まれることが多いはずです。 こちらもうまく読み出しのタイミングでパースできていれば問題ないのですが、比較の際に邪魔になることがあります。 改行も文字列の末尾にあれば問題ないのですが、文の間にちょくちょく挟まるパターンだとtrim()が適用できません。 文字列の頭、末尾以外にある文字を置き換える方法について説明します。

「trim(string $str)」は$strの開始や末尾のタブやスペース、キャリッジリターンなどを削除してくれる関数です。すなわち"hoge や" hoge"、あるいは"hoge\n"などはうまく"hoge"にしてくれます。 ただし"hogehoge hogehoge"のように文字列の最初と最後以外に消したいものがあっても消すことはありません。 こういうときにはstr_replace()を使うとよいでしょう。 たとえばstr_replace( " ", "", "hogehoge hogehoge")としてやると"hogehogehogehoge"のように空白を出力してくれます。 第一引数が検索文字列、第二引数が置換文字列、第三引数は検索・置換対象の文字列です。
PHP: str_replace - Manual

4 件のコメント :

コメントを投稿

C# カレントディレクトリから相対パスでディレクトリを作成する

0 件のコメント

今日,フォームアプリを作成中に少しだけ躓いた点についてです. よく使いそうなのでシェアしておきます.

相対パスを使ってディレクトリを作成する

ディレクトリ作成について検索すると絶対パスを使って作成するサンプルが多く,相対パスで作成するものがなかなか見つからなかったので,ちょこっと工夫してコーディングしました(工夫のうちに入らないかもしれない).コードは以下の通りです.

System.IO.DirectoryInfo di = new System.IO.DirectoryInfo(System.IO.Directory.GetCurrentDirectory());
            di.CreateSubdirectory("child");
            di.CreateSubdirectory("child\\child");

ディレクトリ情報を保持するクラスである,DirectoryInfoのオブジェクトを作成し,その中にカレントディレクトリを登録します.
そしてカレントディレクトリを元にサブディレクトリを作成するという流れです.
実行結果としては,2行目で\childが作成され,3行目で\child\childが作成されるという流れです.

参考ページ
フォルダを作成、削除、移動(名前の変更)する: .NET Tips: C#, VB.NET

0 件のコメント :

コメントを投稿

Unityで実装されたスーパーマリオ64をブラウザで遊んでみた

0 件のコメント

NINTENDO64のゲームソフト,スーパーマリオ64をUnityでリメイクしたものが公開されています。 作者はカナダのコンピュータサイエンスを専攻する学生だそうです。 学生個人でもこのレベルまでできるのかと驚きました。なお、全ステージ遊べるというわけではなく、最初の1面だけです。
情報元
最新技術でリメイクされた「スーパーマリオ64」のブラウザ・ダウンロード版が公開中 - GIGAZINE

遊び方

ダウンロード版はこちらから利用できます。
Super Mario 64 HD | Roystan Ross
Webブラウザで遊ぶ方はこちらからまずUnityのWebプレイヤーをダウンロード・インストールします。
Unity - Web Player Download
続いてこちらにアクセスすればロードが完了次第遊ぶことができます。
Unity Web Player | SuperMario64HD

実際に遊んでみた


こちらが最初に現れる画面です。緑のボタンを押せばキーコンフィグ、スターを押せばゲームスタートです。


ゲームが始まるとお馴染みの第1面が。ちなみにボム兵とは会話できません。殴りつけるだけになってしまいます。また、大砲で飛んでいくこともできません。しかし原作よりも綺麗なグラフィック。素晴らしい。


ワンワンはいませんでした。杭をヒップドロップするとコインがもらえます。


穴の中をワープできるというところまで忠実に再現されています。お花畑の中でワープできるところも健在です。芸が細かい。

アクションは全て再現されています。幅跳びやカベキックができたことには感動しました。カベキックに関してはNINTENDO64でやるよりはるかに難易度は高いですが。スペックの良いPCであれば昔よりヌルヌル動くスーパーマリオ64に感動すると思います。大企業がコンシューマー向けに制作したゲームが、個人が作ることができるとはすごい時代になったものです。Unityはモノづくりを大きく変えたんだなあと改めて感じました。

以下ネタバレ

ゲームを進めていった先の話が書いてあります。自分で何とかしたい方はスキップしてください。白文字にしているので、見たい方は選択してコピーしたりして読んでください。

画像1
コインを100枚集めると突如としてマリオが金色になりました。隅々まで走り回らないと100枚集まらないのでなかなか大変でした。この隠しモードではマリオがただ金色になるだけではありません。山から鉄球が落ちてきても……

画像2
鉄球が粉々になりました。なお、クリボーやボム兵に当たっても敵が金色になって粉々に砕けてコインをドロップします。爽快です。ちなみに高い所から落ちると、ちゃんとダメージを受けます。無敵というわけではないのですね。1000枚コインを取ったらどうなるのでしょうか、時間のある方は試して教えてください。

0 件のコメント :

コメントを投稿

自動ドアの必要性と...

0 件のコメント

自動ドアは便利である.今回はボタンを押したら勝手に開くセミオートタイプではなく,人感センサにより近づくと開いてくれるタイプを意味している. 両手がふさがっているときには近づけば開いてくれる.なんて素晴らしいんだ,と思っていたのですが以前不便に感じることがあった.それは某所のショッピングモールでのこと.


画像のように,道幅がかなり狭く,自動ドアと道とほぼ距離がないという場所でした.これだと何が困るか,という話ですが,


こんな感じで,通り過ぎるだけでドアが開いてしまう.避けて通ろうにも,向こうからも人が歩いてくるわけで,片側を空ける必要がある.なのでやむをえなく,ドア側を歩くと,用もないのに勝手にドアが開いてしまう.これは困りものである.お店の人にとっても空調により最適化された室温が乱されるし,通行人である私には少しばかりの申し訳ない気持ちが生じ,ストレスになる.自動ドアは設置する場所を選ぶということが判った.上図のような環境ではかえって自動ドアが邪魔になってしまう.


こんな感じで自動ドアが設置されていれば問題ない.入りたいときにだけドアが開いてくれる.

この事例から得るべき教訓は,なんでもかんでも自動化すれば良いというわけではないこと.また,自動化するのであれば,きちんと条件判定をするべきである,ということ.何かしらのシステムを構築したり,コーディングしたりする上でも共通することだなあと感じました.

0 件のコメント :

コメントを投稿

C#:CheckedListBoxのチェックされてる行の文字色を変更

0 件のコメント

文字色の変更方法はやや工夫が必要

ちょっと知り合いのフォームアプリケーションのプログラムの相談に乗ったところ,「CheckedListBoxの文字色を条件に応じて変更したい」とのことだった.色々ググってみたが,ListBoxにはデザインエディタのプロパティウィンドウから追加できるDrawItemというイベントを使用すれば上手くいくらしいが,CheckedListBoxにはそれが見当たらない.ふしぎ.オーナードローができないということらしいですが,よくわからない.ListBoxの描画設定を変更したいという方は以下を参照してください.
ListBoxの任意な行の色変え - 仕事に追われるプログラマーの日記
C#を攻略しよう、オーナードロー3

変更方法

さて,ここからが本題になるのですが,CheckedListBoxの特定の行だけ文字色を変更する方法を模索した.困ったときのstackoverflow,困っている人は多いらしくすぐ見つかった.
c# - How to dynamically change / set checkedListBox item fore colour - Stack Overflow
どうやらCheckedListBoxを継承したカスタムコントロールを作成し,描画に関わるOnDrawItemというメソッドをオーバーライドして解決するらしい.というわけでさっそく実装しようと思ったもののカスタムコントロールというものを作ったことがないのでこれにも悩むことに.

カスタムコントロールの作成

ここで第一の落とし穴にはまるわけですが,色々調べていたら公式にそれらしきことが書いていました.
方法 : 既存の Windows フォーム コントロールから継承する
でも画像付きで易しいサイトを見つけたので参照したのはこちら.
[C#]テキストボックスのカスタムコントロールを作成する : 忘れる前にメモ
プロジェクト → クラスの追加 からCustomCheckedListBox.csを作成し,ソースからCheckedListBoxを継承する.そしたらソースはこんな具合に.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace WindowsFormsApplication5.bin
{
    class CustomCheckedListBox : CheckedListBox
    {
    }
}

そしてビルド → ソリューションのビルドを実行する.そしてFormのデザインエディタのツールボックスを開くとCustomCheckedListBoxが追加されているのでそれをドラッグ&ドロップで配置する.綺麗に表示できました.これだけで嬉しい.

チェックのついている行の文字色赤色にしてみる

さて自分で作ったコントロールが表示できたところで,次は機能拡張させることにします.今回はサンプルとしてチェックのついている行の文字を赤色にしてみます.とりあえず先ほど調べたstackoverflowのこのAnswerを参考にし,クラス名を変更したりusing System.Drawingを追記したりして実装してみます.この例ではチェックの入った列の文字が緑色になってくれるはずです.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using System.Drawing;


namespace WindowsFormsApplication5.bin
{
    class CustomCheckedListBox : CheckedListBox
    {
        public CustomCheckedListBox()
        {
            DoubleBuffered = true;
        }
        protected override void OnDrawItem(DrawItemEventArgs e)
        {
            Size checkSize = CheckBoxRenderer.GetGlyphSize(e.Graphics, System.Windows.Forms.VisualStyles.CheckBoxState.MixedNormal);
            int dx = (e.Bounds.Height - checkSize.Width) / 2;
            e.DrawBackground();
            bool isChecked = GetItemChecked(e.Index);//For some reason e.State doesn't work so we have to do this instead.
            CheckBoxRenderer.DrawCheckBox(e.Graphics, new Point(dx, e.Bounds.Top + dx), isChecked ? System.Windows.Forms.VisualStyles.CheckBoxState.CheckedNormal : System.Windows.Forms.VisualStyles.CheckBoxState.UncheckedNormal);
            using (StringFormat sf = new StringFormat { LineAlignment = StringAlignment.Center })
            {
                using (Brush brush = new SolidBrush(isChecked ? CheckedItemColor : ForeColor))
                {
                    e.Graphics.DrawString(Items[e.Index].ToString(), Font, brush, new Rectangle(e.Bounds.Height, e.Bounds.Top, e.Bounds.Width - e.Bounds.Height, e.Bounds.Height), sf);
                }
            }
        }
        Color checkedItemColor = Color.Green;
        public Color CheckedItemColor
        {
            get { return checkedItemColor; }
            set
            {
                checkedItemColor = value;
                Invalidate();
            }
        }
    }
}

いざ実行してみると何やらエラーが.フォームのコントロールの中にエラーの警告が出ていてなかなか迫力がある.「デザイナーでハンドルされていない例外をスローして、無効になりました。例外:'0'のInvalidArgument= Valueは'index'に対して有効ではありません。パラメーター名:index」とのこと.さっぱりわからんので検索して参考にしたのはこちら.
【C#.NET】ListViewの選択しているインデックスを取得する|ばちブロ
どうもindexが0のときにもe.Indexを呼び出しているのが悪さをしているらしいので,要素の個数が0の時には描画処理を行わないようにしてやりました.Items.Countが0でないときのみこの描画処理を行うようにします.ついでにcheckedItemColorの指定をGreenからRedに変えてやります.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using System.Drawing;


namespace WindowsFormsApplication5.bin
{
    class CustomCheckedListBox : CheckedListBox
    {
        public CustomCheckedListBox()
        {
            DoubleBuffered = true;
        }
        protected override void OnDrawItem(DrawItemEventArgs e)
        {
            if (Items.Count != 0)
            {
                Size checkSize = CheckBoxRenderer.GetGlyphSize(e.Graphics, System.Windows.Forms.VisualStyles.CheckBoxState.MixedNormal);
                int dx = (e.Bounds.Height - checkSize.Width) / 2;
                e.DrawBackground();
                bool isChecked = GetItemChecked(e.Index);//For some reason e.State doesn't work so we have to do this instead.
                CheckBoxRenderer.DrawCheckBox(e.Graphics, new Point(dx, e.Bounds.Top + dx), isChecked ? System.Windows.Forms.VisualStyles.CheckBoxState.CheckedNormal : System.Windows.Forms.VisualStyles.CheckBoxState.UncheckedNormal);
                using (StringFormat sf = new StringFormat { LineAlignment = StringAlignment.Center })
                {
                    using (Brush brush = new SolidBrush(isChecked ? CheckedItemColor : ForeColor))
                    {
                        e.Graphics.DrawString(Items[e.Index].ToString(), Font, brush, new Rectangle(e.Bounds.Height, e.Bounds.Top, e.Bounds.Width - e.Bounds.Height, e.Bounds.Height), sf);
                    }
                }
            }
        }
        Color checkedItemColor = Color.Red;
        public Color CheckedItemColor
        {
            get { return checkedItemColor; }
            set
            {
                checkedItemColor = value;
                Invalidate();
            }
        }

    }
}

はいできあがり!

まとめ

  • CheckedListBoxの文字色指定は結構大変だった.
  • カスタムコントロールの作り方をお勉強しました.
  • stackoverflowの答えをコピペしたらエラーが出た.
  • if文一つで解決した.
  • オリジナルのコントロールができた.嬉しい.
スッキリわかるJava入門 第2版
中山 清喬 国本 大悟
インプレス
売り上げランキング: 798

0 件のコメント :

コメントを投稿