SEEDS Creators Blog

カテゴリー: html Page 1 of 2

情報セキュリティマネジメント試験(SG)　がはじまります

By

On 2016年2月4日

In html, IT, その他

blog_img_4185

こんにちは。

IPA（情報処理推進機構）の情報処理技術者試験に新しい試験区分が追加されましたね。
その名も、、、

情報セキュリティマネジメント試験(SG)
[ Information Security Management Examination ]

じゃじゃーん、、すごく難しそうな試験名（笑）

対象者像は以下のとおりです。

情報システムの利用部門にあって、情報セキュリティリーダとして、部門の業務遂行に必要な情報セキュリティ対策や組織が定めた情報セキュリティ諸規程（情報セキュリティポリシを含む組織内諸規程）の目的・内容を適切に理解し、情報及び情報システムを安全に活用するために、情報セキュリティが確保された状況を実現し、維持・改善する者

 

  • 春期・秋期実施
  • 試験時間・出題形式・出題数（解答数）

内容みてると

ITパスポート ＜＝ 情報セキュリティマネジメント試験 ＜ 基本情報処理

みたいな位置づけですかね。最近はこども向けのプログラミング教室があったり、国も施策として考えているみたいですし、試験区分が増えて、IT業界が盛り上がって行くのはいいことですね。これでブラックなイメージが払しょくされればいいのですが（涙）個人的にはLPIC系の国家資格ができればいいのになぁと思う今日この頃です。
今年も何か受験したいと思います。（これは受けないけど（笑））

■参考
https://www.jitec.ipa.go.jp/1_11seido/sg.html
https://www.jitec.ipa.go.jp/sg/

自分の得意なコトをやろう

By

On 2015年8月20日

In html, PHP, その他

イギリスの経済学者デヴィッド・リカードは言いました。
「自分の得意なコトをやろう」
（※本当は全然違いますが、ニュアンスはこんな感じです。たぶん。）

チームで仕事をする場合、自分は比較的得意な仕事を担当することが
自分にとってもチーム全体で見てもプラスになります。
なんか当たり前のようなことを言っていますが、よく考えると面白いので、ちょっとお話します。

２つの案件

・案件A：PHP2000行、HTML1200行書く。
・案件B：PHP1000行、HTML500行書く。
この２つの案件を２人でやっつけることを考えます。

パターン１

PHPしかできないプログラマーさんとHTMLしかできないコーダーさん。
この場合、案件A,BのPHP部分をプログラマーさんが、
HTMLはコーダーさんが担当すればいいことがすぐに分かります。
２人が別々に案件A、案件Bをそれぞれ担当しても、片方の作業が全くできないので完遂できません。

パターン２

PHPが得意なプログラマーさんとHTMLが得意なコーダーさん。
今回は、プログラマーさんはHTMLもできます。同じようにコーダーさんもPHPができます。

このケースにおいても、それぞれが別の案件を担当するのでなく、
両案件のPHPをプログラマーさん、HTMLをコーダーさんが担当するのが良さそうです。
早く終わって手が空いたらもう片方を手伝う感じですね。

パターン３

最強プログラマーさんと新人プログラマーさん。
お二人共PHPとHTML両方できますが、最強プログラマーさんの方がPHPもHTMLも開発スピードが早いです。
この場合はどう仕事を割り振るのがいいでしょうか？

最強プログラマーさんが１時間あたりPHPのコード100行、HTMLを50行書けるとします。
一方、新人プログラマーさんは１時間あたりPHP50行、HTML20行しか書けません。
とりあえず、それぞれが案件A、案件Bを担当すると

◯最強プログラマーさん
・PHP 100行 2000行 20時間
・HTML 50行 1200行 24時間

◯新人プログラマーさん
・PHP 50行 1000行 20時間
・HTML 20行 500行 25時間

となりますね。

ところが、これはベストな采配ではありません。
この場合、新人プログラマーさんは自分のより得意なプログラムに専念した方が早く終わります。

具体的には

◯最強プログラマーさん
・PHP 100行 750行 7.5時間
・HTML 50行 1700行 34時間
◯新人プログラマーさん
・PHP 50行 2250行 45時間
・HTML 20行 0行 0時間

