SSブログ

イラストをオーダーメイドできるSKIMA [Web サービス]

skima.jpg

ホームページやwebサービスを作っていると、イラストが欲しくなることがあります。
他にも、SNSのアイコンが欲しいとか、壁紙用のイラストが欲しいとか。
自分でも描けるけど、普段から絵を描いているわけではないので、時間がかかるし、めんどくさい。
そんなとき、絵師さんと購入したいユーザーをつなげるサービスです。

イラストのオーダーメイドサービス SKIMA

絵師さんと直接やり取りできるので、いろいろと頼みやすくなっています。
リクエストして、クリエイターの側から提案してもらうこともできます。
絵を描く人は、自分の作品を販売することもできるようになっています。


使ってみると、操作がわかりづらいので、慣れるまで時間がかかるかもしれません。
が、画像系のシステムなのに、サクサク動くので、あまり使いにくいという印象はありません。
webサービスで、サクサク動くのは大事!

サービスの運営はかなりしっかりしていて、登録は、メールアドレスを登録する方法のほか、facebook、Twitter、Google+、LINE のアカウントからもログインできます。
支払い方法は「コンビニ払い」や「クレジットカード払い」などが用意されています。
運営も、レスポンスが早いです。
機会があれば、使いたいと思うサービスです。


個人的にですが、この手のサービスで気になっていることがあって、それは、適正価格を維持できるかどうか?ということ。
描く側が手を抜いたり、買う側が値下げばかり要求したりしていると、クオリティが下がるだけになってしまいます。
手間のかかった絵なのに、安い値段になったりしないでほしい。
運営側が、この辺をちゃんと管理できれば、いいサービスになっていくと思うんですけどね。

イラストのオーダーメイドサービス SKIMA


nice!(4)  コメント(0) 
共通テーマ:パソコン・インターネット

リアルタイムで日付表示 [JavaScript]

日付をリアルタイムで表示する Javascript です。
日付が変わるのは1日1回なので、リアルタイムで表示する必要がないこともありますが、日付をまたいで利用するユーザーがいると想定される場合は、リアルタイムで表示を更新したくなります。

<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで日付を表示</title>
<script type="text/javascript"><!--
function showDate(){
	var hiduke=new Date(); 
	var year = hiduke.getFullYear();
	var month = hiduke.getMonth()+1;
	var week = hiduke.getDay();
	var day = hiduke.getDate();
	var yobi= new Array("日","月","火","水","木","金","土");
	var msg = year + "年" + month + "月" + day + "日(" + yobi[week] + ")";
	document.getElementById("rtDate").innerHTML = msg;
}
setInterval('showDate()',1000);
// --></script>
</head>

<body>
<div id="rtDate"></div>
</body></html>


年月日と曜日を取得します。
曜日は、数字で返ってくるので、文字に変換します。
表示する文字列を作成し、id="rtDate" に表示します。
リアルタイムで表示を更新するために、setInterval() で1秒ごとに showDate() を実行しています。

JavaScript なので、ローカルのパソコンの日付設定を取得しています。
パソコンの日付設定が狂っていると、そのまま表示します。



表示桁数を2桁に固定して、2000年1月5日 を 2000年01月05日 と表示した方が見やすいかもしれません。。
曜日ごとに表示色を変えるなども考えられます。
<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで日付を表示2</title>
<script type="text/javascript"><!--
// 桁数が1桁だったら先頭に0を加えて2桁にする
function set2figures(num){
	var ret;
	if(num<10){
		ret = "0" + num;
	}else{
		ret = num;
	}
	return ret;
}

function showDate(){
	var hiduke=new Date(); 
	var year = hiduke.getFullYear();
	var month = set2figures(hiduke.getMonth()+1);
	var week = hiduke.getDay();
	var day = set2figures(hiduke.getDate());
	var yobi= new Array("<font color='#ff0000'>日</font>",
	"月","火","水","木","金","<font color='#0000ff'>土</font>");

	var msg = year + "年" + month + "月" + day + "日(" + yobi[week] + ")";
	document.getElementById("rtDate").innerHTML = msg;
}
setInterval('showDate()',1000);
// --></script>
</head>

