So-net無料ブログ作成
2017年10月 | 2017年11月 |- ブログトップ

イラストをオーダーメイドできる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) 
共通テーマ:パソコン・インターネット

2017年10月 |2017年11月 |- ブログトップ