カテゴリー: Web

HTML、CSS、Javascriptを中心にフロントエンドの話題をお届けします。時々サーバーサイド、インフラのお話も。
他に様々なWeb関連ブログを運営していますが、こちらでは自分の実用に近い話題を主に取り上げていきます。

Webの醍醐味や楽しさ

Webというのはサーバーやドメインを取得してしまえば、誰でもアクセスが出来、自分の伝えたいことを様々な方法・メディアで表現することができる。突き詰めなければ簡単。つまり、敷居が低くコストもそれほど掛かるものではない。つきつめていけば、それなりのコストが必要となるし、こだわりがあればゴールはいつまでもたどり着かない。だからこそ、終わりがなくて、次に何をしようかなということを常に考える用になるので面白い。

更新することに一つの醍醐味がある。もっともっとよくしよう。と。

どの世界でもそうかもしれないけれど、工夫次第で色々な表現ができる。表示を美しくしたり、あえて美しくせず、隠してしまって迷路みたいにしたり。

Webの領域

もともと、研究用のコンピュータや一部の人だけが使用できるパソコンという名の小さなネットにしか繋がっていない大きなコンピュータでしか使えなかった。ネットが広がり、世界も同時に広がっていきいいこと悪いことを含めると多種多様な、もう一つの世界が出来上がった。さらにどんどん変化して様々な秩序が生まれて、現実世界の代替となり得る部分が少しずつ出来上がってきている。今後は、さらに電子化されていなかったところが電子化されて、ますます身近にWebを感じることになるであろうと思う。

業界に興味を持ったわけ

ハッキリ言ってしまえば、もともとWebというものには興味はなかった。漠然とゲームが作りたかった。でもある時に思ったけれども、やっぱり向いてない・苦手だってことに気づいたし、さっぱり諦めた。かわりにWebのプログラミングという案が提供されると、今までとは違って敷居が低くなり様々な表現が自分一人で行えるというWebの世界にどっぷりとはまっていった。デザインだけつきつめればそれでもいいだろうし、プログラムをつきつめればそれもあり。フロントエンドをつきつめればそれも。

あれもこれもと広く浅く楽しめ、時には深く突っ込んでみることが出来て、暇さえあれば、実験用の場さえあれば色々なことが出来て楽しい。ちょっとしたことならば、簡単に始めることができる。すぐに実現したいことをカタチにできたからこそ興味を持ったのかも。

  • HTML、CSSの取得
  • PHPの習得
  • データベースの操作
  • サーバーの構築

コーディングチック、プログラムチック、システマチック、インフラチックなこういった世界も最初は動かないしつまらない。徐々にできるようになってくると、理解も深まって楽しい。出来なかったことが実現できるようになるというのは最高に幸せ。最初はまず、間違っていても曲がりなりにもやってみることが大切。何度か挑戦していろいろやってみよう。

不思議

一度、仕様だったり方法論が提案され、普及するとそれを継承しながら物事って進化していく。ゼロベースじゃない。キーボードがその一つだけれども、もとはタイプライターから始まったキー列を今でも踏襲している。まだまだ何十年もキーボードに変わる画期的なものが登場するまでは、他の入力装置は普及しないであろう。でも真剣に変えようとか思って変えた人が居て、それに賛同する世界があったならば別の方向が生まれ、違った今になっていたのかも。でも、なんにせよキーボードという装置は非常に優れていますね。

不思議なこと、といえば大きな変化が無いってことかな。どの時代どの世界でもそうだったけれども、ゼロだったところに新しく登場するとそれがフォーマットになる。車、携帯電話、家電など。ライバルが出てきたかと思えば、それの機能で勝ちにやってくる。全く違うアプローチではない。そういうのをWebにも期待している。でも、出来たとしても普及させようとしてもだれかが乗ってくれないとだめなんだよね。協力関係、人間関係って大事。

HTMLはいつまで

HTMLはいつまで続くのだろうか。このファイルの形式、またはこれを踏襲したようなものは何十年も先まで続きそう。変えようにも帰ることが出来ない仕様なので、例えば画期的で、世界がそれについてくればそうなる。

