Tumgik
stpsystems · 9 years
Text
JavaScript(3):文字数カウントの落とし穴
こんにちわ、開発者のⅠです。
前回の投稿では、JavaScript(以下、JS)を使って、入力フォームに入力された文字数をリアルタイムにカウントする機能を紹介しました。
ですが、この機能にはある欠点があります。
それは、「特定の環境・文字の場合には、2文字とカウントしてしまう」という点です。
これは一体どういうことでしょうか?
文字をパソコン上で表現する仕組みに、文字コードと呼ばれるものが用いられています。文字コードとは、ある文字とそれに対応する英数字の対応関係を表したものです。文字コードの種類は複数ありますが、その中のUnicode(UTF-8)を取り扱う際には、注意が必要です。この文字コードには、サロゲートペアと呼ばれる文字が存在し、これを普通にカウントすると2文字と判定されてしまいます。
それでは、どうしたらこの問題をクリアできるのでしょうか……?
答えはこちらです。
——————-ここから ——————-
<html>
<head>
<title>テスト_文字数カウント</title>
</head>
<form id=“textForm” name=“textForm” method=“post” action=“”>
<body>
<input type=“text” name=“countTest” size=“30” maxlength=“20” OnKeyUp=“TextCount(value)” > <span id=“text_counter”>0</span> / <span id=“text_maxCount”>100</span>
<script type=“text/javascript”>
function TextCount(value){
var textLength = value.length - (value.match(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g) || []).length;
document.getElementById(“text_counter”).innerHTML = textLength;
}
</script>
</body>
</form>
</html>
——————-ここまで ——————-
太字の部分を追加してみましたが、 試しに「𠮷」(通称:つちよし)を入力したときのカウント数が訂正前と後では違うことが分かるでしょう。
本日はここまでです。
それでは!
0 notes
stpsystems · 9 years
Text
パスワードを要求されるサーバにファイルをコピーする方法
こんにちは!Sです。
今日はファイルのコピーについて(^^)
ファイルをコピーする書き方は
System.IO.File.Copy(@"C:\test\1.txt", @"C:\test\2.txt", true); ※第3項にTrueを指定すると、コピー先が存在している時、上書きする
・・・ですが、異なるサーバ間のファイルのコピーを行う際にコピー先のサーバからパスワードを要求されたという場合には下記のメソッドが有効です!
//WebClientオブジェクトを作成 System.Net.WebClient wc = new System.Net.WebClient(); //ログインユーザー名とパスワードを指定 wc.Credentials = new System.Net.NetworkCredential("ID", "password"); //FTPサーバーにアップロード wc.UploadFile("コピー先t", "コピー元"); //解放する wc.Dispose();
1 note · View note
stpsystems · 9 years
Text
データベースに直接行を追加する方法
こんにちはSです!
今日はデータベースに直接行を追加する際にdatetime型の値で少し困ったのでその共有です。
追加したい要素が全て文字の場合は
insert into テーブル名 (A, B, C) values (’A’, ‘B’, ‘C’)
で問題ありません。
しかしdatetime型の列に値を登録する場合には次のように書く必要があります。
insert into テーブル名 (A, B, C) values (’A’, ‘B’, cast('2015-09-30 00:00:00.000' as datetime))
0 notes
stpsystems · 9 years
Text
JavaScript(2) :入力した文字数をカウントしてみよう
こんにちわ、開発者のⅠです!
前回に引き続き、JavaScript(以下、JS)について取り上げたいと思います。
何かと便利なJSですが、入力欄にどれだけの文字が入力されたのか、リアルタイムにカウントするという機能もJSで実現できます。
これを実装することで、入力する側(ユーザー)が現在どれぐらい入力したのかを把握することが出来ます。
入力欄にあらかじめ入力数の上限が設けられている場合には、とても有効な機能ですね。
※例えば、張り切って入力した文章をいざ登録しようとして「文字数が多すぎます!」と警告されたら、ユーザーは気分を害することでしょう……。
それでは、実際にソースを書いてみます。
-------------------ここから -------------------
<html>
<head>
<title>テスト_文字数カウント</title>
</head>
<form id="textForm" name="textForm" method="post" action="">
<body>
<input type="text" name="countTest" size="30" maxlength="20" OnKeyUp="TextCount(value)" > <span id="text_counter">0</span> / <span id="text_maxCount">100</span>
<script type="text/javascript">
function TextCount(value){
var textLength = value.length;
document.getElementById("text_counter").innerHTML = textLength;
}
</script>
</body>
</form>
</html>
-------------------ここまで -------------------
前回と同じように、上記のソースをメモ帳に張り付けてhtml形式で保存し、ブラウザで開いてみてください。文字を入力すると、リアルタイムにカウントされるはずです。
今回はここまでです!次回の投稿でお会いしましよう。
0 notes
stpsystems · 9 years
Text
サイトマップを作る際に気を付けないといけないこと
こんにちはSです!先日のサイトマップ編の続編?です。
先日作成したサイトマップの一覧をたどっていたところ、検索結果一覧のあるページで「検索結果0件」となっているページがありました。
実際にユーザーがサイトを巡回していても、このページにはたどり着かないしくみなのですが、ページ自体は掲載されているのでサイトマップの一覧には表示されてしまっていました。
このようなページが存在すると「ソフト404」といってSEOの評価が下がる
一因となってしまいますので注意です!
0 notes
stpsystems · 9 years
Text
一定時間毎に動作を繰り返す
こんにちはYです。 JavaScriptで面白いものを見つけたので、その備忘録です。
画像を一定時間内で切り換えたり、文字を変えたりしたいなと思った時に JavaScriptのsetInterval(),setTimeout()が使えることがわかりました。
今回は、関数を実行してから、一定毎時間に動くようsetInterval()を使用しました。
setInterval(関数名、間隔ミリ秒)
サンプルプログラム
val counter = 0; val speed = 1000;
setInterval(function(){ if(counter <= 100){ console.log(counter); counter = counter + 1; } }, speed);
一秒ずつ0から100まで表示させるプログラムを作ってみました。
0 notes
stpsystems · 9 years
Text
ファイルにテキストを書き込む方法
こんにちはSです!記念すべき10回目の投稿です♪
さっそくですが、ファイルにテキストを書き込む際のソースはこんなかんじです。
using System.Text; using System.IO; class Program {  static void Main(string[] args)  {
  Encoding sjisEnc = Encoding.GetEncoding("Shift_JIS");
//引数は(string path, bool append, Encoding encoding )    StreamWriter writer =      new StreamWriter(@"C:\Test.txt", true, sjisEnc);    writer.WriteLine(ファイルに出力する内容);
//ファイルを閉じる    writer.Close();  } }
ちなみにbool appendをfalseにすると上書きになります。
0 notes
stpsystems · 9 years
Text
JavaScript(1) :そもそもJSってなに?
こんにちわ、開発者のⅠです!
連休が明けてから最初の投稿となりますが、テーマは”JavaScript”です。
「どこかで聞いたことがあるけど、実際はどんなものかは知らないなぁ」という方もいらっしゃるのではないでしょうか。
JSとは、プログラミング言語の一種であり、��ンパイルを必要としない言語(スクリプト言語)でもあります。
その書き方は結構シンプルです。
例文を以下に書いてみます。
-------------------ここから -------------------
<html> 
<head> 
<title>テスト</title> 
<script type="text/javascript"> 
window.onload = function(){
 alert("こんにちわ!");
}
</script>
</head> 
</html>
-------------------ここまで -------------------
これをメモ帳に書いてみて、拡張子を.htmlに変更して保存します。
そして、このファイルをブラウザで開くと”こんにちわ”のアラートが出現します。
実際に動作しているところを見ると、なんだか楽しくなりますね。
次回は、もう少しJSについて掘り下げたいと思います。
それではまた!
1 note · View note
stpsystems · 9 years
Text
JavaScriptで位置情報を取得
こんにちわYです。
現在地の緯度経度情報を取得して、 近くにあるものを検索したいなと思いました。
デバイスはPCやスマホとし、どちらでも動作させることが目標です。 そこで今回はブラウザからJavaScriptを使用して取得する方法にたどり着きました。
function GetGeoCode(){
//Geolocation APIに対応しているかを判定 if (navigator.geolocation) {
//現在位置を取得できる場合の処理 alert("あなたの端末では、現在位置を取得することができます。");
//現在位置を取得する //オプション・オブジェクト var optionObj = { "enableHighAccuracy": false, "timeout": 8000, "maximumAge": 600000, }; navigator.geolocation.getCurrentPosition(successFunc, errorFunc, optionObj);
//Geolocation APIに対応していない } else {
//現在位置を取得できない場合の処理 alert("あなたの端末では、現在位置を取得できません。");
} } //成功した時の関数 function successFunc(position) { //緯度をアラート表示 alert(position.coords.latitude); //経度をアラート表示 alert(position.coords.longitude); } //失敗した時の関数 function errorFunc(error){
//エラーコードのメッセージを定義 var errorMessage = { 0: "原因不明のエラーが発生しました…。", 1: "位置情報の取得が許可されませんでした…。", 2: "電波状況などで位置情報が取得できませんでした…。", 3: "位置情報の取得に時間がかかり過ぎてタイムアウトしました…。", };
//エラーコードに合わせたエラー内容をアラート表示 alert(errorMessage[error.code]); }
参考サイト:JavaScriptで位置情報を取得する方法(Geolocation API) https://syncer.jp/how-to-use-geolocation-api
1 note · View note
stpsystems · 9 years
Text
演算子の優先順位
こんにちはSです!
またまたSQLについて。
ふと演算子の優先順位について疑問に思ったので調べてみました。
例えば下記の例でwhere以降はどのように解釈されるでしょうか?
SELECT * FROM foo WHERE a=1 OR a=2 AND b=1 OR b=2
① (a=1またはa=2)かつ(b=1またはb=2)
② a=1 または(a=2かつb=1) または b=2
答えは②です。
何故ならANDの方がORよりも優先度が高いからです。
ちなみに例文をこのように書き換えると①の意味になります。
SELECT * FROM foo WHERE ( a=1 OR a=2) AND (b=1 OR b=2)  
数学で+-よりも×÷を先に計算するのと同じですね!
▼参考ページ
http://www.tohoho-web.com/js/operator.htm
1 note · View note
stpsystems · 9 years
Text
新規Webページの立ち上げ⑤
こんにちわ、新人のⅠです。
前回まではSQL構文についてお話しましたが、今回は「string.Format」についてお話ししたいと思います。最初に、 「string.Format」 を用いた例文を書いてみます。
string Info = “年齢”;
int age = 22; 
string myAge = string.Format ("私の{0}は {1} 歳です!", info,  age);
console.WriteLine (myAge); //結果:私の 年齢 は 22 歳です!
お気づきの方もいらっしゃるかもしれませんが、string.Formatメソッドの中にある{0},{1}の部分が、変数info,ageの値にそれぞれ置き換わっています。
この{0},{1}は書式指定項目と呼ばれます。” ”の次のカンマを挟んで記述されている部分にはオブジェクト(今回はinfoとage)が並びます。書式設定項目に書かれた番号はインデックスと呼び、オブジェクトの場所(並び順)がこれと対応しています。
(※ただし、インデックスは「0」から始まるので注意!)
なので、infoとageの順番を逆にしてしまうと……
string myAge = string.Format ("私の{0}は {1} 歳です!", age, info);
console.WriteLine (myAge); // 結果:私の 22 は 年齢 歳です!
意味の分からないものになってしまいますので十分注意しましょう。
今回はここまでです、よい週末を!
0 notes
stpsystems · 9 years
Text
サイトマップ
こんにちは!Sです。
今日は XMLサイトマップについて勉強したのでそのお話を・・・
XMLサイトマップとはWebサイト内のページを検索エンジンのクローラーに知らせることができるURLのリストです 。
サイトマップがなくてもクローラーはサイト内のリンクを辿り、URLを発見し認識してくれますが、複雑なサイト構造であったり、サイト内リンクが少なく辿りづらいページある場合などは、うまくクロールできなかったりします。
しかし、そんなときサイトマップがあれば  Webサイト内のURLを予めリスト化して検索エンジンに知らせておくことができるので安心です♪
基本的な構造は下記のとおりですが、さらに更新頻度や最終更新日、ページの優先度なども明記することもできます。
▼詳しくはこちらを▼
https://support.google.com/webmasters/answer/183668?hl=ja&ref_topic=4581190&vid=1-635781651769120046-73969633
【基本的な構造】
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">  <url>    <loc>http://www.example.com/foo.html</loc>  </url> </urlset>
0 notes
stpsystems · 9 years
Text
拡張子の判定方法
こんにちわYです。
ASP.NETのファイルアップロードサーバーコントロールを使用して ファイルを上げる際に、拡張子を違反した場合にエラー文を出すのが目的です。
public static bool CheckFileExtension(FileUpload _file, CustomValidator _cusval_fileUpload) { bool result = true; String fileExtension = System.IO.Path.GetExtension(_file.FileName).ToLower(); String[] allowedExtensions = { ".pdf" ".txt"}; for (int i = 0; i < allowedExtensions.Length; i++) { if (fileExtension == allowedExtensions[i]) { _cusval_fileUpload.IsValid = true; result = true; break; } else { _cusval_fileUpload.IsValid = false; _cusval_fileUpload.ErrorMessage = "この拡張子のファイルはアップロードできません"; result = false; } } return result; }
0 notes
stpsystems · 9 years
Text
wgetでサイト内のリンク切れチェック(いろいろ実験)
以前、wgetでサイト内のリンク切れチェックの記事でwgetのspiderオプションを紹介しましたが、実施するにあたって
「-recursive -level 1」とすると指定ページだけチェックして終わり?もしくは指定したページからリンクされたページまで辿る?
同一URLのリンクが複数貼られていた場合、毎回チェックしにいくのか
リダイレクトされるURLの場合、リダイレクト先まで追ってくれるのか
一斉に大量のリクエストを送ってサーバに負荷をかけ過ぎないか
のような疑問が浮かんだので、実際に実験してみました。
準備
以下の様なリンク構造を持ったサイトを用意しました。
Tumblr media
やかましい矢印は他ページへのリンクを表しています。/detail/4.htmlからはトップページ(index.html)へ302リダイレクトするようにしています。
結果
-recursive -level1でどこまでリンクを辿るのか
wget --spider --no-directories --background -o test.log --recursive --level 1 --no-verbose --execute robots=off http://localhost/index.html
上記コマンドを実行したところ、以下の様なアクセスログになりました。
127.0.0.1 - - [17/Sep/2015:19:15:56 +0900] "HEAD /index.html HTTP/1.1" 200 - 127.0.0.1 - - [17/Sep/2015:19:15:56 +0900] "GET /index.html HTTP/1.1" 200 66 127.0.0.1 - - [17/Sep/2015:19:15:56 +0900] "HEAD /list/1.html HTTP/1.1" 200 - 127.0.0.1 - - [17/Sep/2015:19:15:56 +0900] "GET /list/1.html HTTP/1.1" 200 111 127.0.0.1 - - [17/Sep/2015:19:15:56 +0900] "HEAD /list/2.html HTTP/1.1" 200 - 127.0.0.1 - - [17/Sep/2015:19:15:56 +0900] "GET /list/2.html HTTP/1.1" 200 4340
-level 1とすると、指定ページから貼られているリンクだけチェックするようです。
同一URLのリンクが現れた時、毎回チェックするのか
-level 3と指定して実行したところ、以下の様なアクセスログになりました。
127.0.0.1 - - [17/Sep/2015:19:20:32 +0900] "HEAD /index.html HTTP/1.1" 200 - 127.0.0.1 - - [17/Sep/2015:19:20:32 +0900] "GET /index.html HTTP/1.1" 200 66 127.0.0.1 - - [17/Sep/2015:19:20:32 +0900] "HEAD /list/1.html HTTP/1.1" 200 - 127.0.0.1 - - [17/Sep/2015:19:20:32 +0900] "GET /list/1.html HTTP/1.1" 200 111 127.0.0.1 - - [17/Sep/2015:19:20:32 +0900] "HEAD /list/2.html HTTP/1.1" 200 - 127.0.0.1 - - [17/Sep/2015:19:20:32 +0900] "GET /list/2.html HTTP/1.1" 200 148 127.0.0.1 - - [17/Sep/2015:19:20:32 +0900] "HEAD /detail/1.html HTTP/1.1" 200 - 127.0.0.1 - - [17/Sep/2015:19:20:32 +0900] "GET /detail/1.html HTTP/1.1" 200 180 127.0.0.1 - - [17/Sep/2015:19:20:32 +0900] "HEAD /detail/2.html HTTP/1.1" 200 - 127.0.0.1 - - [17/Sep/2015:19:20:32 +0900] "GET /detail/2.html HTTP/1.1" 200 180 127.0.0.1 - - [17/Sep/2015:19:20:32 +0900] "HEAD /detail/3.html HTTP/1.1" 200 - 127.0.0.1 - - [17/Sep/2015:19:20:32 +0900] "GET /detail/3.html HTTP/1.1" 200 180 127.0.0.1 - - [17/Sep/2015:19:20:32 +0900] "HEAD /detail/4.html HTTP/1.1" 302 - 127.0.0.1 - - [17/Sep/2015:19:20:32 +0900] "HEAD /index.html HTTP/1.1" 200 - 127.0.0.1 - - [17/Sep/2015:19:20:32 +0900] "GET /index.html HTTP/1.1" 200 66
一度チェックしたURLは再度現れても省略されるようです。これは助かります。 ただ、パラメータが付くURLの場合、その順番が若干ずれるだけで別URLとみなされるので、 URLの埋め方によっては効率が悪くなってしまいますね。
リダイレクト先まで追ってくれるのか
先ほどのアクセスログにもありますが、リダイレクト先も追ってくれます。これも助かります。
127.0.0.1 - - [17/Sep/2015:19:20:32 +0900] "HEAD /detail/4.html HTTP/1.1" 302 - 127.0.0.1 - - [17/Sep/2015:19:20:32 +0900] "HEAD /index.html HTTP/1.1" 200 - 127.0.0.1 - - [17/Sep/2015:19:20:32 +0900] "GET /index.html HTTP/1.1" 200 66
ただし、リダイレクト後のURLはチェック済みであっても再度確認しにいくようですので、注意が必要です。
サーバへの負荷は大丈夫か
パラメータだけ異なるリンクを100個ほど増やして試してみたところ、今回の環境(windows上に立てたapache)では65req/secほどでした。 通常のwebサイトでは問題なさそうですが、ページごとの処理内容やサーバのスペックにもよるかと思いますので、 参考程度として頂けたらと思います。
0 notes
stpsystems · 9 years
Text
ページ内リンク
こんにちわYです。 久しぶりにページ内リンクを張ろうと思ったら、あれ?跳ばない?と焦りました。 調べなおしてみたら納得。微妙に使い方が間違っていました。
呼び出す側 <a href=“#アンカー名"></a>
呼び出される側 <a name=”アンカー名”>内容</a> <h2 id =“アンカー名">内容</h2> <p id =“アンカー名">内容</p> <div id="アンカー名">内容</div> ・・・
aタグの時だけ、name属性を使うのが正解でした。 それにしても、なんでaタグだけ違うのか疑問が残るメモになりました。
0 notes
stpsystems · 9 years
Text
新規Webページの立ち上げ④
こんにちわ、開発者のⅠです!
前回は、SQL構文の中でも基礎的なものを紹介しました。
この第4回では、「INSERT」「UPDATE」を取り上げたいと思います。
・「INSERT」とは?
特定のテーブルに新しいレコード(行)、つまりはデータを新規に追加する時に使用します。基本的なINSERT文の構文は次の通りです。
”INSERT INTO テーブル名(列名1,列名2,……)VALUES(値1,値2,……)”
INSERT句では、データを追加したいテーブルおよびカラム(列)を指定し、VALUES句の括弧内に追加したい値が並びます。
ここで一つ注意しなければならないのが、”列名”と”値”の順番はそれぞれ対応しているという点です。つまり、上記の構文の場合、”列名1”には”値1”が、”列名2”には”値2”が登録されることになります。
また、”指定した列名の数”と”追加したい値の数”が一致しない場合にはエラーとなり、データの追加に失敗します。
・「UPDATE」とは?
特定のテーブルに登録されているデータを更新するために使用します。基本的なUPDATE文の構文は次の通りです。
“UPDATE テーブル名 SET 列名1=値1,列名2=値2,…… “
UPDATE句でデータの更新を行いたいテーブルを指定し、SET句で更新したい列名および更新値を記述します。
※補足:「INSERT」「UPDATE」いずれの構文にも、WHERE句を追加して各処理を行う条件を指定することもできます。
参考URL⇒http://www.atmarkit.co.jp/ait/articles/0709/27/news143_2.html
いかがでしたでしょうか?この他にも、様々な構文が存在します。
気になった方はぜひ調べてみてください!
今回はここまでです。次の投稿でまたお会いしましょう!
0 notes
stpsystems · 9 years
Text
ちょっと複雑な条件のSQL
こんにちは!Sです。
前回に引き続きSQLについて・・・
【やりたかったこと】
下記の優先度順に条件にあうものが3つ得られるまで探す。
尚、各優先度において条件にあうものの合計が3件以上になった場合は、第2ソートキーEにより順位を決める。
優先順位① 条件Aかつ条件B
優先順位② 条件Aかつ条件C
優先順位③ 条件Bかつ条件D
優先順位④ 条件Cかつ条件D
【上記の条件を満たすselect分の概要】
select top 3 * from
(
select distinct 0 as sort, ・・・from テーブル名 where A and B
union
select distinct 1 as sort, ・・・from  テーブル名 where A and C
union  
select distinct 2 as sort, ・・・from  テーブル名 where B and D
union
select distinct 3 as sort, ・・・from  テーブル名 where C and D
) main
order by sort , E
※ただしこの場合、優先順位①~④でそれぞれ選ばれたものが重複する可能性があるので、Dao.csとは別のcsファイルなどで重複を省く必要があるので注意
0 notes