Jiro Laboratory

C#、ASP.NET、JavaScript、Androidとか

bootstrap で Youtube 動画をレスポンシブに埋め込む

Bootstrap CSS Youtube

ここhttp://getbootstrap.com/components/#responsive-embedに答えが書いてあります。

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

16:9 か 4:3 のいずれかのアスペクト比を選ぶ必要があります。
bootstrap を使えば、これだけでレスポンシブ対応できます。
スマホでも画面ピッタリのサイズで表示できます。

C#でテーブルコピーするなら SqlBulkCopy が速かった

.NET SQL Server

テーブル構成や行数など、いろいろ条件はあると思いますが、万単位のデータをコピーするのであれば一度試してみてください。

var bc = new SqlBulkCopy(con);
bc.DestinationTableName = tableName;
bc.WriteToServer(dt);

con は接続オブジェクト、dt は DataTable*1です。
事前に DataTable に select しますが、列の並びがコピー先のテーブルに一致している必要がありますので注意してください。

タイムアウトしてしまう場合は、BulkCopyTimeout（ミリ秒）で設定できます。

bc.BulkCopyTimeout = 3000 * 1000;

*1:DataReaderも渡せるようです

Razor で #if DEBUG を使う

Razor ASP.NET stackoverflow

英語版Stack Overflowから。

HttpContext.IsDebuggingEnabled を使う

HttpContext.IsDebuggingEnabled プロパティ (System.Web) というものがあるらしいです。これを使えば以下のように書けます。

@if (HttpContext.Current.IsDebuggingEnabled)
{
    <p>デバッグ</p>
}

拡張メソッドを作成する

#if DEBUG を仕込んだ拡張メソッドを作成します。

public static bool IsDebug(this HtmlHelper htmlHelper)
{
#if DEBUG
      return true;
#else
      return false;
#endif
}

Razor では以下のように使用できます。

@if (Html.IsDebug())
{
    <p>デバッグ</p>
}

静的HTMLで Browser Link を使う

Visual Studio html

静的HTML では無効になっている

とても便利なブラウザー リンク (Browser Link)の機能ですが、*.cshtml だけではなく静的htmlでも使えます。
ただし、デフォルトでは静的htmlのブラウザーリンクは無効になっているので web.config の修正が必要です。
以下のように handler を追加します。

web.config
<configuration>
  <system.webServer>    
    <handlers>
      <add name="Browser Link for HTML" path="*.html" verb="*" 
           type="System.Web.StaticFileHandler, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" 
           resourceType="File" preCondition="integratedMode" />
    </handlers>
  </system.webServer>    
</configuration>

参考

Using Browser Link in Visual Studio 2013 | The ASP.NET Site
MSDN Blogs

ActionResult でテキストデータをダウンロード

ASP.NET

ASP.NET MVC で文字列データをファイルとしてダウンロードする方法です。
こちらで紹介されている方法はファイルのダウンロードではなく、ブラウザにデータが表示されてしまいます。これはこれで使い道があるのですが、ファイルとしてダウンロードしたい場合の方法が簡単に見つけられなかったのでメモ。

続きを読む

はてなブログのページ構成

html CSS

現在使っているテーマ

今は公式テーマのWideboardをカスタマイズして使っています。

  • シンプル
  • ソースコードを載せる時に変な箇所で改行されにくい（横幅が100%だから）

という点が気にいっていました。
ただし、最近記事が増えてきて、

  • 検索ボタンやカテゴリが一番下にあるので使いづらい

というところが気になるようになり、右側にプロフィールやカテゴリを載せたくなってきました。
そこで今、２カラムの横に広がるリキッドレイアウトのオリジナルcssを作成中です。

はてなブログのページ構成

cssを作成するにあたって、はてなブログのおおまかなhtml構造を確認したのでメモとして簡単に残しておきます。
（デザインに関係しないと思われる箇所とか細かいところは割愛）

body
+ div#globalheader-container
+ div#container
  + div#container-inner
    + header#blog-title
    + div#content
      + div#content-inner
        + div#wrapper
          + div#main
            + div#main-inner
              + article#entry ・・・・・・・・・・(1)
                + div#entry-inner
                  + header#entry-header
                  + div#entry-content
                  + footer#entry-footer
              + article#entry
              + article#entry
              + ...

        + aside#box2          ・・・・・・・・・・(2)
          + div#box2-inner
            + div.hatena-module-profile
            + div.hatena-module-category
            + div.hatena-module-recent-entries
            + ...
+ footer#footer
  • (1) article#entry が１記事分の内容。繰り返し出現します。
  • (2) サイドバー。ここにプロフィールやカテゴリ、最近の記事などが入ります。

はてなブログのhtmlは想像したよりも分かりやすい構成だと思います。
当面の目標は #box2 を幅固定で右側に表示し、#wrapperか#main をウィンドウサイズに追従して広がるようにすることです。

参考

はてなブログテーマ制作の手引き - はてなブログ ヘルプ

Android Studio - Tip of the Day : Ctrl + D で選択ブロックを複製

android Android Studio tips

エディタ内で Ctrl + D を押すと選択ブロック（エディタで範囲選択しているブロック）を複製できます。（選択ブロックのすぐ下に複製されます）
選択ブロックがなければカーソルのある行を複製します。

Ctrl+D in the editor duplicates the selected block or the current line when no block is selected.