JavaScriptこんばんは。ブログを覗いたら、MSIEでカラーキーワード(redとかtomatoとか)やらをHEX方式(#f01234とか)に変換するやり方が載ってました。value;};へぇ。ppBlogには、cornerplay.jsというJavaScriptがあって、指定ボックスの角を丸くしたり凸凹にしたりできる動作を担当しています。具体的には以下のような感じです。こんな感じで、コーナーをちょいと変えると、見た目のアクセントになります。指定できるように、これらカラーキーワードをHEX方式に直した対応表も含めているんですよね(147色ぐらいある)。今、考えるとほかにもやりようがある気もしますが、当時は仕方ないなぁとその対応表をJSON配列にして含めてました。Edwardsのやり方なら、対応表なんていりませんね。記述が短くなってファイルサイズも小さくなるだろうし言うことないです。これはIE限定なので、Firefoxやその他のブラウザでも動くように改良してみましょう。Deanは、「ほかのブラウザは、getComputedStyle()が使えるからバッチリだぜ。調べたところ、各ブラウザ(Firefox、Opera、Chrome・SafariなどのWebKit系)で結構動作が違っていて興味深かったです。あり出来れば避けたいところ。大体以下のような感じでいけそうです。}};流れとしてはこうです。IEでcreateTextRange()を使うのでBUTTON要素を作成。color指定した色の取得。この時点で、OperaがHEX形式の値を返してくれる。同様に、この時点で、IEはqueryCommandValue経由でBGR値を取得できるので、それをHEXに変換。IE以外でFirefoxは、ecolorは指定したままの値。getComputedStyleを使うとRGB値を返してくれる。WebKit系は振る舞いがややこしい。redがそのまま入り、tomatoなどの拡張色ならRGB形式を返す。getComputedStyleはどうかというと、まだDOMに組み入れていないので空の値を返す。WebKit系で基本17色であれば、それはJSON対応させてHEX値を返すようにします。なければ、RGB値を返してくれるのでHEX値に変換。document.body.appendChildなどでのDOM改変は必要ない点がポイントです。WebKit系の振る舞いが独特で、特別な処理が必要になりますが、いずれにせよ、DOMの改変を伴わなくて良いかなぁと(まぁcreateElementはしますが)。ちなみに、OperaでもgetComputedStyleは使えますが、FirefoxやWebKitがRGB値を返すのに対して、OperaはHEX値を返します。RGB値からのHEX値への変換は、いくつか方法があるでしょう。上では正規表現を用いています。逆にHEXからRGBへの変換も色々あると思います。")";}などですかね。ついでなので、カラーキーワードからRGB値に変換する関数も挙げておきます。考え方は基本的に同じです。DOMの改変は必要ないです。WebKit系が一抜けする可能性あり。}}こんな感じですかねぇ。ファイルサイズが小さくなるなら、cornerplay.jsを書き換えても良いなぁ。ちなみに、圧縮したら920バイトになりました。PHPこんにちは、martinです。師走はすぐそこですね。先日レヴィ・ストロースW氏が亡くなりました。語っていたんですが、ちっとも進んでいませんフォーラムでアクセス解析関連のバグの報告がありました。→http://forum.p2b.jp/index.php?mode=box&UID=4592ホストごとの集計の際に、ピリオドで区切られた長いホスト名を短くする処理を入れていたんですが、ホスト名が取得できずにIPアドレスが登録されているときにも、これを適用してしまいIPアドレスが削られて表示されていました。正規表現部分を修正しました。これだけだと、1行だけの修正なんで、ついでにドメインごとの集計もする記述を加えました。いうドメインでソートするかは、374行目で指定しています。'or.jp');みたいにすればOKです。自動的に認識されるかと思います。ファイルを添付しておきます。statディレクトリのものと入れ替えてください。コメントで、ppBlogのエディタのカラーパレットが、色が豊富すぎるのでは?というご指摘があり、確かにそう思っていました。計算上は、1677万色程度の指定が可能ですので。ブログの文章で、そこまでの色数が必要かというとそうではないでしょうね。基本となる16色のみに絞ったバージョンも用意してみました。スクリーンショットを挙げておきます。こんな感じの16色です。これを有効にするには、editor.jsの6行目にある変数を有効にします。これで簡易パレットになるfalse(あるいは0)を指定すれば、従来のカラーパレットです。ちなみに、簡易パレットの色は、editor.jsの593行目で指定しています。['red','blue','yellow','black','green','silver','lime','gray','olive','white','maroon','navy','purple','teal','fuchsia','aqua'];お好みの順番や色に変えても良いでしょう。試されたい方はどうぞ。何か不具合を見つけましたらお知らせください。アップデートこんばんは。久しぶりのエントリーです。ppBlogがバージョンアップしてv1.8.7になりました。前バージョンは1.8.5で、バージョン1.8.6はありません。それなりにいじったのと、例によって奇数好きなので。v1.8.5との差異ですが、既知のバグに対するものと、後、使い勝手の向上の部分がメインです。既知のバグとしては、画像のアップロードに関してですが、いつのバージョンからか、大きさ(縦横のサイズ)が小さい画像をわざわざリサイズして大きい画像にしたりしてたので、その辺りを修正しています。画像アップロードに関してですが、JPEG写真であれば、それの縮小時に品質を指定出来るようにしました。後は、タグの文字種(タグに半角括弧を含んでいたりとか)によっては、タグのエントリーが上手くピックアップ出来ないのにも対処しています。このためにindex.phpのタグ表示部分に少し修正が入っています。他には、アクセス解析のデータは、3-4か月分のストックにしました。それ以前の古いアクセスデータは自動的に削除されます。従来は、削除されずにどんどん溜まっていましたが、多すぎるログファイルは、パフォーマンスにも影響しますし。バージョンアップをすると、古いデータ(stat/dataディレクトリの中)はすべて削除されますので、残しておきたい方は、予めFTPソフトなどでダウンロードしておいてください。動画貼り付け支援関連でも修正が入っています。動画投稿サイトも、いつの間にやらサービスが終了していたところは削除してます。ようで、ppBlogではこの機能も少し取り入れていたので残念といえば残念ですが仕方ないですね使い勝手の向上ですが、目に見える部分では、エントリー作成でのエディタ部分ですかね。スクリーンショットを挙げておきます。フォント修飾系が増えてます。従来は、太字にする「B」ボタンで、<strong>foo</strong>みたく入力されていましたが、これは文字通り<b>foo</b>となるようにしました。blod">foo</span>という出力にしようかと迷ったのですが、こう書くとひとつは冗長なのと、後、視覚的強調のためにわざわざ用意してあるのだから、あえて使ってみようという思いもあります。いう意見が多いように思いますが、B要素を使うことでアクセシビリティの低下を招くとも思いませんし、HTML5でも採用されているので存在意義があるんでしょう。個人的には、日本語文中のアルファベットや数字なんかに使うと視覚的に見やすいのでは思っています。これまでは、特に論理的強調でもないのにstrong要素ばかりを使っていたので、それはちょっと反省しています。strong要素は、「S」というボタンで入力できます。入力する「E」ボタンも付けました。なんだかBSEで狂牛病みたいですが、たまたまです。強調の度合いとしては、EM要素より強い強調にはSTRONG要素という使い分けのようです。アルファベット圏では、EM要素内の文字列はイタリック体(斜体)として表示されますが(もっともブラウザ依存です)、少なくとも日本語では、斜体文字という文化はないようで、例えばメイリオフォントには斜体は存在しませんし、スタイルシートでイタリック体を指定しても無視されます。やって、「強調」であることを示すかというと、よくあるのは、文字列に読点を打つとか括弧でくくるとかでしょうか。この点では、EM要素は「強勢」と呼ぶほうがふさわしい気もします。ppBlogのベーシックテーマでは、このEM要素に対しては、ドットを付けるという風にしています。スタイルシートを用いて、EM要素の背景にドット画像を指定しているのですが、長さの調整とか文字列との位置関係とか難しいです。これはEM要素で囲まれた文字列ですここでは文字列の下にドットが来るようにしていますが、上に置いてもよいでしょう。アマリリスを笛で弾くときに意識するように言われた覚えがあります。ラリラリラリラ~♪でしたっけ?エディタ関連でもうひとつ。これは前から実装しないといけないなぁと思っていたんですが、カラーパレットで色を選択した際に、その最後に選択した色を覚えておく機能です。最後に選んだ色は、左側に表示させるようにしました。この部分をクリックすることで、同じ色指定が可能になります。こんなところでしょうか。v1.8.5との差分ファイルを添付しておきます。13:47:24強調のために、文字列に打つ点は、「圏点W」と呼ぶらしいですね。Wikipediaのページにある圏点は参考になるのでは思います。JavaScriptこんばんは、martinです。CSS3+JavsScriptネタでも。目標は、IEでもCSS3のドロップシャドウ効果が得られるようになること。以下のような感じで、Firefoxとほぼ同等の効果を得ることが出来ます。左がIE8で右がFirefoxです。プログラムアップデート→http://p2b.jp/2010/08/04/IE-compatible-CSS3-dropShadow影のぼやけた感じも再現。Opera10などは対応しています。典型的には、以下のような感じで指定します。順にx-offset、y-offset、ぼかし半径、影の色。最初に色指定でもOK。いうのもあり、これは、FirefoxとSafari、Chromeで先行実装されています(Opera10はまだかな)。指定の仕方は、text-shadowと同様です。ほんとは、spread-radiusというオプションのパラメータもあるのですが、これはなくても良いんじゃないかと思ってます。順にx-offset、y-offset、ぼかし半径、影の色。Chrome用の記述。box-shadow固有の属性として、insetというのがあります。これは、ドロップシャドウをボックスの内側に見せるものです。red;今のところ、insetオプションを理解するのは、Firefox3.5だけのようです。あれっ、ドロップシャドウって、IEが10年ぐらい前から実装してなかったっけ?と思う方もいるでしょう。確かにそんなものがありました。IE独自のフィルター機能を使ってそれっぽいことが出来ます。Filterこれらが紹介された当初はクールだと思いましたが、使い勝手が今イチだったのと、あとは、玉に瑕というか白璧の微瑕(はくへきのびか)だったと思うのは(ここまでいうと誉めすぎですが)、影の「ぼかし」が指定出来なかったことです。した輪郭の影では折角の魅力も半減です(個人的に)。影のぼかしはそれなりにCPUのパワーを必要とするので、当時はまだ難しかったのかもしれません。これらが広くWebサイトで使われるということはなかったです。AjaxのようにまたしてもIEの早すぎた実装だったわけです。昨今、パソコンの性能も上がり、IE以外のモダンなブラウザがCSS3のtext-shadowをサポートするようになったせいか、この頃は色んなサイトでドロップシャドウ効果を見かけるようになりました。シェアの大きいIEでも、CSS3に準拠した、それらしいドロップシャドウを付けたいということで考えてみました。用いて、影のぼかしを演出するということです。このBlurは、要素自体をぶれた表現にするので、それを別のレイヤーとして生成して、それを影を付けたい要素の背後に配置するというものです。別のレイヤー生成というと、大げさな気もしますが、ぼやけた感じを出すには、これ以外の方法はない気がしますし、Firefoxにしても、影は別レイヤーなんじゃないんでしょうか、知りませんが。それっぽいモノができたのでデモをお見せします。IEでもCSS3のドロップシャドウを実現するデモtext-shadowもbox-shadowもカンマで区切った複数の指定が可能なので、これにも対応してみました。*/}上の指定だと、以下のような感じになります。IE8でのスクリーンショットです。現時点では、Firefox3.5のみが対応しているinsetオプションも解するようにしてみました。IE8でのスクリーンショットをば。実際の設置方法ですが、なるべく簡単に設置できるように、外部スクリプトとしました。CSSでの記述は、特別なものは必要ないです。普通に上に挙げたような感じで、text-shadowやbox-shadowの指定をしておけば良いです。後は、ドロップシャドウを効かせたいページで、外部スクリプトを次のように呼び出せばOKです。src="path/to/css3shadow.htc"></script>ファイルの名前css3shadow.htcさえ変えなければOKで、それを置いた相対パスを、各自で記述すれば良いです。これ以外の指定方法としては、このスクリプト自体は、完全にIE向けなので、Firefoxその他のブラウザには不要なものです。src="path/to/css3shadow.htc"></script><![endif]-->でも良いと思います。これであれば、Firefoxなどではコメントとして解釈されるので、サーバーからcss3shadow.htcが呼び込まれることはないです。書き上げたばかりなんで、細かいチェックは出来ていませんが、外部スクリプトを呼び込むだけなので、気軽に試して頂けるかと思います。css3shadow.htcを添付しておきます。8KB未満の小さいファイルです。ちなみに、影の色指定ですが、透明度を設定できるrgba方式にも対応しています。これは、通常のRGB形式に加えて、4つめに透明度を指定出来るものです。ゼロで透明、1で不透明となります。*/オフトピですが、RGBって、たまにRBGとタイプミスしたり、あれっ?どっちだっけと混乱するときがありますが、キーボードで、上から順にRGBとなっている、と覚えると良いです。以下、Mozillaの参考サイトを挙げておきます。最新10件のコメントmimimimifaghasegawahiroshimartinsarutarosスーパーコピースーパーコピーウブロスーパーコピー時計のブランド時計コピー通販です。弊店のウブロコピー時計等のブランドコピー時計は送料手数料無料で、業界NO.1品質2年無料保証です。全サイト15%OFFキャンペーン実施中です。