こんな感じです。
新人プログラマーさんの作業量は変わっていませんが、最強プログラマーさんの
作業時間が短縮されました。

新人プログラマーさんのPHP10行はHTML4行の価値しかありませんが、最強プログラマーさんの
PHP10行はHTML5行の価値があります。
なので、HTMLはなるべく最強プログラマーさんに任して新人プログラマーは自分の得意とする
PHPを書いた方が効率がイイのです( ・∀・)ｲｲ!!

もちろん、実際の現場となるとこんな単純な話ではないですが、自分の得意を伸ばすことが
大事だということが分かると思います。

Form::select でvalueが空のoption項目を作る

By

On 2015年7月6日

In fuelphp, html, PHP, プログラミング

fuelphpのFormクラスはいろいろと便利です。
その中でも、selectとradioはチェックをつけてくれたりするので大好きです。

Form::select – http://fuelphp.jp/docs/1.7/classes/form.html#/method_select

View内で以下のように書いたら、

[code]
<?
$arrGender = [1 => ‘男性’, 2 => ‘女性’];
$gender = 2;
echo Form::select(‘gender’,$gender,$arrGender,[‘class’ =>’form-control’]);
?>
[/code]

こんなhtmlを作ってくれます。

[code]
<select class=”form-control” name=”gender” id=”form_gender”>
<option value=”1″>男性</option<
<option value=”2″ selected=”selected”>女性</option>
</select>
[/code]

通常は$arrGenderの部分は別で定義しておきますし、
$genderの部分はModelあたりから取ってきたりPostされた値が入っています。

$arrGenderの配列に合わせてoption の部分を作ってくれて、
$genderのキーと一致するoptionにselectedを付けてくれます。超便利。

ですが、これだとユーザーが本当に値を選択したのかわからないので、入力が空ならエラーを出す形にしたい。
つまりこういうHTMLを出したい。

[code]
<select class=”form-control” name=”gender” id=”form_gender”>
<option value=””>選択してください</option>
<option value=”1″>男性</option>
<option value=”2″>女性</option>
</select>
[/code]

$arrGenderをこんな配列にしてやれば実現できました。

[code]
<?
$gender = null;
$arrGender = [” => ‘選択してください’, 1 => ‘男性’, 2 => ‘女性’];
echo Form::select(‘gender’,$gender,$arrGender,[‘class’ => ‘form-control’]);
?>
[/code]

CSSの個別性について

By

On 2015年6月16日

In CSS, html, HTML、CSS, デザイン

私はフロントエンドとして日々業務に追われています。
基本的には個人での作業なのですが、共同でコーディング作業を行うということもあります。
その場合、作業の規則を設けていないと、つまずくことがあります。

CSSファイルに定義しているのに効かない

プロパティを間違えているわけでもなく、見直しても問題ないのに機能しない…ということが稀にあります。

そういった場合には、諸々思わぬ原因が潜んでいるやもしれません。

個別性

CSSを適用する場合、様々な記述方法があり、それにより優先されるスタイルが変わります。