そのものが変化しないにしても、入力や生成の方式は大きく変化していくだろう言うのは予想できる。CMSを使えばいわばHTMLを使わなくてもある程度コンテンツを生成していくことは可能。オリジナル・オーダーメイドモノをもとめるとやっぱりハンドメイドしないといけない部分が出てくるため、そこはしかたのないことなんだろうけれどもね。

    WordPressのfunctions.phpを使ってパーマリンクを半角数字や英語に変換する方法

    パーマリンクを半角数字または、英語のタイトルなら半角英語に設定する a-z,0-9以外のものが入ってきたら、post_IDとなるので注意。 function post_slug_change( $slug, $post_ID, $post_status, $post_type ) { if ( preg_match( '/(%[0-9a-f]{2})+/', $slug ) ) { $slug = utf8_uri_encode( $post_type ) . '-' . $post_ID; } return $slug; } add_filter( 'wp_unique_post_slug', 'post_slug_c...

    Dreamweaverの便利な、これは使えるかもしれないショートカット

    Dreamweaverの便利な、これは使えるかもしれないショートカット コードに関するショートカット DreamweaverはプレビューができるWebコーディング・制作用のツールだが、やはり真価が問われる機能はコードの入力をミスなく効率的に作成していけるかというところ。 コードの候補(タグの補助)、自動インデントなど便利な機能は標準で備わっているが、コマンドを打ったり設定しないと使わないものも。 便利な機能は...

    futureshopのcommerce creatorでWordPressの固定ページをJavaScriptで表示したものを外部参照しトップページに表示する方法

    HTML 設置したいパーツにJavaScriptを記述する。 <script type="text/javascript" src="/blog/news/"></script> news.php WordPressの固定ページ機能を使って、テンプレートファイルを作成し、以下のようなコードで、他のパーツからJavaScriptとして参照する。 <?php /** * Template Name: ****** * JavaScriptとして出力します */ ?> <?php query_posts( array( 'post_type' => 'post...

    HTML+CSSで高さを揃えて、縦横の中心に表示する方法

    HTML <div class="list"> <ul> <li><a href="#"><span><img src="images/img-1.png" alt=""></span></a></li> <li><a href="#"><span><img src="images/img-2.png" alt=""></span></a></li> <li><a href="#"><span><img src="images/img-3.png" alt=""></span></a></li> <li><a href="#"><span><img src="images/img-4.png" alt=""><...

    HTML+CSSでgridを使ったレイアウト方法/サンプル・活用方法

    10×10のグリッドのサンプル例。 HTML <div class="sample-grid"> <div class="grid header">header</div> <div class="grid sub1">sub1 <ul> <li><a href="#">list</a></li> <li><a href="#">list</a></li> <li><a href="#">list</a></li> <li><a href="#">list</a></li> <li><a href="#">list</a></li> </ul> <ul> <li><a hre...

    Dreamweaverのクローク用拡張子コピーアンドペーストメモ

    Dreamweaverでサイトにデータをアップロード・ダウンロードする際に、ファイルの拡張子を指定して、同期・アップロード対象から省く機能があります。クロークの拡張子でよく使用するものをコピーペーストで利用できるようにまとめました。 .aviのみ .avi 特別なファイルを除外 .avi .back .bak .bmp .csv .dat .db .htaccess .ico .log .mo .po .zip コンテンツに関する拡張子のみ .htm .html .shtml .php ....

    is_post_type_archiveを使って、特定のカスタム投稿タイプのアーカイブ(一覧ページ)の処理を分岐する方法

    特定のカスタム投稿タイプのアーカイブ(一覧)かどうかという処理結果を使って、処理を分岐させる方法。カスタム投稿のアーカイブで、指定したカスタム投稿タイプ名をもとに処理を分岐することができるので、あとはif文を使って分岐する。 trueかfalseが返ってくる処理 is_post_type_archive( 'item' ) を使います。 if ( is_post_type_archive( 'item' ) ) { // 投稿タイプ:itemの処理 } 例えば、どういった...

    WordPressで本文のタグを除去して、指定した文字でカットして(文字を丸めて)表示

    本文をそのまま表示したり、概要分を使って表示させることもアイデアとしてはあるが、自動的に記事の一覧などに表示させる時に、文字を決められた文字数でカットして表示したい時に、次のようなコードを使うと実現できる。 PHP // 本文を丸める $ex_content = wp_strip_all_tags ( $post->post_content ); if ( mb_strlen( $ex_content ) > 100 ){ $ex_content = mb_substr( $ex_content, 0, 100, 'UTF-8' ); ec...

    特定のファイルのみHTML拡張子でPHPとして動作する方法

    .htaccessコード #html -> php <Files "xxxx.html"> AddType application/x-httpd-php .php .html </Files> HTMLの拡張子だけれども、PHPのコードを記述すれば、そのコードがPHPとして動作してほしいときってあるかもしれません。そういう時は、HTMLの拡張子のままPHPとして動作する.htaccessを記述すれば実現できる。 .htaccessとうのはApacheというWebサーバーアプリケーションにオプション・制御・設定を上...

    futureshopのcommerce creatorで、商品グループ・商品詳細ページに独自コメントを表示するための置換文字

    commerce creatorには、独自コメントというコメント・説明文を入力する枠が、商品グループや商品に存在する。パーツにこの独自コメントを入れることにより、入力した独自コメントの内容を表示させることができる。 商品グループ 独自コメント(1) {% category.comment_1 %} 独自コメント(2) {% category.comment_2 %} 独自コメント(3) {% category.comment_3 %} 独自コメント(4) {% category.comment_4 %} 独自コ...