<body>
<div id="rtDate"></div>
</body></html>


このサンプルはテキスト表示なので、数字の画像を作って、日めくりカレンダー的な表示にもできます。
月単位のカレンダー形式にするのであれば、JavaScript ではなく、サーバー側で作った方がいい場合もあります。


nice!(3)  コメント(0) 
共通テーマ:パソコン・インターネット

リアルタイムで時間表示 [JavaScript]

時間をリアルタイムで表示する Javascript です。

<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで時間を表示</title>
<script type="text/javascript"><!--
function showTime(){
	var jikan = new Date();
	var nowHour = jikan.getHours();
	var nowMin = jikan.getMinutes();
	document.getElementById("rtClock").innerHTML = nowHour + "時" + nowMin + "分";
}
setInterval('showTime()',1000);
// --></script>
</head>

<body>
<div id="rtClock"></div>
</body></html>


時間と分を取得して、表示する文字列を作成し、id="rtClock" に表示します。
リアルタイムで表示を更新するために、setInterval() で1秒ごとに showTime() を実行しています。

JavaScript なので、ローカルのパソコンの時間設定を取得しています。
パソコンの時間設定が狂っていると、そのまま表示します。



時間表示のカスタマイズは、いろいろ考えられます。
このままだと動いているか分かりづらいので、秒を取得して、1秒ごとに点滅させることも考えられます。
表示桁数を2桁に固定して、1時5分 を 01時05分 してもいいかもしれません。
24時間表示ではなく、AM/PM 表示の方が見やすいという人もいると思います。
<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで時間を表示2</title>
<script type="text/javascript"><!--
// 桁数が1桁だったら先頭に0を加えて2桁にする
function set2figures(num){
	var ret;
	if(num<10){
		ret = "0" + num;
	}else{
		ret = num;
	}
	return ret;
}

// AM/PMと12時間表示
function setAMPM(hour){
	var ampm;
	var ret;
	if(hour < 12){
		ret = "AM " + set2figures(hour);
	}else{
		ret = "PM " + set2figures(hour-12);
	}
	return ret;
}

// 秒ごとに点滅
function setFlash(sec){
	var cnt = sec % 2;
	var ret;
	if(cnt != 0){		// 奇数
		ret = "+";
	}else{				// 偶数
		ret = "*";
	}
	return ret;
}

function showTime(){
	var jikan = new Date();
	var nowHour = setAMPM(jikan.getHours());
	var nowMin = set2figures(jikan.getMinutes());
	var nowsec = setFlash(jikan.getSeconds());
	document.getElementById("rtClock").innerHTML = nowsec + nowHour + ":" + nowMin;
}
setInterval('showTime()',1000);
// --></script>
</head>

<body>
<div id="rtClock"></div>
</body></html>


このサンプルはテキスト表示なので、数字の画像を作って、画像で表示すると時計らしくなります。
画像は、毎回読み込んでいるとアクセスに時間がかかるので、起動時にまとめて読み込むなどの工夫が必要になります。



nice!(3)  コメント(0) 
共通テーマ:パソコン・インターネット

So-netブログのリッチテキストエディタでソースコードを書く方法 [雑談]

So-netブログのリッチテキストエディタを利用する状態で、ソースコードを書く方法。
以前は、うまく動作しなかった記憶があるんだけど、使えるようになっていたので。


設定画面で、リッチテキストエディタを「利用する」に設定してあることが前提。
ソースコードをコピペする。
リッチテキストエディタのソースコード画面を開き、pre タグなどを入力する。

set02.png


ひと手間がかかる感じがスッキリしないけど、とりあえず使えます。


ちなみに、リッチテキストエディタを使わない状態でソースコードを書く方法は、こちらの記事



私の場合、Syntax Highlighter とかめんどくさいし、見にくくなるので、css の pre タグを直して使っています。