div {color: #000;}
div {color: #F00;}

ごく単純に上記のように書くと、基本的には後に記述された「color: #f00;」が優先され適用されます。

しかし、下記のように記述すると

div.text {color: #000;}
.text {color: #F00;}

後から記述されたスタイルではなく、上の「color: #000;」が優先されます。

こうなる理由は、セレクタには個別性というものが決められており、
その個別性を計算し、優先されるスタイルが適用されるからです。

個別性の計算

セレクタにはidやclassなどを様々に設定し、適用させることができます。
そして、セレクタには個別性の優先度があり、それを計算した上でスタイルが適用されます。

計算の値をまとめると下記の通りです。

  • タグに直接style属性がある場合は、1000
  • idセレクタは、100
  • id以外の属性と、擬似クラスは、10
  • 要素、擬似要素は、1

これを値を基に下記のコードを考えると、

div.text {color: #000;}
div {color: #F00;}
  • 「div.text」： 1 + 10 = 11
  • 「.text」： 10

となるので、先に記述された「color: #000;」が優先され適用されます。

まとめ

個別性については、キチンと把握するには計算の値も覚えておくべきなのかもしれませんが
上記のように、最初に作業チーム内でCSSの記述ルールを設けておけば
そこまで気にしなくても思った通りのデザインにできると思います。
もし、CSSに記述したスタイルが効かないという状況があれば、今回の記事が解決に繋がるかもしれません。

追記

今回この記事を書くに至ったのは、自分の備忘録というのもあるのですが、
業務でどうしてもスタイルが効かないという状態に陥ったからです。
ですがその原因は、無理やりスタイルを適用させるため、
ほぼ全てに”!important”が付けられていたというオチで、個別性とかは関係ありませんでした…
楽ではあるのですが、”!important”は個別性など関係なく最優先されるので、
多用するのもよろしくないなと思いました。

VimでGo言語を書く環境を設定する

By

On 2015年3月17日

In html, IT, Linux, プログラミング

概要

Go言語をインストールして実行できる環境を作り、
VimでGo言語を書く設定をしていきます。

Goのインストール

以下のページでバイナリをダウンロードし、ホームディレクトリに設置します。
https://golang.org/dl/

wget https://storage.googleapis.com/golang/go1.3.3.linux-amd64.tar.gz
tar xvzf go1.3.3.linux-amd64.tar.gz
mv go1.3.3.linux-amd64 ~/go

Goパッケージの保存先であるディレクトリを作成します。

mkdir ~/go/packages

.bashrcなどに、以下の環境変数を設定します。

export GOROOT=~/go
export GOPATH=$GOROOT/packages
export PATH=$PATH:$GOROOT/bin

「source ~/.bashrc」で設定を有効にすると、goコマンドが使用できるようになります。

Vimの設定

goコマンドを使用して、以下のパッケージをインストールしておきます。

パッケージ 機能
gocode 入力補完
golint コーディング規約チェック
godef 定義ジャンプ

インストールコマンドは以下のようになります。

go get github.com/nsf/gocode
go get github.com/golang/lint/golint
go get code.google.com/p/rog-go/exp/cmd/godef

Goに対するVimの設定ですが、パッケージに同封されているVim設定ファイルを使用します。
上記の方法でインストールしている場合は、~/go/misc/vimに存在しています。

※現在のGoリポジトリにはmisc/vimは入っていないようです。将来的には少し違う設定になると思います。http://vim-jp.org/blog/2014/09/02/vim-go-extra.html

.vimrcに以下の設定を追記します。

filetype off
filetype plugin indent off
set runtimepath+=$GOROOT/misc/vim
filetype plugin indent on
syntax on
autocmd FileType go autocmd BufWritePre  Fmt
set rtp+=$GOPATH/src/github.com/nsf/gocode/vim
set rtp+=$GOPATH/src/github.com/golang/lint/misc/vim
set completeopt=menu,preview

これで自動補完や自動フォーマットが動作するようになります。

以下、よく使うコマンドを表にしておきます。

コマンド 意味
:Import {コマンド名} importにパッケージ名を追加
:Drop {パッケージ名} importにパッケージ名を削除
:GoDoc {パッケージ名} パッケージのドキュメントを閲覧する
:Godef {定数名/関数名など} 定義ジャンプ

参考

Vimを使ったGo言語開発手法
http://mattn.kaoriya.net/software/vim/20130531000559.htm

Go言語のインストール
http://golang.jp/install

GOPATH は適当に決めて問題ない
http://qiita.com/yuku_t/items/c7ab1b1519825cc2c06f

Go言語の開発環境構築 (Golang + Mac OS X + Vim)
http://note-of-engineer-b.blogspot.jp/2013/12/golang-setup.html

例外はきちんと書こう

By

On 2015年3月12日

In html, IT, PHP, プログラミング

PHPで、とあるリクエストに対して、xml形式でレスポンスを返すというプログラムを作成していました。

メインPHP

main.php
function main() {
// １．DBより何か参照してくる
$rs = $child-&gt;reference();
// ２．domDocumentを利用し、xml生成する
$dom = new domDocument('1.0', 'UTF-8');
・・・省略・・・
// ３．レスポンス返す
header('Content-Type: application/xhtml+xml');
echo $dom-&gt;saveXML();
}

サブPHP

child.php
function reference() {
try {
// selectして結果返す
$rs = $dao-&gt;select('table', $columns, $where);
return $rs;
} catch (Exception $e) {
throw $e;
}
}

が期待した動作をせず、、、

Empty reply from server

みたいなエラーが返されてます。空がサーバから返されてる。。！？

何気にapacheのログを参照すると、、

child pid xxxx exit signal Segmentation fault (11)

なるエラーが！？
ググってみるとふむふむ、うーん、参照してはいけないメモリ領域を参照してるみたいで詳細を調査する場合は、コアダンプをはいてみないといけない・・・はい、レベル高いです！！
まだロジックで調べてみることがあるだろうと、気持ちを入れなおし、ごにょごにょ調べていると。。おおっ！SQLがエラーログはいてました！！

２以降の処理は、１からの正常処理しか期待していないロジックを書いていました。
きちんと例外（エラー）のことを考えないといけないですね。
メインPHPを以下のように改善しました。

改善後メインPHP

main.php
function reference() {
// １．DBより何か参照してくる
$isSuccess = true;
try {
$rs = $child-&gt;reference();
} catch (Exception $e) {
$isSuccess = false;
}
// ２．domDocumentを利用し、xml生成する
$dom = new domDocument('1.0', 'UTF-8');
if ($isSuccess) {
// ２－１．正常処理
・・・省略・・・
} else {
// ２－２．例外処理
・・・省略・・・
}
// ３．レスポンス返す
header('Content-Type: application/xhtml+xml');
echo $dom-&gt;saveXML();
}

エラーでなくなりました。よかったです！
SQLエラーは仕方ないとして、どうしてSegmentation faultが出力されるのでしょうかね。
XML(DOM?)オブジェクトあたりが怪しい？？詳細は不明、、、

例外処理もちゃんと考慮して書くようにしましょう。

「HTML5 スタンダード・デザインガイド」購入しました。

By

On 2015年2月16日

In CSS, html, html5, その他, レビュー

XPのサポート終了により、IE6、7がほぼ実務での対応がなくなってきており、
そして来年、2016年1月にはIE8、10のサポートが終了することが既に話題になっています。

スマートフォンの普及により、スマホサイトを扱うことによりHTML5やCSS3の導入が多くなり、
PCへの導入も増加してきました。

そこで、再度HTML5を見直すために、参考書を購入しました。

「初心者用」のHTML、CSSの本は多く、本屋を数件回ってもいい本に出会えず、
amazonレビューに「HTML4.0」を理解している人ならさらっと読めるのでは
というレビューを発見し、
表題にもある通り「HTML5 スタンダード・デザインガイド」を購入しました。

HTML5の最大のよくわからない要素。
「section」と「article」を丁寧に説明していただいているのがありがたいです。

ネットの溢れる情報では色んな見解があり、定義があっているか
みるページを増やせば増やすほど混乱していったので、、、。

・「section」は「article」の中に入れてもいいのか
・「article」は「section」の中に入れてもいいのか
・「article」はどういった働きに使う要素なのか
・「section」はどういった働きに使う要素なのか

上記の様なあやふやに使っていたものが理解できたのは大きな収穫です。

こういった技術書は本によって意見が偏りがちなので
数冊HTML5の本は欲しいのですが、中々、基礎を詳細に書いている本がなくもう少し
普及して欲しいところです。

HTML5 スタンダード・デザインガイド

まだ読んでない方は是非読んで見てください。

Android ブラウザで PHP によるファイルダウンロードが出来ない件

By

On 2014年12月5日

In html, IT, pdf, PHP, プログラミング

Android ブラウザで PHP によるファイルダウンロードが出来ない件

① SSL にて、PDF や ZIP ファイルをダウンロードする場合、SSL の証明書が有効でないとダウンロードは出来ません。
　この場合、.pdf ファイルに直接アクセスしても、ダウンロードは出来ません。

② POST 送信で 「Content-Disposition:attachment」を出力する場合、再び GETで同じURLにリクエストを送信するとのことです。
GET 送信で、リクエストさせる方法で実装するしかないようです。
「Content-Disposition:inline」にした場合、POST→GET の送信はされませんでしたが、ファイル名（filename）が指定出来ませんでした。
よって、この方法もダメでした。

参考URL
http://zhzrzkz.blogspot.jp/2012/05/android.html
http://stackoverflow.com/questions/4674737/avoiding-content-type-issues-when-downloading-a-file-via-browser-on-android
https://code.google.com/p/android/issues/detail?id=1978

これらによると、AndroidのブラウザがPOSTメソッドでサーバにリクエストし
て、サーバからContent- Disposition:attachmentなヘッダを受け取ると、再び
GETメソッドで同じURLにリクエストを送信するとのことです。
また、この動作はPCのブラウザとは違うのですが、バグでは無いようです。

対応方法としては、POSTメソッドとGETメソッドで処理を変えるとか、フォーム
データの内容が見えてもよいのなら画像をダウンロードする URLには、GETメ
ソッドでリクエストする等がありそうです。
 

Macの外付けキーボード設定まとめ

By

On 2014年10月15日

In html, IT, その他

概要

uchiyama です。

先日、新しいMacBookProが支給されました。

普段は、長時間キーボードを叩くため、MacのキーボードではなくRealforceを使うようにしています。

Macに外付けキーボードを付けた時に、

デフォルトの状態だと色々とおかしなキー配置になります。

色々と設定しなければならなかったので、備忘録としてやったことを記載しておきます。

キーボードの種類を変更

なぜかUSキーボードとして認識される場合があるので、

JISに認識されるようにします。

環境設定 > キーボード > キーボードの種類を変更

のボタンを押下します。

 

あとは指示に従ってキーを押していけば、

種類を選択する画面が現れるのでJISを選択します。

 

修飾キーの設定

システム環境設定 > キーボード > 修飾キー

と進む。

「キーボード選択」で、外部キーボードを選択し、以下のように設定しました。
Caps Lock と Option は使わないので、完全にオフです。

Karabiner のインストール

いろいろキー設定を行うために、Karabiner をインストールします。

https://pqrs.org/osx/karabiner/index.html.ja

リピート速度を変える

カーソル移動を調整するためにリピート速度を変えます。

Karabinerを立ち上げ、「Key Repeat」の数値を変えます。

早くする場合は数値を小さくしていきます。

Vim でノーマルモードに戻った時の挙動設定

Vimでノーマルモードに戻った時に、半角英数に切り替わるように設定します。

Karabinerを立ち上げ、

Misc & Uninstall > Open private.xml

のボタンを押下します。

private.xml に以下の内容を記載して保存します。

<?xml version="1.0"?>
<root>
<appdef>
<appname>iTERM2</appname>
<equal>com.googlecode.iterm2</equal>
</appdef>
<appdef>
<appname>MACVIM</appname>
<equal>org.vim.MacVim</equal>
</appdef>
<list>
<item>
<name>Leave Insert Mode with EISUU (vim keybind apps)</name>
<identifier>private.vim_keybind_apps_esc_with_eisuu</identifier>
<only>iTERM2,TERMINAL,MACVIM</only>
<autogen>--KeyToKey-- KeyCode::ESCAPE, KeyCode::ESCAPE, eyCode::JIS_EISUU</autogen>
<autogen>--KeyToKey-- KeyCode::JIS_BRACKET_LEFT, VK_CONTROL, KeyCode::JIS_BRACKET_LEFT, VK_CONTROL, KeyCode::JIS_EISUU</autogen>
</item>
</list>
</root>

「Change Key」に移動して、「ReloadXML」を押すと、

「Leave Insert Mode with EISUU (vim keybind apps)」という項目が表示されるので、

チェックを入れます。

これで完了。

Seil で、英数/かな を設定

Seilをインストールします。

https://pqrs.org/osx/karabiner/seil.html.ja

Seilを立ち上げて、以下の項目をオンにします。

  • For Japanese > Enable NFER on PC keyboard
  • For Japanese > Enable XFER on PC keyboard

これで、普通のMacのように 英数/かな を切り替えることができます。

参考

MacBook セットアップ備忘録 外付けキーボード(REAL FORCE) 編

http://d.hatena.ne.jp/ginbear/20090505/1241505354

Vimのインサートモードを抜けるときにIMEをオフにするKeyRemap4MacBookのprivate.xml設定

http://m.designbits.jp/13091710/

javascript でのクラスのつくり方

By

On 2014年1月8日

In html, プログラミング

ごきげんよう。プログラマの kinu です。javascript でのクラスのつくり方を調べました。クラスといっても前に書いた記事(http://www.seeds-std.co.jp/seedsblog/2157.html)のとおり javascript はプロトタイプベースなのでクラスは存在しません。ただクラスベースっぽくふるまうことはできるのでその方法をまとめました。この記事は先にあげた記事の情報をもとに書いてます。よければ先に読んでください

クラスっぽいものをつくる

以下がクラス定義のコードです。
[code]
var A = (function () {

var classConst = ‘const’;

var A = function (name) {
this.name = name;
};

A.classVariable = ‘class A’;
A.classMethod = function () {
return A.classValiable;
};
A.prototype.instanceVariable = ‘instance’;
A.prototype.instanceMethod = function () {
return this.instanceVariable+’ ‘.this.name;
};
A.prototype.test = function () {
return ‘hoge’;
};
return A;
})();
[/code]

[コード1]

これはAという名前のクラスを定義してます。インスタンスの生成は

[code]
var a = new A(‘a’);
[/code]

[コード2]

とします。関係をまとめた図はこちらです。

figure1

http://www.seeds-std.co.jp/seedsblog/2157.htmlを先に読まれた方はお気づきの方も多いと思いますが、コンストラクタをつかってオブジェクトを生成してるだけです。ほとんど違いはありません。コンストラクタに追加したプロパティがクラスメソッド、クラス変数と同じ役割をして、プロトタイプに追加したプロパティがインスタンスメソッド、インスタンス変数と同じ役割を担います。違うのは、即時関数でコンストラクタの生成とプロトタイプの設定を包んでコンストラクタを返している点です。これは処理のスコープを限定するために使われてます。なのでこの中で変数を新たに定義してクラス内定数のように使うことができます。

継承のしかた

クラスベースの大きな特徴として継承というシステムがあります。javascript ではこのようにします。[コード1]がすでに定義されているとしてAを継承したクラス`B`を定義するコードを例に示します。

[code]
var B = (function () {
var B = function (name) {
A.call(this, name);
};
B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;

B.prototype.test = function () {
return ‘huga’;
};
return B;
})();
[/code]

[コード3]

BはAを継承してインスタンスメソッドtestをオーバーライドして(るようにふるまって)ます。関係をまとめた図は

figure2

コンストラクタで実行されている`A.call`は`Function.prototype`のメソッドで第1引数にとったオブジェクトをthisに束縛してAを実行してます。これでコンストラクタを継承してます。もちろんいらなければこの処理を外すだけです。
A.prototypeのメソッドはObject.create()で生成したオブジェクトを束縛して継承してます。
B.prototype.constructor = B;はsizeofのためのおまじないです。(ここでちょろっと言及してます。)
図をみてもらえば理解される方もいると思いますが、注意としてクラスメソッドやクラス変数、つまりコンストラクタのプロパティは__proto__で束縛していないので継承されません。

まとめ

以上 javascript でのクラス定義の方法です。ほかにもクラスっぽいものを定義する方法はあるみたいですが正直どれがいいかまだわかりません。それを見極める力がまだない…。まあ実装にこだわりだせばそれほどの柔軟性をもっているのが javascript の強みであり面倒臭さであるんではないかと思います。

Page 1 of 2

Next →

最近の記事

カテゴリー

アーカイブ

リンク

株式会社シーズ

社長ブログ

広報ブログ

© SEEDS Co.,Ltd.