Site.js - 静的/動的サイトまでこなせるJavaScriptフレームワーク MOONGIFT
最近は静的サイトフレームワークが多数出てきています。確かに便利なのですが、拡張していく中でダイナミックな部分が欲しくなることもあるでしょう。そんな時に別途APIサーバを立てるのも面倒です。 そこで使ってみたいのがSite.jsです。静的サイト開発から動的サイトまでこなせるJavaScriptフレームワークです。 Site.jsの使い方 こちらは最低限のWebサイト。 スタッツとしてアクセスを見られる機能もあります。 Site.jsはsiteコマンドを使ってベースになる静的サイトを作ったり、開発用サーバを立ち上げることもできます。ダイナミックな処理もJavaScriptで書きますが、コード量は最低限です。WebSocketも利用できます。 Site.jsはJavaScript製のオープンソース・ソフトウェア（GNU Affero General Public License）です。 Site
自動ナンバリングできるCSSカウンターを同ページ内で複数使うサンプル
Result 自動連番できるCSSカウンターを親要素と子要素の入れ子で2つ使う、みたいなやつ 異なるコンテナに含まれる同一要素に自動でナンバリングします 結論から言うと、複数のカウンター名を使えるのでそのまま使えば動作します cssbody {/*sectionsとboxesの2つのカウンター名を設定して初期化*/ counter-reset: sections boxes; } /*親要素のカウンター*/ section { counter-increment: sections; } section::before {/*数字に接頭語を付与*/ content: 'その' counter(sections); } /*子要素のカウンター*/ .box { counter-increment: boxes; } .box::before { content: counter(boxes,
Ambient Canvas Backgrounds - JavaScriptで背景アニメーションを生成
Webサイトの背景に動画を流したりするケースが見られますが、動画はサイズが大きくなりがちです。もっと軽量で、見た目のインパクトがある方法もあるでしょう。そのためにはJavaScriptで動的に作り出す方法が考えられます。 今回はその一つの方法として、Ambient Canvas Backgroundsを紹介します。Canvasを使い、背景を動かします。 Ambient Canvas Backgroundsの使い方 オーロラというテーマです。 渦巻き。 シフト。 合体。 パイプライン。 Ambient Canvas BackgroundsはJavaScriptで作っているので軽量に動きます。動的に作り出されているので多少のランダム性もあります。インパクトが強いので、効果的に使ってみたいライブラリです。 Ambient Canvas BackgroundsはJavaScript製のソフトウェア
NodeListとHTMLCollectionも別物なので気を付けよう。（DOMおれおれAdvent Calendar 2015 – 13日目） | Ginpen.com
console.log(document.forms[0]); // <form id="foo"></form> console.log(document.forms[1]); // <form id="bar"></form> console.log(document.forms['foo']); // <form id="foo"></form> console.log(document.forms['bar']); // <form id="bar"></form> forms については過去記事をどうぞ。 JavaScriptで要素を検索せずに取得する方法があります。（JavaScriptおれおれAdvent Calendar 2013 – 03日目） HTMLCollectionの出番 以下の場合がHTMLCollectionになります。 document.anchors do
Android 標準ブラウザで動的にDOM操作したときにCSS隣接セレクタが適用されないバグ - Qiita
CSSの隣接セレクタにバグがあるもよう。 静的なhtmlでは問題ないようだが、class属性を動的に変更した場合などはうまく適用されないようだ。 <a class="btn">Class属性変更するボタン</a> <div class="block-a">A</div> <div class="block-b">B</div> //jQuery使用 $('a.btn').on('click', function(){ $('.block-b').after('<div class="block-c">C</div>'); //Bブロックの後にCブロックを挿入 $(this).addClass('add'); }); a.btn ~ .block-a { /* 赤字になる */ color: #f00; } a.btn.add ~ .block-b { /* 赤字にならない */ color
クリエイティブなファビコンを設置しよう
2017年9月22日 Webサイト制作, 便利ツール Webサイトの制作時に、特に初心者さんが設置を忘れがちなファビコン。Webサイトをブックマークした際や、タブ表示した際にサイト名の横にちょこんと表示されている小さなアイコンのことです（Favourite + Icon = Favicon）。デバイスが増え、これまでとは設置方法が少し変わってきているのと、機能のついたファビコンも増えてきているので、その辺もあわせて紹介します！ ↑私が10年以上利用している会計ソフト！ ファビコンをデザインする ファビコンは16×16ピクセルとかなり小さいながらも、その存在は偉大です。複数のタブを開いている時や、ブックマークリストの中から、ひと目見てどのサイトか区別できるからです。 多くの場合、そのWebサイトのロゴマークを縮めたり、簡略化したものがファビコンデザインとして採用されています。CHANEL、A
複数のソーシャルボタンを設置し動的に呼び出す - という話
サイトシェア用と記事シェア用に、同じ種類のソーシャルボタンを置くことになった時のメモ。 ソーシャルボタンは一つ置くだけでかなりレンダリングに時間がかかるので、記事シェア用は静的に設置し、サイトシェア用は動的に呼び出すようにした。 動的に呼び出すのはTwitter,Facebook,Google,はてブの4つ。 まずは普通に記事シェア用のボタン群を各SNSの説明に書かれている通りに設置する <!-- twitter --> <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'htt
こんな手が…。Dropbox上で動的システムを動かす「Drapache」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
DrapacheはDropbox内のファイルを読み込んで動的に動かすWebサーバです。 DropboxではPublicに入れたファイルをHTTPを通じて読み込めるようにしています。この機能を使って静的なWebサイトを提供している人もいます。しかしそれで十分ではありません。時代は動的システム、Dropbox内のファイルを動的システムに対応させるソフトウェアがDrapacheです。 まずドメインを取ります。 次にDropboxをコネクトします。 接続を許可します。 完了です。そうするとアプリフォルダの中にDrapacheフォルダができあがります。 ファイル構成はこんな感じです。 サンプルのスクリプトです。確かに動的ファイルが動いています。 動的です。もちろん修正すれば若干のタイムラグはあれど反映されます。 Drapacheの仕組みとしては登録したユーザのデータを読み込み、DrapacheがWe
ke-tai.org > Blog Archive > KAYAC engineers’ blogにFlash Liteの動的生成に関する記事が掲載されています
KAYAC engineers’ blogにFlash Liteの動的生成に関する記事が掲載されています Tweet 2011/3/2 水曜日 matsui Posted in Flash, 記事紹介・リンク | No Comments » ユニークなサービスを作ることで有名な面白法人カヤックさんの技術ブログに、Flash Liteの動的生成に関する記事がありましたのでご紹介します。 → KAYAC engineers’ blog FlashLite 動的生成の全てを教えます(その1?) [tech.kayac.com] ケータイでFlashLiteで少し凝った使い方をしようとすると、現状その機能上の制限から動的生成は避けて通れません。 この記事では、カヤックさんのサービスで実際に使われていたという、実践的なFlash Lite動的生成の解説が行われています。 ActionScript変数
ウェブページのサイドバーに生じる空きスペースの活用方法
ページのデザイン時に悩むのが、2カラムレイアウトなどでサイドバーにどのくらいのコンテンツを配置するのか、というのがあります。 理想的なのは、メインとなるコンテンツと同じくらいの高さになるのが無駄もなくいいかもしれません。しかし、メインのコンテンツ量が決まったものではなく、しかも長い場合はサイドバーに未使用のスペースが多く生じてしまいます。 [ad#ad-2] この無駄になってしまう空きスペースの解決方法の一つとして、スペースの量に合わせてダイナミックにサイドバーのコンテンツを配置する方法を紹介します。
スタティック／ダイナミックパブリッシングの共存を考える（その1）
2024年2月1日 拙作プラグインの譲渡について 拙作のMovable Typeのプラグインを、株式会社ワールドイズマインに譲渡いたしました。 長きにわたり拙作のプラグインをご愛顧いただき、ありがとうございました。 Movable Typeの特徴の1つとして、テンプレートを静的（スタティック）に再構築して、ファイルに出力することがあげられます。 一方で、ページにアクセスがあった時に動的にページを出力する「ダイナミックパブリッシング」の機能もあります。 ただ、Movable Type本体がPerlで作られているのに対し、ダイナミックパブリッシングはPHPで作られています。 ダイナミックパブリッシングに対応していないプラグインが多くあるため、ダイナミックパブリッシングはあまり積極的に活用されていないと思います。 しかし、ダイナミックパブリッシングはMovable Typeに標準である機能なので
SearchEntries プラグインでMore Custom FieldsプラグインのCheckbox Groupを検索する（動的編）
「WordPressで学ぶPHP(1)変数・制御構造編」が発売されました。 「WordPressで学ぶPHP」シリーズの第1巻で、WordPressを通してPHPを学んでいく本です。 この本では、PHPの基本となる変数と制御構造について解説します。 Kindle本で、定価500円です。 昨日の記事の続きで、More Custom Fieldsプラグインで作ったチェックボックスグループと、SearchEntriesプラグインを組み合わせて、検索を行う方法を紹介します。 今日は、検索フォームを使って、動的に検索できるようにする手順を解説します。 1.検索フォームの作成 まず、検索フォームを作ります。 チェックボックスグループの個々のチェックボックスを検索フォームに出力する方法は、ドロップダウンのカスタムフィールドを検索フォームに出力する方法とほぼ同じです。 拙作のSupplementalCFT
PHPによってCSSを動的に出力する初心者向けチュートリアル:phpspot開発日誌
Build Your Site With Dynamic CSS - Fantastic Web Design PHPによってCSSを動的に出力する初心者向けのチュートリアルが公開されてます。 CSS自体をPHPで書いてしまうことで変数の使い回しや、if 文によって柔軟な出力ができるようになりますが、まだPHPを使ったことがない、という方にもわかりやすい解説になっているのでPHP入門としても使えそうです。 はじめ方としては、<link rel="stylesheet" href="css.php" type="text/css" media="screen" /> のようにCSSにPHPプログラムを動作するように設定した上で、css.phpの中身を書いていくというチュートリアルです。 css.php の中身にはPHPプログラムを書くものの、非常に簡単なものなので容易に理解できるはずです。
動的URLのページと静的URLのページは、検索エンジンの評価に違いがありますか？ αSEO
αSEO トップ > SEO FAQ > SEO内部施策 FAQ > 動的URLのページと静的URLのページは、検索エンジンの評価に違いがありますか？ SEO FAQ いいえ、動的URLも静的URLも同じページでしたら同じ扱い（評価）を受けます。2000年前後の時代では、動的URLよりも静的URLの方が全体的に順位が高い傾向がありましたが、近年はこうした傾向は確認できません。 以前は、パラメータが少し異なるだけの同一コンテンツを大量にインデックスしたり、スパイダートラップを避けるなどの理由で動的URLはクロールされにくい問題がありました。登録されにくいために、表面的にも、静的URLの順位が高くなっていたと考えられます。 現在はクローリング技術も改善され、比較的複雑なパラメータを持つ動的URLでも登録されるようになりましたし、URL形式の違いによる差異も見受けられません。 なお、これから新規
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
