tag:blogger.com,1999:blog-46113920566473861602024-03-14T20:54:54.277+09:00coding@brightwaltzbrightwaltzhttp://www.blogger.com/profile/10136272760939251760noreply@blogger.comBlogger9125tag:blogger.com,1999:blog-4611392056647386160.post-64780487636589071032020-05-20T18:49:00.012+09:002020-05-22T14:26:59.732+09:00最近のCMS動向調査最近のCMSの動向を調査した。<br />
<div>
<br /></div>
<div>
調査前は、<a href="https://www.idcf.jp/words/lamp.html" target="_blank">LAMP</a>環境でWordpressを入れるのがデフォルトで、他の選択肢があまり思いつかなかった。</div>
<div>
どうやら最近は下記のような構成の「<b>JAMstack</b>」が流行りっぽい。</div>
<div>
<br /></div>
<blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px; text-align: left;">
<div>
Headless CMS(ex. <a href="https://www.contentful.com/" target="_blank">contentful</a>, <a href="https://flamelink.io/" target="_blank">Flamelink</a>) </div>
<div>
+ Webアプリケーションフレームワーク(ex. <a href="https://ja.nuxtjs.org/" target="_blank">Nuxt</a>, <a href="https://jp.vuejs.org/index.html" target="_blank">Vue</a>)</div>
<div>
+ホスティング(ex. <a href="https://firebase.google.com/?hl=ja" target="_blank">Firebase Hosting</a>, <a href="https://www.netlify.com/" target="_blank">Netlify</a>)</div>
</blockquote>
<div>
<br /></div>
<div>
<a href="https://qiita.com/ozaki25/items/4075d03278d1fb51cc37" target="_blank"></a></div>
<blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px; text-align: left;">
<div style="text-align: left;">
《参考》 </div>
<div style="text-align: left;">
<a href="https://qiita.com/ozaki25/items/4075d03278d1fb51cc37" target="_blank">JAMstackとは</a> </div>
<div style="text-align: left;">
<a href="https://qiita.com/shoma2da/items/23f38e25496d0bb1675f" target="_blank">Headless CMSとは</a></div>
</blockquote>
<blockquote>
<div>
</div>
</blockquote>
<div>
<br /></div>
<div>
<br /></div>
<div>
以下、構成例。</div>
<div>
<blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px; text-align: left;">
<div>
<br /></div>
<div>
・<a href="https://oswdiary.net/archives/7001" target="_blank">Nuxt.js&Firebase で WordPressブログをフルリニューアルしたまとめ</a></div>
<div>
典型的なWordPressブログ(約3500ページ)を、URLや機能・使用感などを一切変えることなくFirestoreに丸ごと移行して静的化運用している(2020/5/9:引用)</div>
<div>
<br /></div>
<div>
</div>
</blockquote>
</div>
<blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px;">
<div>
<div>
<div style="text-align: left;">
・<a href="https://blog.potproject.net/2018/12/12/wordpress-gatsbyjs-contentful-netlify" target="_blank">爆速を求めて個人ブログを Wordpress から Netlify+GatsbyJS+contentful に移行した話</a></div>
</div>
</div>
</blockquote>
<blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px;">
<div style="text-align: left;">
Wordpressからの移行。 </div>
</blockquote>
<div>
<div>
</div>
<blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px; text-align: left;">
<div>
・<a href="https://qiita.com/miyaoka/items/9774f0250953da419a58" target="_blank">Firebase、Flamelink、Nuxt、Netlify、PWAを使ってJAMstackなブログを作る</a></div>
<div>
Firebase+Flamelink+etcの例。</div>
<div>
<br /></div>
<div>
・<a href="https://www.slideshare.net/kunichan/jamstack-106680339" target="_blank">JAMstackは眠らない</a>(slideshare)</div>
<div>
p.60:JAMstackの問題点</div>
<div>
<br /></div>
<div>
<br /></div>
</blockquote>
</div>
<div>
<br /></div>
<div>
ざっと見た感じ、JAMstackのメリット/デメリット。</div>
<div>
<br /></div>
<h3 style="text-align: left;">
メリット</h3>
<div>
<ol style="text-align: left;">
<li><u>表示速度の向上</u></li>
<ul>
<li>利用ユーザ側は静的コンテンツにアクセスするだけなので、爆速になる。利用ユーザにとってはこれが一番のメリットっぽい。 ※<a href="https://qiita.com/ozaki25/items/4075d03278d1fb51cc37#jamstack%E3%81%AE%E7%89%B9%E5%BE%B4" target="_blank">参考</a></li>
</ul>
<li><u>すべて無料で構築できる</u></li>
<ul>
<li>個人で利用する範囲なら無料で構築+運用可能。レンタルサーバ代がかからないのは良い。</li>
</ul>
<li><u>横展開しやすい</u></li>
<ul>
<li>ホスティング/フレームワーク/CMS/コンテンツ間を切り分けられるので、コンテンツは同じで別のWEBアプリの新規開発とかはしやすい。※<a href="https://qiita.com/shoma2da/items/23f38e25496d0bb1675f#headless-cms%E3%81%AF%E3%81%A9%E3%82%93%E3%81%AA%E6%99%82%E3%81%AB%E4%BD%BF%E3%81%88%E3%82%8B%E3%81%AE" target="_blank">参考</a></li>
</ul>
<li><u>セキュリティ</u></li>
<ul>
<li>Wordpressセキュリティ問題からの解放。PHPからの離脱。</li>
</ul>
<li><u>デザインを自由度高くカスタマイズできる(デメリット3との対比)</u></li>
<ul>
<li>ページデザインもお好みで。<a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>とか使うのも自由。</li>
</ul>
</ol>
<h3 style="text-align: left;">
デメリット</h3>
</div>
<div>
<ol style="text-align: left;">
<li><u>CMS管理画面のユーザビリティが、Wordpress >>>>> Headless CMS ぽい</u>(2020.5.20現在)</li>
<ul>
<li>機能面やプラグインは圧倒的にWordpressが充実している。 Headless CMSの操作性も、一般の人でも操作できるレベルとは思うが、開発者が触る想定のところも多い。</li>
</ul>
<li><u>仕組みが複雑になりがち</u></li>
<ul>
<li>LAMP+Wordpressはシステム環境的な相互依存は大きいが、その分シンプル。JAMstackだと、サービスを切り分けている分、管理部分が増える。</li>
</ul>
<li><u>デザインは一から作らないといけない(メリット5との対比)</u></li>
<ul>
<li>WordpressみたいにNo Codeは不可。<a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>等、既存テンプレートは使えるが作り込まないといけない。</li>
</ul>
</ol>
</div>
<div>
<br /></div>
<div>
所感として、試すのはありだと思う。</div>
<div>
Google好きなので、今のところFirebase+Flamelink+αが良さげかなと思ってる。</div>
<div>
《参考》</div>
<div>
<a href="https://paiza.hatenablog.com/entry/2018/11/21/%E4%BB%8A%E3%81%99%E3%81%90%E5%A7%8B%E3%82%81%E3%82%89%E3%82%8C%E3%82%8B%EF%BC%81FIrebase%E3%82%92%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AECMS%E3%81%AB%E5%A4%89%E3%81%88%E3%82%8B%E3%80%8CFlamelink%E3%80%8D" target="_blank">今すぐ始められる!FIrebaseをブログのCMSに変える「Flamelink」を使ってみた!</a></div>
<div>
<br /></div>
<div>
<br /></div>
brightwaltzhttp://www.blogger.com/profile/10136272760939251760noreply@blogger.com0tag:blogger.com,1999:blog-4611392056647386160.post-83588524007899929932014-05-30T12:42:00.003+09:002014-05-30T13:05:53.304+09:00[USB温度・湿度測定モジュール][Win7][VS12]USBMeter.dllを使ったプログラムがうまく動かない問題への対処法USB温度・湿度測定モジュールを使って、温度・湿度を取得することができるキットがある。<br />
<a href="http://strawberry-linux.com/catalog/items?code=52001">http://strawberry-linux.com/catalog/items?code=52001</a><br />
<br />
昔、後輩がそれを使ってプログラム(C#)を書いたが、他の開発環境に移植した際にうまく動かなかった。<br />
どうやら、USBMeter.dllのFindUSB関数で強制終了してしまうようだ。<br />
<br />
調べてみると同じような症状の方がいて、下記サイトが参考になった。<br />
<a href="http://ssk.tea-nifty.com/blog/cat22992315/index.html">http://ssk.tea-nifty.com/blog/cat22992315/index.html</a><br />
<a href="http://gogomini.sakura.ne.jp/cgi/heppokoZ/index.php?e=1980">http://gogomini.sakura.ne.jp/cgi/heppokoZ/index.php?e=1980</a><br />
<br />
ただ上の方たちは、OSが違ったりビット数が違っていたが、私の環境は療法とも同じだった。<br />
元の環境 :Windows7(32bit)でVisualStudio10<br />
新しい環境:Windows7(32bit)でVisualStudio12<br />
<br />
そのため当初は関係ないと思ったが、<br />
試してみたら正常に認識した。<br />
<br />
変更点としては扱う型を「Int → IntPtr」に変えただけ。<br />
<br />
しかし、こういう型の問題は、HTMLの文字列でも動画のエンコードでも、未だに多くの人が悩まされているが、解決される日は来ないのだろうか。<br />
<br />brightwaltzhttp://www.blogger.com/profile/10136272760939251760noreply@blogger.com0tag:blogger.com,1999:blog-4611392056647386160.post-68339704304798050472014-02-03T13:11:00.001+09:002014-02-03T15:08:56.961+09:00[objective-C][Xcode]incompatible typexViewController.m:37:24: Assigning to 'id<UIPickerViewDelegate>' from incompatible type 'xViewController *const __strong'<br />
という警告があって、どうしたらいいか調べたらこれが見つかった。
<br />
<div style="font-family: 'Hiragino Kaku Gothic Pro'; white-space: normal;">
<a href="http://stackoverflow.com/questions/6364911/handling-app-delegates-and-switching-between-views">iphone - Handling app delegates and switching between views - Stack Overflow</a>:</div>
<pre class="brush: c;">//Suppress the warning by changing this:
controller.delegate = self;
//to this:
controller.delegate = (id)self;
</pre>
こういう風に型を指定すればいいのか
brightwaltzhttp://www.blogger.com/profile/10136272760939251760noreply@blogger.com0tag:blogger.com,1999:blog-4611392056647386160.post-12951711448168926072013-03-09T19:31:00.001+09:002013-03-16T15:26:27.556+09:00Html5のvideoを表示DIV内で最大化(Fix)する方法現在Twitter Bootstrapを使ってサイトを構築しており,cssクラス:row-fluidを適応しているため,videoのサイズを可変できるようにしたい.<br />
だが,videoタグの要素に対してcssクラスのspanを適用しようとしたが効かなかった.<br />
<br />
そこで何か方法がないか探し,<br />
<a href="https://gist.github.com/jgarber/2302238">https://gist.github.com/jgarber/2302238</a><br />
<a href="https://github.com/marclarr/FitVids.js">https://github.com/marclarr/FitVids.js</a><br />
を見つけたが,うまく動かなかった.<br />
<br />
そのとき↓を見つけ,たった2行で動いた(笑)<br />
<br />
<blockquote class="tr_bq">
video{<br />
max-width: 100%;<br />
height: auto;<br />
}</blockquote>
<a href="http://www.peachpit.com/articles/article.aspx?p=1929616&seqNum=7">Other fixed-width assets | Implementing Responsive Design with Media | Peachpit</a>:<br />
<a href="https://chrome.google.com/webstore/detail/pengoopmcjnbflcjbmoeodbmoflcgjlk" style="font-size: 13px;">'via Blog this'</a><br />
<br />
感謝.brightwaltzhttp://www.blogger.com/profile/10136272760939251760noreply@blogger.com0tag:blogger.com,1999:blog-4611392056647386160.post-88557294049319925652013-03-03T17:04:00.004+09:002013-03-04T18:19:57.177+09:00[ASP.NET MVC4 Web アプリケーション]広範囲のリンクを作成<div class="separator" style="clear: both; text-align: left;">
Razorにはリンクやフォームを生成してくれるHtmlHelperがある.</div>
<div class="separator" style="clear: both; text-align: left;">
例えばリンク生成にはActionLinkを用い,下記のように表記する.</div>
<blockquote class="tr_bq">
@Html.ActionLink("リンクとして表示される文字", "リンク先のView名 or Controller名")</blockquote>
<div class="separator" style="clear: both; text-align: left;">
(ココらへんの話はググれば結構出ます)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
ただ,文字以外にも写真などでリンクを作りたい時がある.</div>
<div class="separator" style="clear: both; text-align: left;">
写真のみの場合はActionLinkの代わりにImageLinkとして拡張された方がいる.(Google:「ImageLink MVC ASP.net」とかで出ると思う)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
しかしDiv要素など,複数のコンポーネントが存在したものを同一リンクで生成したかったので,ちょっと困った.</div>
<div class="separator" style="clear: both; text-align: left;">
そこでいろいろ探してたら,"a href"と"Url.Action"を組み合わせれば実現できることが分かった.</div>
<div class="separator" style="clear: both; text-align: left;">
以下がサンプル.(引数は適宜変更ください)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<script src="https://gist.github.com/brightwaltz/5075260.js"></script>
<br />
<div class="separator" style="clear: both; text-align: left;">
これで生成されたものが下図.</div>
<div class="separator" style="clear: both; text-align: left;">
デザインにはTwitter Bootstrapを使っており,そのThumbnailsの一要素という位置付け.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhfkZ7YqNllKOqO2rfx8ghW59eJaFtUyvj3ZF93Glqj0JsEO62J7UhMfRp9XS9-jxtAQZ25zRlz6Itf9xzp2rTP-hnwxHNrYn5BUXa6_bQ0kQQc7P3-W8aVpDEQH5tMY7a0AxobcgAuIo/s1600/2013-03-03-01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhfkZ7YqNllKOqO2rfx8ghW59eJaFtUyvj3ZF93Glqj0JsEO62J7UhMfRp9XS9-jxtAQZ25zRlz6Itf9xzp2rTP-hnwxHNrYn5BUXa6_bQ0kQQc7P3-W8aVpDEQH5tMY7a0AxobcgAuIo/s320/2013-03-03-01.png" width="320" /></a></div>
<br />
<div>
これで上記サムネイルのどこをクリックしても,リンク先に飛ぶようになった.</div>
<div>
ただ,これを多用するとコードが荒れるので,ほどほどがベスト.</div>
brightwaltzhttp://www.blogger.com/profile/10136272760939251760noreply@blogger.comtag:blogger.com,1999:blog-4611392056647386160.post-71706435786219139332013-03-03T16:38:00.004+09:002013-03-06T12:27:17.005+09:00[mediaelement.js]Youtube再生時のループを禁止<a href="http://html5-showcase.com/wp-content/themes/html5showcase/thumb.php?src=wp-content/uploads/2012/08/mediaelement-js.png&w=690&h=396&zc=1&q=90" imageanchor="1"><img border="0" height="183" src="http://html5-showcase.com/wp-content/themes/html5showcase/thumb.php?src=wp-content/uploads/2012/08/mediaelement-js.png&w=690&h=396&zc=1&q=90" width="320" /></a><br />
<a href="http://mediaelementjs.com/">http://mediaelementjs.com/</a><br />
<br />
<blockquote class="tr_bq">
MediaElement.js</blockquote>
サーバ上の動画やYoutubeなどにある動画をHTML5のvideoタグで表示できるjsライブラリ.<br />
<br />
これを使ってYoutubeを再生してみたが,なぜかループが止まらない.<br />
サイトに記載されていたoptionの<br />
<blockquote class="tr_bq">
useful for <audio> player loops<br />
loop: false,</blockquote>
でもダメだった.(そもそもこれはaudio用みたい<br />
<br />
そこで,audio,videoで作られたmediaelement要素に対し,次のようなEventListenerを付与した.<br />
<br />
<script src="https://gist.github.com/brightwaltz/5075212.js"></script>
"ended"状態の時,playerを止める.<br />
なお,3行目の処理はサンプルファイルに書かれているものなのでそちらを参照.brightwaltzhttp://www.blogger.com/profile/10136272760939251760noreply@blogger.comtag:blogger.com,1999:blog-4611392056647386160.post-16146782514344481352013-02-19T19:29:00.001+09:002013-02-19T19:35:08.598+09:00[IIS]redirection.configが読み込めないWebMatrixで新規サイトを開こうとしたときや、VisualStdioでMVCアプリを作成しようとしたとき、IISでローカルを仮想サーバとしてサイトを開こうとする。<br />
そのとき、<br />
<blockquote class="tr_bq">
redirection.config 構成ファイルを読み取れません</blockquote>
というエラーが出てしまい、正直けっこう長い間困ってた。<br />
<br />
これが、下記サイトで解決した。<br />
<br />
<a href="http://stackoverflow.com/questions/9903183/webmatrix-error-when-creating-new-site-from-folder-machine-redirection">windows - Webmatrix error when creating new site from folder "MACHINE/REDIRECTION" - Stack Overflow</a>:<br />
<a href="https://chrome.google.com/webstore/detail/pengoopmcjnbflcjbmoeodbmoflcgjlk" style="font-size: 13px;">'via Blog this'</a><br />
<br />
原因としては、<br />
redirection.configがデフォルトでは、<br />
C:¥Windows¥System32¥inetsrv¥config<br />
にあるけど、<br />
IISv7とかを入れたりしたら別のディレクトリを参照してしまい、<br />
「ないよ?」って言ってるのが原因だった。<br />
<br />
別のディレクトリってのが、自分の場合は<br />
マイドキュメント¥IISExpress¥config<br />
<br />
これ、日本語で調べても出てこないってことは、そんなにないことなんかな。brightwaltzhttp://www.blogger.com/profile/10136272760939251760noreply@blogger.comtag:blogger.com,1999:blog-4611392056647386160.post-80917785130564834152013-02-17T18:32:00.001+09:002013-02-20T23:34:16.238+09:00[Tumblr]Tumblr Tag Clouds 色の設定TumblrでTagをSildeBarに表示するスクリプトがある.<br />
<br />
Tumblr Tag Clouds<br />
<a href="http://rive.rs/projects/tumblr-tag-clouds">http://rive.rs/projects/tumblr-tag-clouds</a><br />
<br />
Tumblrへの導入方法は以下サイトが参考になる.<br />
<a href="http://mimic-labo.com/post/9093343456/tumblr-taglist-howto">http://mimic-labo.com/post/9093343456/tumblr-taglist-howto</a><br />
なお,改良版のTumblr Tag Cloud Widgetというのもある.<br />
<a href="http://post-theory.com/tumblr-tag-cloud-javascript">http://post-theory.com/tumblr-tag-cloud-javascript</a><br />
(結局使わなかった)<br />
<br />
解説サイト:<br />
<a href="http://chips-tips.tumblr.com/post/30584475666/tumblr-tag-cloud-widget">http://chips-tips.tumblr.com/post/30584475666/tumblr-tag-cloud-widget</a><br />
<br />
ここでは,Tumblr Tag Cloudsを導入後,タグのテキストの色を変える方法を書く.<br />
<br />
1.<br />
script生成時,<br />
CSS:none(on your own)<br />
を選択.<br />
2.<br />
scriptを表示したい場所に貼付け後,CSSで以下のように記述.<br />
<script src="https://gist.github.com/brightwaltz/4970746.js"></script>
上がデフォルト色で,下がマウスオーバー時・クリック時の色.brightwaltzhttp://www.blogger.com/profile/10136272760939251760noreply@blogger.comtag:blogger.com,1999:blog-4611392056647386160.post-78786691531371146712013-02-17T18:31:00.001+09:002013-02-17T18:31:37.526+09:00Hello, world!コーディング関連の情報や話を載せていく場所です.brightwaltzhttp://www.blogger.com/profile/10136272760939251760noreply@blogger.com0