[デザイン]-[テンプレート管理]の中から、現在使っているテンプレートの[編集]をクリック。 css が編集できるようになるので、pre タグの書式を追加。

/*-----Common-----*/
pre {
padding:10px;
color:#fff;
background-color:#666;
line-height:1.5em;
}

こんな感じの書式にしてあります。



nice!(1)  コメント(0) 
共通テーマ:パソコン・インターネット

textarea の行数をリアルタイムに数える [JavaScript]

textarea の行数を、リアルタイムに数える javascript です。

<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで行数を数える</title>

<script type="text/javascript"><!--
function CountLine( id, str ) {
    num = str.match(/\r\n|\n/g);
    if(num!=null){
        line = num.length +1;
    }else{
        line = 1;
    }
    document.getElementById(id).innerHTML = "行数:" + line + "行";
}// --></script>
</head>

<body>
<textarea name="text1" rows="10" cols="30" onkeyup="CountLine('input1', value);">
</textarea>

<p id="input1">行数:1行</p>
</body></html>

javascript で、CountLine( id, str ) という関数を作り、textarea の onkeyup で呼び出します。
CountLine( id, str ) では、str.match() で改行コードかどうかチェックしています。

改行コードがあった場合は、0からカウントされるので、1を足します。
改行コードがなかった場合は、初期値の1を入れます。
表示文字列を作って、id="input1" の文字列を書き換えます。

pタグの 「行数:1行」 は、初期値です。textarea は、画面に表示した段階で1行目が表示されているので、0行ではなく、1行としました。

textarea が複数あっても、id を変えれば対応できるようにしてあります。


今回は、リアルタイムに行数を数えたかったので、 javascript を使いました。リアルタイムで行数を数えたいということはあまりないと思うので、php などを使ってサーバー側で数えた方がいいかもしれません。



タグ:JavaScript 行数
nice!(0)  コメント(0) 
共通テーマ:パソコン・インターネット

textarea に入力された文字数を、リアルタイムに数える [JavaScript]

textarea に入力された文字数を、リアルタイムに数える javascript のサンプルです。

<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで文字数を数える</title>

<script type="text/javascript"><!--
function CountStr( id, str ) {
document.getElementById(id).innerHTML = "文字数:" + str.length + "文字";
}// --></script>
</head>

<body>
<textarea name="text1" rows="10" cols="30" onkeyup="CountStr('input1', value);">
</textarea>

<p id="input1">文字数:0文字</p>
</body></html>

説明するほどのことでもないのですが、一応書いておきます。


javascript で、CountStr( id, str ) という関数を作り、textarea の onkeyup で呼び出します。

CountStr( id, str ) では、str.length で文字数が得られるので、表示文字列を作って、id="input1" の文字列を書き換えます。

pタグの 「文字数:0文字」 は、初期値です。

textarea が複数あっても、id を変えれば対応できるようにしてあります。

この javascript では、改行コードも1文字として数えてしまいます。もし、改行コードを数えたくないのであれば、文字数から行数を引いてやる必要があります。

今回は、リアルタイムに入力文字数を数えたかったので、 javascript を使いましたが、リアルタイムでなくてもいいのであれば、php などを使ってサーバー側で数えた方がいいかもしれません。



nice!(0)  コメント(0) 
共通テーマ:パソコン・インターネット

フルスクラッチ開発に挑戦するべき理由 [雑談]

プログラムの仕事をしていると、jQuery やフレームワーク、ライブラリなど、他人の作ったプログラムを利用するということがよくあります。
これらを使うと、(開発工数が減るかどうかはともかく)開発の効率がよくなり、特に複数人で開発しているときは便利です。
ところが、これらが使えない仕事もあります。

それは、国や地方自治体などの仕事。
契約の段階で、第三者の作ったプログラム、ライブラリ、フレームワーク等の使用は禁止されていることがほとんどです。たまに民間の企業でも禁止されることがあります。
禁止の理由はいろいろあると思いますが、一番の理由は、それらのプログラム等に問題があった場合、直せない(ことが多い)から。
オープンソースの場合、攻撃対象になりやすいので、早急な対応が必要になってきます。
国や自治体の場合、機密情報を扱うこともあり、基本的にフルスクラッチでの開発を要求されます。

