So-net無料ブログ作成
  • ブログをはじめる
  • ログイン

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) 

javascript に依存しない方がいい理由 [JavaScript]

javascript(js) は、便利なスクリプト言語です。
ブラウザとテキストエディタがあれば始められるし、コンパイルやビルドといった作業も必要ないので、すぐに動作確認できます。
プログラムを組んだことの無い人でも、とっつきやすいので、javascript しか使えないという人も見かけます。

昔は、動作が重くて使い物にならなかったのですが、回線速度が速くなり、パソコンの処理能力が早くなり、ブラウザも javascript を高速処理するように作られるようになったので、今では当たり前のように使われています。

jQuery が出てきてから、かなり複雑なことが簡単にできるようになってきましたが、なんでもかんでも javascript を使ってしまう(javascript しか使えない?)という問題も出てきました。



javascript は、クライアントサイドのスクリプトなので、それを忘れていると、おかしな使い方をしてしまうことがあります。
よくあるのが、入力フォームの入力チェックを javascript でやってしまうこと。
これ自体は問題ないのですが、サーバー側に送った時点で、もう一度同じチェックをする必要があります。
javascript を使って、クライアント側でチェックをしても、サーバーに転送する途中で改変される可能性があるからです。
どうせ同じチェックをすることになるので、サーバー側でチェックすれば1回で済みます。
(この辺は、フォームの内容にもよりますが)
サーバー側に送るデータをあつかう場合には、javascript に頼らない方がいいのですが、クライアントサイドということを意識していないと、javascript だけでやった気になってしまいます。


また、javascript を使えない現場というのもたまにあります。
大企業などは、セキュリティポリシーを本社で管理している場合があります。
多くの場合、javascript の特定の命令を実行できないようにしてあったりします。
なので、大企業の出張所や地方の店舗などでは、javascript がうまく動かないということが起こります。
本社に掛け合っても、セキュリティポリシーを変更してもらえることはないので、javascript を使わない方法を考えるしかありません。


専用端末を使う場合も、javascript が動かないことがあります。
セキュリティ的に禁止している場合もありますが、専用端末の場合、ハードウェアが貧弱で javascript が動かないということもあるので、こちらも、javascript を使わない方法を考えるしかありません。



javascript は便利なのですが、あまり依存してしまうと問題になることもあります。
できれば、javascript だけでなく、サーバーサイドの言語(php や Ruby など)を習得して、javascript が使えない状況でもなんとかできるようにしておくことも必要です。


タグ:JavaScript
nice!(2)  コメント(0) 

ランディングページ(LP)とは何? [雑談]

最近、ランディングページ(LP)という言葉をよく聞くようになってきました。
情報商材をあつかっているような人たちは、昔から使っていたのですが、一般企業が意識してランディングページ(LP)使い出したのは割と最近のような気がします。

ランディングページ(LP)とは、ユーザーに何かアクションしてもらうために作るペラサイト(1ページで完結するホームページ)のことです。
ページの最後にボタンがあり、最終的にそのボタンをクリックしてもらうことを目的としています。
ランディングとは、「着地」という意味で、ボタンをクリックしてもらうことが着地地点となります。
複数ページにすると、途中で見るのをやめてしまう人がいるので、1ページで作ります。
ユーザーに期待しているアクションは、資料請求だったり、新規登録だったり、商品の販売だったりします。


ユーザーに何かアクションしてもらうことに特化しているので、普通のホームページとは、考え方がかなり違います。

まず、流入経路が違います。
ホームページは、検索からの流入をメインに考えているので、SEOなどのテクニック(?)も必要になります。
一方、ランディングページ(LP)は、広告リンクやチラシのQRコードなどからの流入をメインにしています。
ランディングページ(LP)は、ある程度興味を持っている人に見てもらえないとアクションしてもらえる確率が下がるので、広告のリンク先などにします。

内容的には、ユーザーに何かアクションしてもらうための内容にしなければいけないため、ホームページ以上に言葉や文章の配置、配色が大事になります。
読み進めていく中で、不安を取り除き、ボタンをクリックしたくなるような作り方をします。

見た目のデザインは、邪魔になるので使いません。
ランディングページ(LP)は、ある程度興味を持っている人に見てもらうためのサイトであって、イメージ戦略に使うサイトでは無いからです。
成果の出ているランディングページ(LP)を見ると、デザインがバラバラな印象を受けることがよくありますが、これは戦略です。
きれいなページを作ってしまうと、途中で飽きてしまう人が多いので、あえてデザインを統一しないこともあります。

また、期間限定や数量限定にするのも、ランディングページ(LP)の特徴です。
ホームページのように、作って放置しておいても、成果は上がりません。
限定品だと、ボタンをクリックしたくなるでしょ?



ランディングページ(LP)の作成は、経験がないとなかなかうまく作れません。
理屈通りの結果が出ることが少ないので、実際にランディングページ(LP)を作り、自分で運用している人の方が、圧倒的に成果を出します。

もし、売りたい商品があるのであれば、ランディングページ(LP)を活用することも必要かもしれません。



nice!(1)  コメント(0) 

webデザイナーというお仕事 [雑談]

最近、webデザイナーという言葉を勘違いしている人によく出会う。

フォトショやイラレで絵を描く人だと思われていることが多い。
もちろん、フォトショやイラレで絵を描くことはあるが、それだけならwebデザイナーではなく、グラフィックデザイナーだ。
webデザイナーは、webをデザインしなければならない。


ホームページを作るときに使う html や css は、データを画面に表示するものであって、複雑な処理をするプログラムではない。
そのため、html や css を書き、画面をデザインするという意味で、webデザイナーと呼ぶ。
画面デザインの中に、絵を描くという作業も出てくるけど、絵を描けなくても webデザインはできる。

webデザイナーというとかっこよく聞こえるかもしれないが、ようするに、ホームページを作る人のこと。
なので、webデザイナーは、html や css はいじれるし、javascript だってそこそこ使えるのが当然。
ただ、規模の大きいホームページ制作会社になると分業しているので、画面設計を担当する人をwebデザイナーといっていることもある。
ちなみに、webプログラマーというと、php やRuby などが使える人というイメージが強くなる。


web をデザインするということは、html や css を書くだけではない。
 SEO対策になるようにソースコードを工夫するとか
 ユーザーが利用しやすいようにメニューやボタンの配置を考えるとか、
 効果的な配色を考えるとか、
意外と経験が必要で、職人的なところもある。
こういう部分ができていないと、ホームページの成果は出ない。

でも、そういうところを評価してもらえることは少ない。
それよりも目に見えて違いがわかる 見た目のデザインを評価する人は多い。


自称 webデザイナーという人がいたら、html や css を書けるか聞いてみるといい。
「css は苦手」とか、「javascript は使ったことがない」とかいう人はけっこう多い。
それは webデザイナーではなく、ただ絵を描くのが好きなだけだったりする。
web をデザインしたいのであれば、フォトショやイラレの前に、html や css が書けなければおかしい。

まともな webデザイナーもたくさんいるんだけどね。



nice!(1)  コメント(0) 

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