また、国や自治体は予算で動いているので、突然バージョンなどが変わって見直しが必要になったりしても対応できません(個人的に、あまりやりたくない作業の一つですが)。

大手ベンダーなどは、オリジナルのライブラリやフレームワークを持っていたりするので問題ないのですが、普段からサードパーティーのライブラリやフレームワークに頼っていると、フルスクラッチでの開発は難しいかもしれません。


最近は、特定のライブラリやフレームワークを使わないとプログラムが書けないという人もよく見かけるのですが、それは単に「技術力が足りないだけ」です。
ライブラリやフレームワークが存在しているということは、同じものを作ることも出来るということです。
普段からフルスクラッチで開発していれば、オリジナルの関数なども増えてくるので、他人の作ったものを使わなくても省力化できるし、知識や経験にもなります。

ライブラリやフレームワークを使うことは悪いことではありませんが、使わない場合の実装も考えておくと、幅が広がります。
趣味のプログラムであれば、予算や納期を気にする必要も無いので、ライブラリやフレームワークを使わない開発に挑戦できます。


ちなみに、国や地方自治体などの仕事は、基本的に入札なので、フリーランスで開発している人には敷居が高いかもしれませんね。




nice!(2)  コメント(0) 
共通テーマ:パソコン・インターネット

ウェブサービスを紹介してくれるロケットリリース [Web サービス]

rr.jpg


ロケットリリース」は、ローンチ(新しいwebサービスを公開すること)したウェブサービスを紹介してくれるサイト。
ブログ形式で、ウェブサービスの詳細を紹介しています。
2017年9月末に動き出したばかりなので、まだこれからですが、すでにいろいろと登録されています。

登録されているウェブサービスは、以下のようなジャンル分けをされています。

 ビジネス
 娯楽
 旅行
 生活
 便利ツール
 娯楽
 SNS
 ミュージック

かなりマイナーなウェブサービスも見つけることが出来るかもしれません。



ウェブサービスの登録方法は、メールやSNSで連絡を取る形になっています。

Twitter
Facebook

ウェブサービス製作者としては、より多くの人にサービスを知ってもらい、使ってもらいたいと思っているのですが、このような紹介サイトは少ない気がします。
更新が止まっている紹介サイトも多いので、「ロケットリリース」には、できるだけ長く続けてもらいたいものです。



ぶっくま!」も、夜な夜な、修正作業を行っています。
なかなか作業が進まないのですが、近いうちに公開するかもしれません!?


ロケットリリース
http://rrws.info



nice!(3)  コメント(0) 
共通テーマ:パソコン・インターネット

エラーメッセージ画面のwebデザイン [雑談]

webシステムやwebサービスを作っていると、エラーメッセージを表示する画面が必要になってきます。
エラーメッセージやエラーコードをそのまま表示していると、攻撃者に対してディレクトリ構造やファイル名などの情報を与えてしまうことになるため、エラーメッセージを表示する画面を独自で用意します。

仕組みとしては、エラー(例外)をキャッチしたら、独自のエラーメッセージ画面を表示するだけです。
処理系によっては自動でそのような画面を表示するものもありますが、php ではそのような仕組みは無いので、自前で用意することになります。
しかし、あまり凝った画面にしてしまうと、エラーが発生しているのにエラーメッセージを表示できないということもあります。


例えば、データベースがなんらかの理由で止まってしまった場合、「データベースに接続できません」というメッセージ画面を表示することになります。
でも、画面に表示するデータをデータベースから持ってきていたりすると、データベースが止まっているので表示するデータを取得できないことになります。
独自のエラーメッセージやエラーコード、システム名や次の処理方法などは、データベースで管理すると便利ですが、場合によっては表示できなくなるかもしれません。

また、通信速度が異常に遅くなってエラーになった場合、画像ファイルなどは読み込めない可能性もあります。
その場合、エラーメッセージ画面をうまく表示できないかもしれません。
今の日本ではあまり発生しないかもしれませんが、ADSL回線だったり、通信状況の悪い国だったりすると、このようなエラーは割と頻繁に発生します。


どんなエラーに対してその画面を表示するのかにもよりますが、かなりいろいろな状況が想定されるはずです。

結局のところ、エラーメッセージを表示する画面は、テキストベースで、データベースなどに依存しない、シンプルなwebデザインが必要になってきます。できれば、javascript も使わず、css も小さくする(もしくは html に含める)ような配慮が必要です。

独自のエラーメッセージ画面で個性を出したいとかいう人もいるかもしれませんが、そもそもの目的は、エラーが発生していることをユーザーに伝えることです。
エラーメッセージ画面を表示できないのであれば、意味がありません。

どんな状況でも、ユーザーにエラーが発生していることを伝えられるようにデザインする必要があります。



nice!(1)  コメント(0) 
共通テーマ:パソコン・インターネット

ホームページの運営に必要な更新作業 [雑談]

ホームページの更新作業というと、
写真を変えたり、文章を書き直したり、
という、コンテンツの更新作業を思い浮かべると思います。
でも、これだけではありません。
画面上に表示されない部分の更新作業は、もっと頻繁に発生します。



1つは、SEO対策のための更新作業。
アクセス解析などの結果を見ながら、修正していきます。
正解は無いようなものなので、いろいろ試してみることも必要になってきます。
なので、とにかく時間がかかります。
気にしている人は、わりと頻繁に修正していると思いますが、ある程度までいくと放置してしまいがちです。
できれば、月に1回くらいはホームページを見直して、更新作業をしたいものです。



もう1つは、技術的な更新作業です。
インターネットの技術は、どんどん新しい技術が出てきます。
それらに対応していかないと、「新しいブラウザではホームページを見ることができない」とか「ホームページのデザインが崩れてしまう」ような状態になってしまいます。

例えば、今までにもいろいろありました。
 ・html の新しいバージョンが普及した時
 ・文字コード utf-8 が一般的になった時
 ・スマホやタブレットが普及してきた時
 ・OGP が出てきた時

などです。
今後、考えなければならないのは、AMP の対応でしょうか。

これらの更新作業は、最新技術を常に監視して、いち早く対応する必要はありません。
もしかすると、対応しなくてもいいかもしれません。
しかし、対応が遅れると、ホームページを見に来る人は減ってしまいますし、知らないうちに表示がおかしくなっていることもあります。
細かい変更も含めると、年に数回は、このような更新作業が発生します。



さらに、WordPress などの CMS (Contents Management System) を使っている場合、CMS やプラグインのバージョンアップという作業も発生します。
WordPress などは、オープンソースなので、攻撃対象になりやすく、早めにバージョンアップしておかないと、被害に遭う可能性が高くなります。

この CMS のバージョンアップというのが意外に難しくて、失敗すると今までのデータが無くなってしまうこともあります(私も1度経験しました)。
パソコンに詳しい人であれば自力でできるとは思いますが、普段それほどパソコンを使わないような人だと、ちょっと難しいかなと思います。

ところが、WordPress などを使ってホームページを作成している業者で、バージョンアップまで面倒を見てくれる業者はあまり見かけません。
なかには、技術的に出来ないという業者までいます。
画面上の見た目だけはこだわるけど、技術的なことはユーザー任せというのは、どうなんだろう?




画面上の表示(コンテンツ)は、まったく変わらないので、これらのような作業が必要だということを知らない人は、たくさんいると思います。
でも、ホームページを運営するということは、こういうこともすべて含めて更新していくということです。
コンテンツの変更が無くても、月に1回くらいは見直しが必要になります。
たぶん、自分で更新作業をしていけるという人は、そういう仕事をしている人くらいです。
一般の人ではできません。

もし、ホームページの作成を業者に頼むのであれば、運営も含めてやってくれる業者なのか検討してみてください。



nice!(1)  コメント(0) 
共通テーマ:パソコン・インターネット

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。